I have the following code
<td>Click here</td>
<td>Click here</td>
<td>Click here</td>
<td>Click here</td>
#dialog_link is generated dynamically.
in my js I need to know which was clicked.
this is my js
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
$.ajax({
url: "teams/pp",
type: "POST",
data:
success: function( data ){
console.log(data);
}
});
return false;
});
Use id^ instead of id*, id^ used to indicate that the id beginning with the given text and id* matches if the given text is available in the id, anywhere even at last like id1-dialog_link:
$("td a[id^='dialog_link']").click(function(){
var id = $(this).prop('id');
console.log(id);
});
Here a[id^='dialog_link'] will match dialog_link-19 but not id1-dialog_link.
You can get the id of the one which was clicked liek this:
$('a[id*=dialog_link]').click(function(){
var id = $(this).attr('id');
console.log(id);
});
This should return the number of the link clicked:
$('a[id*=dialog_link]').click(function() {
var id = $(this).attr('id').replace('dialog_link-','');
alert(id);
});
Demo
I have used the .replace() function to remove the text
Related
i have this dialog to show the file name when you click on the icon. When i first click it the dialog will be empty then i close it and reopen the dialog will show the name (via ajax). Then when i close the dialog again and click on a different file icon its showing the first file name. then when i close it again and reopen it, it will show the correct filename. Why is it doing this?
Here is my javascript
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
success: function(result){
filename = result;
}
});
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+filename+'"/>');
});
i worked out what i did wrong, i was calling the dialog before i got the ajax response
here is the correct javascript incase this happens to you
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
cache: false,
success: function(result){
filename = result;
}
});
$.post( "ajax/edit_filename.php", { auth:auth })
.done(function( data ) {
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+data+'"/>');
});
});
Pretty new to ajax.
So I have this div:
<div id="authentication" title="Authentication" >
<b>Please Generate a new token to continue!</b>
<br /><br />
<table>
<tr>
<td>Token:</td>
<td><input type="text" id="txtToken"/></td>
</tr>
<tr>
<td></td>
<td><label id="lblError"></label></td>
</tr>
</table>
</div>
which is not being displayed on my mvc view because it is a being used as a dialogue box by Ajax code below:
$('#authentication').dialog({
autoOpen: true,
width:500,
resizable: false,
beforeclose : function() { return false; },
title: 'Authentication',
modal: true,
buttons: {
"Cancel": function () {
window.location.replace("#Url.Action("Index", "Home")");
},
"Submit": function () {
var token=$('#txtToken').val();
var dlg = $(this);
$.ajax({
type: 'POST',
data: { 'token': token},
dataType: 'json',
url: '#Url.Action("CheckNewToken", "Account")',
success: function (result) {
if(result==true)
{
window.parent.jQuery('#authentication').dialog('destroy');
}
else{
$('#lblError').html("Incorrect credentials. Please try again");
}
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
}
}
});
However when the codes goes to success and result == result, the dialog box is destroyed but the div (dialog box) is then being displayed on my view which I don't want. What am I doing wrong?
Close the dialog and then destroy. This will hide the dialog completely and then destroy its dialog features. if you just do .dialog('destroy') it will just remove the dialog functionality completely and display the element as is on the page but it wont hide.
success: function (result) {
if(result==true)
{
$('#authentication').dialog('close').dialog('destroy');
}
else{
$('#lblError').html("Incorrect credentials. Please try again");
}
},
Another thing is beforeclose : function() { return false; }, you are returning false which will prevent the close event from happening. it should be beforeClose though you can remove it safely.
if the above doesnt work another option to remove the div is by subscribing to close event:-
$('#authentication').dialog({
autoOpen: true,
width:500,
resizable: false,
title: 'Authentication',
modal: true,
close:function(){
$(this).dialog('destroy').hide();
},
buttons: {
"Cancel": function () {
},
"Submit": function () {
var token=$('#txtToken').val();
var dlg = $(this);
$('#authentication').dialog('close');
}
}
});
I am deleting a record using PHP. I want to use a JQuery UI dialog to confirm the action, but I dont know how to pass a variable (my RecordID) to the redirect URL function, or allow the URL to access window.location.href.
$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
'OK': function() {
window.location.href = 'url and myvar??';
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#confirm").dialog( "open" ).html ( "Are U Sure?" );
return false;
});
HTML
<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>
Is there a good way to do this?
You can try using the .data() method to store data for you. Take a look at this answer
Passing data to a jQuery UI Dialog
For example to pass a variable, you can store it using the data function, before opening the dialog
$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");
Then you can get this back by:
var my_data = $("#dialog_div").data('param_1')
You want to change the configuration of the dialog on click (in this case, the behaviour of the Ok button). For that your have many solutions all of them ugly (imo). I would advice generating a dialog on the fly, and destroying it once it has been used, something like this:
$("#delete").click(function(ev) {
ev.preventDefault(); // preventDefault should suffice, no return false
var href = $(this).attr("href");
var dialog = $("<div>Are you sure?</div>");
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
window.location = href;
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
});
Or even better, encapsulate the confirm dialog into a function so that you can reuse it, like so:
function confirmDialog(msg) {
var dialog = $("<div>"+msg+"</div>");
var def = $.Deferred();
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
def.resolve();
$( this ).dialog( "close" );
},
'Cancel': function() {
def.reject();
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
return def.promise();
}
And then use it like so
confirmDialog("are your sure?").done(function() {
window.location = $(this).attr("href");
}).fail(function() {
// cry a little
});
You may have to check if the deferred object has been rejected or resolved before you close the dialog, to ensure the confirm rejects on close (and not just on pressing the 'Cancel' button). This can be done with a def.state() === "pending" conditional.
For more information on jquery deferred: http://api.jquery.com/category/deferred-object/
Deleting actions probably shouldn't be done using a GET, but if you wanted to do it that way I would recommend using the $.data in jQuery so each link had a data-record-id attribute. Then on click of one of the links, it pops up the dialog and when confirmed it adds that to the URL, and redirects.
Example:
$(function(){
$(".deleteLink").click(function(){
var id = $(this).data("record-id");
var myHref = $(this).attr('href');
$("#confirmDialog").dialog({
buttons:{
"Yes": function()
{
window.location.href = myHref + id;
}
}
});
});
});
<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
<p>Are you sure?</p>
</div>
HTML
<a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>
JS
$('.confirmation-dialog').confirm({
buttons: {
Yes: function(){
console.log(this.$target.attr('data-mydata'));
No: function(){
}
}
});
Hi I have a JQuery Ui (jquery-ui-1.8.13.custom.min.js) inside a Dialog. When I start typing on the box I get the dropdown of items but it hides right away? Does anyone know why? Here is my code:
$(".openDialog").live("click", function (e) {
e.preventDefault();
var itemId = $(this).attr("data-item-id");
var ajaxurl = $(this).attr('data-ajax-refresh-url');
var dialogId = $(this).attr("data-dialog-id");
$('<div><img src="Content/images/spinner.gif" /> Loading...</div>')
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
width: 'auto',
title: $(this).attr("data-dialog-title"),
buttons: {
"Save": function () {
$(this).find('form').submit();
},
close: function () {
if (typeof itemId != "undefined") {
$.get(ajaxurl, { id: itemId },
function (data) {
// The data returned is a table <tr>
$("#Row" + itemId).replaceWith(data);
});
bindConfirm();
}
$(this).remove();
}
},
modal: true
}).load(this.href, function () {
$(this).find("input[data-autocomplete]").autocomplete({ source: $(this).find("input[data-autocomplete]").attr("data-autocomplete") });
});
});
They also had problems in early 1.8 releases. I remember applying a custom CSS selector to increase zIndex manually.
See also: http://forum.jquery.com/topic/autocomplete-inside-a-dialog-1-8rc2
On my site I've a button that when is clicked open a dialog with a form already populated for send an e-mail. In this form I have a button called "invia" to send mail, the mail are sent correctly, what does not work it is closeing dialog after send e-mail. Here attacched my code:
Thanks in advance for help.
$("#invio_mail").live("click", function() {
if (m=="") //that's to prevent multiple dialog opening
{
$.post("./php/testo_mail_xml.php",
{contratto:contratto, piatta:piatta, testo:"stampa_login"},
function(xml)
{
if ($(xml).find("status").text()==1)
{
$("#ris_dial").load("./schemi/sch_mail.htm");
delay( function() { //that's a function for delay population
scorriDati(xml, "forMail"); //that's function for populate
}, 500);
var dm = {
modal: true,
height: 'auto',
width: 'auto',
title: "<span class='ui-icon ui-icon-info'></span> Invio Mail",
closeOnEscape: false,
buttons: {"Invia": function() {
$.post("./php/mail.php",
{dati:$("#forMail").serialize()},
function(xml)
{
if ($(xml).find("status").text()==1)
{
//var opt={close:true};
//$("#ris_dial").dialog(opt);
$(this).dialog("close"); //this is not wrking code
}
else
$(this).append($(xml).find("errore").text());
},"xml"
);
}
}
};
$("#ris_dial").dialog(dm);
}
else
{
$("#ris_dial").empty().append($(xml).find("errore").text());
$("#ris_dial").dialog(dialogError);
}
},
"xml"
);
m++;
}
});
the context of this changes inside of $.post()
save this before you call post:
var $this = $(this);
and change your call to close to be:
$this.dialog("close")