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/
Related
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.
I've added a jquery UI dialog to an mvc page. After the dialog is opened I need to catch the bool values if the dialog is dismissed or confirmed.
So far I have tried to add a call back as mentioned in another answer, but I'm not sure how to pass that value back to the $('#escalation').on('click', '.delete', function (evt) so that I may perform a redirect if true.
Question:
How can I pass back a bool value to calling function from Jquery UI modal dialog?
Pseudo code:
This is my intended flow of execution for the below fuctions:
1.Call dialog open on a button click. - (working)
2.Pass back true or false depending on if the user selected 'ok' or 'cancel' in the modal dialog.
3.Close the dialog if the returned result to the button click event is false. Otherwise call window.location.href = RedirectTo; code.
Code:
Dialog markup -
<div id="dialog-confirm" title="Delete Selected Record?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This record will be permanently deleted.</p> <p>Are you sure?</p>
</div>
Jquery scripts -
<script>
var baseUri = '#Url.Content("~")';
$(document).ready(function () {
$('#escalation').DataTable({
"order": [[6, "desc"]]
});
$('#escalation').on('click', '.delete', function (evt) {
var cell = $(evt.target).closest("tr").children().first();
var EscalationID = cell.text();
var RedirectTo = baseUri + "/EscalationHistory/DeleteEscalation?EscalationID=" + EscalationID;
////open dialog
evt.preventDefault();
$("#dialog-confirm").dialog("open");
//Need to call this code if the dialog result callback equals true
window.location.href = RedirectTo;
//Otherwise do nothing..close dialog
});
//Dialog opened here, not sure how to pass back the boolean values
//to the delete click function above
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function () {
callback(true);
},
"Cancel": function () {
$(this).dialog("close");
callback(false);
}
}
});
});
</script>
Just write your target code inside button click handler or set a flag and use $(".selector").on("dialogclose", function(event, ui) {}); event handler to check the flag state.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function() {
var baseUri = "http://localost";
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 450,
open: function() {
$(this).data("state", "");
},
buttons: {
"OK": function() {
$(this).data("state", "confirmed").dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$(".btn").click(function() {
var escalationId = $(this).data("escalation-id");
var redirectTo = baseUri + "/EscalationHistory/DeleteEscalation?EscalationID=" + escalationId;
// Use "bind" instead "on" if jQuery < 1.7
$("#dialog-confirm").dialog("open").on("dialogclose", function(event, ui) {
if ($(this).data("state") == "confirmed") {
location.replace(redirectTo);
}
});
});
});
</script>
</head>
<body>
<button class="btn" data-escalation-id="123">Delete 123</button>
<button class="btn" data-escalation-id="124">Delete 124</button>
<div id="dialog-confirm" style="display:none">Are you sure?</div>
</body>
</html>
But, IMO, logically better to write the code directly in button click handler.
I have a strange problem with a delete button in a jQuery dialog box. What should happen is that once the delete button is clicked, it looks up the value of the hidden input button and sends that value to an ajax call to delete the content. So every click should only show the single id that belongs to the last clicked button.
What actually happens with the first click it that it shows the correct value. But when you then click the next button, it will first show the previous id and then the new id, so the ajax call is made twice. If you would click on a third button, it will show three ids, and make three ajax calls which is not what should happen. It should stick with a single ajax call with each click and only show the latest id.
You can see an example here http://jsfiddle.net/uF5fX/11/, with the ids shown in the console.
Any ideas on what I'm doing wrong, and how to fix this?
$("#item-list").on( "click", ".delete-item", function( e ) {
var dialogBox = $("#delete-confirmation"),
storeId = $(this).next('input[name="store_id"]').val();
console.log( 'main clicked store id = ' + storeId );
dialogBox.dialog({
width: 325,
resizable : false,
modal: true,
minHeight: 0
});
$(".ui-dialog-titlebar").remove();
dialogBox.find(".button-secondary").on( "click", function() {
dialogBox.dialog("close");
});
dialogBox.find(".button-primary").on( "click", function( elem ) {
console.log( 'click delete btn' );
console.log( 'ajax store id = ' + storeId );
dialogBox.dialog("close");
//make a singe ajax call with the last storeId
//elem.stopImmediatePropagation();
elem.stopPropagation();
elem.preventDefault();
return false;
});
e.stopPropagation();
e.preventDefault();
return false;
});
Structure of the html
<ul id="item-list">
<li>
<input type="button" value="Delete" name="text" class="delete-item" />
<input type="hidden" value="60" name="store_id" />
</li>
</ul>
Normally when multiple clicks are triggered it can be fixed with return false, or preventDefault / stopPropagation but it makes no difference here?
Every time you click 'delete-item', dialogBox buttons bind anther new event.
dialogBox.dialog({
width: 325,
resizable : false,
modal: true,
minHeight: 0
});
$(".ui-dialog-titlebar").remove();
var btn1 = dialogBox.find(".button-secondary");
var btn2 = dialogBox.find(".button-primary");
btn1.on( "click", function() {
dialogBox.dialog("close");
btn1.unbind('click');
btn2.unbind('click');
});
btn2.on( "click", function( elem ) {
console.log( 'click delete btn' );
console.log( 'ajax store id = ' + storeId );
dialogBox.dialog("close");
//make a singe ajax call with the last storeId
//elem.stopImmediatePropagation();
elem.stopPropagation();
elem.preventDefault();
btn1.unbind('click');
btn2.unbind('click');
return false;
});
A more structured way to approach this issue would be defining standard actions for your close and Cancel event of the dialog.
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
hide: { effect: "blind", duration: 1000 },
show: { effect: "blind", duration: 1000 },
height: 600,
width: 350,
modal: true,
buttons: {
Cancel: function() {
console.log('dialog cancelled');
dialog.dialog( "close" ); // trigger the close event
}
},
close: function() {
console.log('dialog closed');
var btn2 = dialog.find("#create-user"); // change the #id to the name of your button
btn2.unbind('click'); //unbind the button.
}
});
The next time you then trigger the dialog and bind the on("click") event listener, it will only be added once instead of incrementing the amount of binds.
It is then unbound every time the dialog is closed (and cancelled since it triggers the close event).
I am using JQueryUI Dialog box to show a link. I have 20 buttons with 20 different links. I wan't to pass that link so the Dialog box knows which link to open.
Here is the code:
$(function () {
$(document).ready(function () {
$('#dialog').dialog(
{
autoOpen: false,
modal: true,
open: function (event, ui) {
var id = $(this).data('aid'); // It does not work here
$(this).load("Link?id=" + id);
},
hide:
{
effect: "explode",
duration: 500
}
});
});
$('input[type=submit]').click(function () {
var id = $(this).data('aid'); // Works here. I wan't to pass this.
$("#dialog").dialog("open")
});
});
MVC/Razor:
<input type="submit" value="Show" class="button" data-aid="#Model.item.id" />
Does anyone have any suggestions on how I can accomplish this?
Prior to opening the dialog, set a data property to #dialog - which is inturn accessible as this inside the open() callback:
$("#dialog").data('aid', $(this).data('aid')).dialog("open");
Now this should work:
...
open: function (event, ui) {
var id = $(this).data('aid'); // Now it will work here
$(this).load("Link?id=" + id);
},
...
I'm trying to allow users to delete multiple records, they click a link "delete" and a dialog shows saying are you sure? On clicking OK it should delete.
It works for the first time I do it, but for any other delete buttons I click it doesn't work. I'm setting a hidden field to store some information then getting that information in the dialog.
I have identified the problem see comment in code, but not sure why its a problem.
This is for the delete buttons:
$(".delete-item").click(function () {
$(this).css('font-weight', 'bold');
var delId = $(this).attr("id");
$("#hidden-itemid").val(delId);
$("#dialog-delete-sure").dialog("open");
});
heres the dialog:
$("#dialog-delete-sure").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
var hiddenId = $("#hidden-itemid").val();//*** This comes back undefined the second time***//
var itemId = $("#hidden-itemid").val().split('-')[1];
var iType = $("#hidden-itemid").val().split('-')[0];
$.post('/User/Delete/', { id: itemId, itemType: iType }, function (json) {
if (json.success) {
$("#" + iType + "-row-" + itemId).hide('slow', function () { $("#hidden-itemid").remove(); });
$("#dialog-success-delete").dialog("open");
} else {
if (json.error == "unknown") {
$("#dialog-unknown-error").dialog("open");
}
if (json.error == "unauthenticated") {
$("#dialog-unauthenticated").dialog("open");
}
}
});
$("#hidden-itemid").css('font-weight', 'normal');
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
a typical delete button looks like this:
<a id="event-63" class="delete-item">Delete</a>
any ideas?
You are running
$("#hidden-itemid").remove();
on json.success so you remove the element from the DOM .. next time it does not exists and thus you get an error..