We Keep Coding

Update text field value each time

Hi I am using a jquery dialog box and in that I need to have some text field with required data.
This dialog box opens when we click a button which then contains 4 input text fields and these input has to be auto complete based on the data
of button which is clicked.
Here I created a code that have one text field and it value is getting from valueofText which is updated each time on click. I have also used
console to check whether value is updating or not.
My code is
valueofText = row //changes every time
var $dialog = $('<div></div>')
.html('<form>Enter email address <input id=emailAddresss type="text"></form>')
.dialog({
autoOpen: false,
modal: true,
height: 300,
width: 500,
draggable: false,
title: "Some title",
open: function (event, ui) {
// $("#emailAddresss").val(valueofText);
console.log("id is "+valueofText);
document.getElementById('emailAddresss').value = valueofText;
$(this).css('overflow', 'hidden');
}
});
$("#emailAddresss").val('');
$dialog.dialog('open');
My problem is it updates only once then if we open modal window again it does not show any value. What is wrong am I doing here?

You should get the emailAdresss child of current dialog, like:
$(this).find('#emailAddresss').val(valueofText);
See following example, where I've created 4 dialogs:
var html = '<form>Enter email address <input id="emailAddresss" type="text"></form>';
function openDialog(valueofText){
var $dialog = $('<div></div>')
.html(html)
.dialog({
autoOpen: false,
modal: true,
height: 200,
width: 250,
draggable: false,
title: "Some title",
open: function (event, ui) {
console.log("id is "+valueofText);
$(this).find('#emailAddresss')
.val(valueofText);
$(this).css('overflow', 'hidden');
}
});
$dialog.dialog('open');
}
for(valueofText=1; valueofText<5; valueofText++){
openDialog(valueofText);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

I think your creating the dialog on every click with out deleting the old one. This means the value will be changed for the first crated dialog (since emailAddresss is an id) which is closed, but you are opening a new created dialog.
If I'm right you have 2 choices:
Delete an old dialog before creating new.
Create dialog with an id var $dialog = $('<div id="myDialog"></div>') and before creating a new one remove it $('#dialog').remove();
Create a dialog only once on page load (even better put it as html) and on click only change emailAddress input and open the dialog.

jquery dialog widget not passing my form value

i have table like image bellow where i create from query to databases, each row have button when onclick will be prompt dialog box (i use jquery dialog widget)
this myform html code
<form action="prodi_tampil_mhs.php" method="post" name="form_tambah_cl_wisudawan" id="form_tambah_cl_wisudawan">
this my php code where i create the table from query database
while ($fetch_dbsi_mhsw=mysql_fetch_array($query_dbsi_mhsw)) {
$no++;
echo" <tr>
<td>$no</td>
<td>$fetch_dbsi_mhsw[NIM]</td>
<td>$fetch_dbsi_mhsw[Name]</td>
<td style=\"text-align: center;\"><input name=\"bt_tambah_calon_wisudawan\" id=\"bt_tambah_calon_wisudawan\" type=\"image\" src=\"buttonTambah.png\" alt=\"Tambah\" align=\"middle\" width=\"20\" height=\"20\" class=\"bt_tambah_calon_wisudawan\" /></td></tr>";}
and my jquery code
$(document).ready(function(){
$(".bt_tambah_calon_wisudawan").click(function(){
var value1 = $(this).closest('tr').find('td:eq(1)').text();
var value2 = $(this).closest('tr').find('td:eq(2)').text();
// Here's the text of the dialog box
var dialog = $("<div style='display: none'><p>Anda akan menambahkan "+value1 + " " + value2 + " sebagai calon wisudawan?</p></div>").appendTo("body");
// This is the button on the form
var form = $("#form_tambah_cl_wisudawan")
// The form button was pressed - open the dialog
$(dialog).dialog({
title: "Konvirmasi Penambahan Data",
dialogClass: "no-close",
width: 600,
modal: true,
buttons: {
"Tambah": function () {
// This will invoke the form's action - putatively deleting the resources on the server
$(form).submit();
$(this).dialog("close");
},
"Cancel": function() {
// Don't invoke the action, just close the dialog
$(this).dialog("close");
}
}
});
return false;
});
});
my dialog box appear (like image 2)
when i click button "tambah" in dialog box my value in form not passing. any mistake in my jquery code? any help?

replace $(form).submit(); with form.submit(); as you have already stored selector $("#form_tambah_cl_wisudawan") to var form.

If you just refer the form by id selector and submit() the form , then the operation goes as expected.
JS CODE :
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Yes": function () {
$('#form_tambah_cl_wisudawan').submit();
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
callback(false);
}
}
});
Live Demo # JSFiddle:http://jsfiddle.net/vvjj8/7506/

