When using jQuery UI Dialog, values loaded into form textarea fields that are part of the dialog are not displayed.
I am attempting to use a jQuery dialog to pop up a CRUD form. In the case of update (edit), the form fields are loaded with the values from the item being "edited."
When I open the dialog (if key == "edit"), the "name" field is displayed but the description textarea is not.
Viewing the HTML tab under Firebug, the text value of the textarea (that between the textarea and /textarea) is correctly set, but that value does not display in the resultant dialog:
<form id="CRUDform">
<fieldset>
<label for="name">Name</label>
<input id="name" class="text ui-wiget-content ui-corner-all" type="text" style="display:block" value="[SHOULD NEVER SEE THIS]" name="name">
<label for="description">Description</label>
<textarea id="description" class="text ui-widget-content ui-corner-all" style="display:block" name="description">Description of Nothing</textarea>
<!-----------------------------------^^^^^^^^^^^^^^^^^^^^^^ -->
</fieldset>
</form>
I've found some references to issues with form fields related to dialogs being appending to the body of the document rather than the form, but that does not seem relevant to this case.
Platform: Windows 7 Professional
Browser: Firefox 24.0
Firebug: 1.12.3
jQuery: 1.9.1
jQuery UI: 1.10.3
Here is the test code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
<style>
.dialog
{
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery.contextMenu.js"></script>
<script>
$(function () {
$(".dialog").hide();
$.contextMenu({
selector: '.myContext' ,
build: function ( trigger , thrown )
{
return (
{
autoHide: true ,
callback: function ( key , menuOptions )
{
var name = $(this).data("label");
var message = "menu action [" + key + "] on [" + name + "]";
window.console && console.log(message) || alert(message);
if (key == "new")
{
$("#dialog").dialog({
title: "Adding Child of " + name + " Class",
modal: true ,
buttons:
{
"Create" : function ()
{
var name = $("#name").val();
var description = $("#description").val();
alert("Adding name [" + name + "] description [" + description + "]");
$(this).dialog("close");
},
"Cancel" : function ()
{
$(this).dialog("close");
}
},
close: function ()
{
$("#name").val("").removeClass("ui-state-error");
$("#description").val("").removeClass("ui-state-error");
}
});
}
else if (key == "edit")
{
var name = $(this).data("label");
var description = $(this).data("description");
console.log("editing name [", name , "] description [", description , "]");
$("#name").val(name);
$("#description").text(description);
console.log("name set to [" ,
$("#name").val() , "] description set to [",
$("#description").text() , "]");
$("#dialog").dialog({
modal: true ,
title: "Editing " + name ,
buttons:
{
"Save" : function ()
{
var name = $("#name").val();
var description = $("#description").val();
alert("Saving name [" + name + "] description [" + description + "]");
$(this).dialog("close");
},
"Cancel" : function ()
{
$(this).dialog("close");
}
},
close: function ()
{
$("#name").val("").removeClass("ui-state-error");
$("#description").val("").removeClass("ui-state-error");
}
});
}
},
items:
{
"new" : { name: "New", icon: "new" } ,
"edit" : { name: "Edit", icon: "edit" } ,
"delete" : { name: "Delete" , icon: "delete" }
}
});
}
});
});
</script>
<body>
<title>jQuery Dialog Test</title>
</head>
<h1>jQuery Dialog Test</h1>
<div id="list" class="list">
<ul>
<li class="myContext" data-description="Description of Something" data-label="Something">Something</li>
<li class="myContext" data-description="Description of Something Else" data-label="Something Else">Something Else</li>
<li class="myContext" data-description="Description of Nothing" data-label="Nothing">Nothing</li>
</ul>
</div>
<div class="dialog" id="dialog" title="Do Something">
<h1>Doing Something</h1>
<form id="CRUDform">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="[SHOULD NEVER SEE THIS]" style="display:block" class="text ui-wiget-content ui-corner-all">
<label for="description">Description</label>
<textarea name="description" id="description" style="display:block" class="text ui-widget-content ui-corner-all">[SHOULD NEVER SEE THIS]</textarea>
</fieldset>
</form>
</div>
</body>
</html>
Related
I am trying to add some custom logic to my semantic ui validation but can't figure out what I am doing wrong.
Basically, when the user selects "Yes" from the drop-down, I would like to make the "input_field" mandatory. If the user selects "No", the "input_field" becomes optional and the form can be submitted.
I tried searching for examples and followed some code from the Semantic Ui website but can't figure out what I am missing. Any advice would be appreciated as I am on a deadline for a project I am working on.
Form:
<div class="ui dimmer">
<div class="ui huge text loader">Loading</div>
</div>
<form method="post" action="" class="ui form" autocomplete="on">
<div class="ui segment">
<div class="ui two fields">
<div class='field'>
<div class="ui selection dropdown">
<input type="hidden" class="selectOption" name="select">
<i class="dropdown icon"></i>
<div class="default text">Select an option</div>
<div class="menu">
<div class="item" data-value="Yes">Yes</div>
<div class="item" data-value="No">No</div>
</div>
</div>
</div>
<div class="field">
<input id="input_field" name="input_field" type="text"/>
</div>
</div>
</div>
<button id="submit" class="ui green button" name="submit" type="submit">Submit</button>
</form>
Validation:
<script>
$('.ui.form').form({
keyboardShortcuts: false,
on: 'blur',
inline: 'true',
fields: {
selectOption: {
identifier: 'select',
rules: [
{
type: 'empty',
prompt: 'Please select an option'
}]
},
input_field: {
identifier: 'input_field',
depends: 'select',
rules: [
{
type: 'empty',
prompt: function() {
$('.select').on('change', function() {
if( this.value == 'Yes') {
return "Custom Validation";
}
return false;
}).trigger("change");
}
}]
}
},
onSuccess: function() {
$('.ui.dimmer').dimmer('show');
},
onFailure: function() {
event.preventDefault();
}
}
);
});
</script>
Figured out a solution for this! It might not be the best answer but it works and does what I am looking for.
<div class="ui dimmer">
<div class="ui huge text loader">Loading</div>
</div>
<form method="post" action="" class="ui form" autocomplete="on">
<div class="ui segment">
<div class="ui two fields">
<div class='field'>
<div class="ui selection dropdown">
<input type="hidden" class="selectOption" name="select">
<i class="dropdown icon"></i>
<div class="default text">Select an option</div>
<div class="menu">
<div class="item" data-value="Yes">Yes</div>
<div class="item" data-value="No">No</div>
</div>
</div>
</div>
<div class="field">
<input id="input_field" name="input_field" type="text"/>
</div>
</div>
</div>
<button id="submit" class="ui green button" name="submit" type="submit">Submit</button>
</form>
<script>
$('.ui.form').form({
keyboardShortcuts: false,
on: 'blur',
inline: 'true',
fields: {
selectOption: {
identifier: 'select',
rules: [
{
type: 'empty',
prompt: 'Please select an option'
}]
}
},
onSuccess: function() {
$('.ui.dimmer').dimmer('show');
},
onFailure: function() {
event.preventDefault();
}
}
);
$('.selectOption').on('change', function() {
if ( this.value == 'Yes' ) {
$('.ui.form').form('add rule', 'input_field', ['empty', 'integer']);
$('.ui.form').form('add prompt', 'input_field', 'Enter an integer');
}
if ( this.value == 'No' ) {
$('.ui.form').form('remove prompt', 'input_field');
$('.ui.form').form('remove rule', 'input_field');
}
}).trigger("change");
});
</script>
I was able to implement the validation rule by extending Semantic UI setting rules.
See below example:
$.fn.form.settings.rules.dependsOnFieldValue = function (value, dependFieldValue) {
var identifier = dependFieldValue.split('[')[0];
var dependValue = dependFieldValue.match(/\[(.*)\]/i)[1];
if( $('[data-validate="'+ identifier +'"]').length > 0 ) {
matchingValue = $('[data-validate="'+ identifier +'"]').val();
}
else if($('#' + identifier).length > 0) {
matchingValue = $('#' + identifier).val();
}
else if($('[name="' + identifier +'"]').length > 0) {
matchingValue = $('[name="' + identifier + '"]').val();
}
else if( $('[name="' + identifier +'[]"]').length > 0 ) {
matchingValue = $('[name="' + identifier +'[]"]');
}
return (matchingValue !== undefined)
? !( dependValue.toString() === matchingValue.toString() && value === '')
: false
;
};
Then in the form validation initializer you will pass the desired values as below:
$(".ui.form").form({
fields: {
select: {
identifier: 'select',
rules : [
{
type : 'empty'
}
]
},
input_field: {
identifier : 'input_field',
rules : [
{
type : 'dependsOnFieldValue[select[Yes]]',
}
]
},
...
}
});
Notice that we pass the <select> identifier (in this case also called select) within the first [] and then the value that we want to see to make the input_field mandatory ("Yes" in this case).
i have to get data from externaljson url api in yii2 framework,json url is:https://next.json-generator.com/api/json/get/EympRaB4D
<p>
<input type="button" value="Fill SELECT Dropdown List with JSON" id="bt" />
</p>
<select id="sel">
<option value="">-- Select --</option>
</select>
<p id="msg"></p>
<script>
$(document).ready(function () {
$('#bt').click(function () {
var url = "https://next.json-generator.com/api/json/get/EympRaB4D";
$.getJSON(url, function (data) {
$.each(data, function (index, value) {
// APPEND OR INSERT DATA TO SELECT ELEMENT.
$('#sel').append('<option value="' + value.company + '">' + value.country + '</option>');
});
});
});
// SHOW SELECTED VALUE.
$('#sel').change(function () {
$('#msg').text('Selected Item: ' + this.options[this.selectedIndex].text);
});
});
$(document).ready(function () {
$('#bt').click(function () {
$.ajax({
url: "https://next.json-generator.com/api/json/get/EympRaB4D",
type: "GET",
success: function (result) {
//console.log(result);
for(var dataSet in result){
$("#sel").append("<option value="+result[dataSet].company+">"+result[dataSet].country+"</option>");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
// SHOW SELECTED VALUE.
$('#sel').change(function () {
$('#msg').text('Selected Item: ' + this.options[this.selectedIndex].text);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>
<input type="button" value="Fill SELECT Dropdown List with JSON" id="bt" />
</p>
<select id="sel">
<option value="">-- Select --</option>
</select>
<label id="msg"></label>
</body>
</html>
I have one jquery ui autocomplete input that I would like to show another dropdown after another. For example : If I type two characters of the city name like ba, it would display a dropdown contained : Addis Ababa, Baghdad, Baku, Bamako and Bangkok. If I pick one of them (Bangkok) and press a spacebar, another dropdown (at the same input box) would be displayed : Bangkok Accommodation, Bangkok Restaurants, Bangkok Sights, and Bangkok Transport. I can do this but only for the first time. When I change the keyword like ab. it should display Abu Dhabi, Abuja, etc but the dropdown fail to be displayed. Here is the script :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
}
});
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
</div>
</body>
</html>
I dont want to use another input box for this.
http://jsfiddle.net/Lngzbjc6/5/
After many trying, I got the solution (I dont know if this is the best). Here is the full code.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
}
});
}
});
$('#dest').keypress(function(event){
var dest = $.trim($('#dest').val());
var temp_val = $.trim($('#temp_val').val());
if(temp_val != ''){
if(event.which != 32)
$('#dest').autocomplete('option','source',Cities);
else{
var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
var found_arr='';
$.each(arr,function(index,value){
if(temp_val.indexOf(value) >= 0){
found_arr=value;
return false;
}
});
if(found_arr != '')
temp_val=temp_val.replace(found_arr,'');
var more=[
temp_val + ' Accommodation',
temp_val + ' Restaurants',
temp_val + ' Sights',
temp_val + ' Transport'
];
$('#dest').autocomplete('option','source',more);
}
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
<input type="hidden" id="temp_val" name="temp_val" value="">
</div>
</body>
</html>
I replicated the Developer's example code with success. When i insert a div into the form it fails. How can i submit 'form div input' to a server side function?
* i believe divs and spans are allowed inside forms from here.
* uncommenting the divs causes the div 'output' not to update.
html:
<form id="myForm">
<!--><div>-->
<input name="myEmail" type="text" />
<input type="submit" value="Submit"
onclick="google.script.run.withSuccessHandler(updateEmail)
.processForm(this.parentNode)" />
<!--></div>-->
</form>
<div id="output">
</div>
<script>
function updateEmail(response) {
var div = document.getElementById("output");
div.innerHTML = "<p>" + response + "</p>";
}
</script>
code.gs
function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('Web App').setSandboxMode(HtmlService
.SandboxMode.NATIVE);
return html;
}
function processForm(formObject) {
var response = "";
response = formObject.myEmail;
return response;
};
Edit:
changed:
<input type="button" value="Submit"
to:
<input type="submit" value="Submit"
I changed the HTML file to this:
<form id="myForm">
<div>
<input name="myEmail" type="text" />
<input type="button" value="Submit"
onclick="processFormJs(this.parentNode)" />
</div>
</form>
<div id="output"></div>
<script>
window.processFormJs = function(argDivParent) {
console.log('argDivParent: ' + argDivParent);
google.script.run.withSuccessHandler(updateEmail)
.processForm(argDivParent)
};
function updateEmail(response) {
var div = document.getElementById("output");
div.innerHTML = "<p>" + response + "</p>";
}
</script>
And added a console.log('argDivParent: ' + argDivParent); statement. Then in developer tools, show the console. I get this error:
argDivParent: [domado object HTMLDivElement DIV]
Failed due to illegal value in property: 0
this.ParentNode is referring to the DIV and not the FORM. If I take out the DIV, the object returned is:
argDivParent: [domado object HTMLFormElement FORM]
Not:
argDivParent: [domado object HTMLDivElement DIV]
A DIV probably doesn't automatically put INPUT values into it's parent object.
This code does work with a DIV:
<form id="myForm" onsubmit="processFormJs(this)">
<div>
<input name="myEmail" type="text" />
<input type="button" value="Submit"/>
</div>
</form>
<div id="output"></div>
<script>
window.processFormJs = function(argDivParent) {
console.log('argDivParent: ' + argDivParent);
google.script.run.withSuccessHandler(updateEmail)
.processForm(argDivParent)
};
function updateEmail(response) {
var div = document.getElementById("output");
div.innerHTML = "<p>" + response + "</p>";
}
</script>
For debugging, you can use Logger.log("your text here"); then view the Logs.
function processForm(formObject) {
Logger.log('processForm ran: ' + formObject);
var response = "";
response = formObject.myEmail;
Logger.log('response: ' + response);
return response;
};
I want to send a POST (not GET) request to the server with ember.js. I don't know which function I need at "which function here", but I want to send it to the server for a login request.
App.LoginController = Ember.ObjectController.extend({
actions: {
userLogin: function(user) {
// which function here?
?? ("http://siteurl/api/authentication/login/&username=" + user.username + "&password=" + user.password + "");
this.transitionTo('cat');
},
cancelLogin: function() {
this.transitionTo('menu');
}
}
});
App.UserFormComponent = Ember.Component.extend({
actions: {
submit: function() {
this.sendAction('submit', {
username: this.get('username'),
password: this.get('password')
});
},
cancel: function() {
this.sendAction('cancel');
}
}
});
down here template code
<script type="text/x-handlebars" data-template-name="login">
<header class="bar bar-nav">
<h1 class="title">inloggen</h1>
{{#link-to 'menu' class="icon icon icon-bars pull-right"}}{{/link-to}}
</header>
<!-- SHOW LOADER -->
<div class="content">
<div class="content-padded">
{{user-form submit="userLogin" cancel="cancelLogin" submitTitle="login"}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="components/user-form">
<form {{action "submit" on="submit"}}>
<p><label>gebruikersnaam {{input type="text" value=username}}</label></p>
<p><label>wachtwoord {{input type="password" value=password}}</label></p>
<input type="submit" class="btn btn-primary btn-block" {{bindAttr value=submitTitle}}>
<button class="btn btn-negative btn-block" {{action "cancel"}}>Cancel</button>
</form>
</script>
Ember doesn't have any built in communication layer, you can use jquery for such calls.
App.LoginController = Ember.ObjectController.extend({
actions: {
userLogin: function(user) {
$.ajax({
type: "POST",
url: "http://siteurl/api/authentication/login/&username=" + user.username + "&password=" + user.password,
data: { name: "John", location: "Boston" }
})
this.transitionTo('cat');
},
cancelLogin: function() {
this.transitionTo('menu');
}
}
});