How to call callback function of jquery html() method

Below is my jquery code which do following thing:
Load the content form URL and fill into DIV.
Bind the data into html form.
Problem: first time, it bind correct data and after each call, it just load the empty form (and data not populated which called through BindForm function as shown below.)
When I tried replace - tag.html with $("#div").load(url,function(){}) then it works but, using below code not work.
Now, I can not change implementation to use load but, any alternative or solution in below code will helpful.
Basically, I need $("<div id=" + diaolgID + "></div>") line to preserve as it is and then load dialog within this.
var tag = $("<div id=" + diaolgID + "></div>");
$.ajax({
url: url,
cache: false,
success: function(data) {
var htmlContainerObject = tag.html(data);
htmlContainerObject.dialog({
modal: true,
hide: {
effect: "none",
duration: 150
},
show: {
effect: "none",
duration: 150
},
title: title,
width: 950,
height: 'auto'
}).dialog('open');
BindForm();
}
});

Change your first line to this:
var tag = $('<div id="' + diaolgID + '"></div>').appendTo('body');

find a element in jQuery dialog after it opens

I'm creating a dialog on the fly. What I'm trying to do next is to bind some of the inputs with .datepicker(), but I can't seem to find the inputs at all. What I'm I missing here?
JSFIDDLE
function createDialog(top, dialog_width, data) {
$('<div></div>')
.addClass('add-dialog')
.appendTo('body')
.dialog({
title: 'test',
closeText: '<i class="fa fa-times"></i>',
close: function () {
$(this).remove();
},
open: function (event, ui) {
//has the full html with the inputs
console.log(this);
//trying to get them
var inputs = $(this).find('input');
console.log(inputs.length);
//also tried this, no luck
//$(this).parent().promise().done(function() {
// var t = $(this).find('input');
//});
},
modal: true,
width: dialog_width,
position: ['center', (top - 12)],
draggable: false,
resizable: false
}).html(data);
}

Simply change the initialization order.... add the html, then initialize the dialog
$('<div></div>').html(data).dialog({ /*opts*/})
You are adding the html after the dialog is initialized so the open event has already occurred and there is no element yet to be found
DEMO

You can asign a class to each element you need, something like:
<input type='text' class='needIt'/>
and then use:
$(this).find('.needIt')

You need to save reference to the jquery object after it has been inserted into DOM, then get reference to jquery UI dialog instance. And this instance has many useful properties. Example:
$('form').append($body); // I've appended dialog as last element inside form in my document, $body is markup, received from AJAX
$body.dialog({...}); // I've turned markup into jquery UI dialog
var dialogInstance = $body.dialog('instance'); // I receive reference to jquery UI dialog instance in any place, for instance, button click event
dialogInstance.uiDialogButtonPane.hide(); // I can access button pane in the dialog and many other objects, like caption area, etc.

try this add html after appendTo()
function createDialog(top, dialog_width, data) {
$('<div></div>')
.addClass('add-dialog')
.html(data)// added html here
.appendTo('body')
.dialog({
title: 'test',
closeText: '<i class="fa fa-times"></i>',
close: function () {
$(this).remove();
},
open: function (event, ui) {
//has the full html with the inputs
console.log(this);
//trying to get them
var inputs = $(this).find('input');
console.log(inputs.length);
//also tried this, no luck
//$(this).parent().promise().done(function() {
// var t = $(this).find('input');
//});
},
modal: true,
width: dialog_width,
position: ['center', (top - 12)],
draggable: false,
resizable: false
});
}

jqgrid - How to show edit form, when click on row?

I need to show an edit form when clicking on a row or when clicking on my custom button.
I can get the id of the row which was clicked, but how do I show the form and edit this row?

Use jQuery("#grid_id").jqGrid('editGridRow', rowid, properties );
For more detail see JQGrid Form Editing

Normally i will use a dialog to show the form. Here is the sample code, see whether meet your requirement or not
$('#button').click(function () {
showDialog("Your URL ",'TITLE', 400, 320);
});
function showDialog(url, title, iwidth, iheight) {
var dialog = $('<div id="divpopup"><iframe id="iframedit" src="' + url + '" style="width:' + iwidth + 'px;height:' + iheight + 'px;" frameborder="0" ></iframe></div>').appendTo('body');
//dialog.remove();
dialog.dialog({
title: title,
autoResize: true,
height: 'auto',
width: 'auto',
modal: true,
position: 'center',
draggable: true,
open: function (type, data) { },
close: function (type, data) { }
})
);
}