I know this topic is asked before but they were not about jqueryui. Therefore I couldn't be sure will they work on my code. I have a pop up that is called from different components. But I have to write a click function for each call. I want to convert it to ca function that I can call it. My script is:
<script type="text/javascript">
$(document).ready(function () {
$('a#popup').live('click', function (e) {
var page = $(this).attr("href")
var $dialog = $('<div id="silmeIframe"></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="500px" height="500px"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 'auto',
resizable: 'false',
width: 'auto',
title: "Silmeyi onaylıyor musunuz?",
close: function (event, ui) {
__doPostBack('<%= btnRefresh.ClientID %>', '');
}
});
$dialog.dialog('open');
e.preventDefault();
});
});
</script>
Now, I want it work like
<a onclick="NewFunctionName(parameter1,parameter2,,parameter3)">click<a/>
single handler, multiple targets attachment
$(function () {
function handler(e,param1,param2...) {
var page = $(this).attr("href")
...
$dialog.dialog('open');
e.preventDefault();
}
//write attachments
$('a#popup1').on('click',function(e){
handler(e,param1,param2...);
});
$('a#popup2').on('click',function(e){
handler(e,param1,param2...);
});
$('a#popup3').on('click',function(e){
handler(e,param1,param2...);
});
});
or single handler, multiple targets in one query
$(function () {
$('a#popup1, a#popup2, a#popup3').on('click',function (e) {
var page = $(this).attr("href")
...
$dialog.dialog('open');
e.preventDefault();
});
});
Related
I have a jQuery dialog that need to open when i click the class .currentDay, this works but only on the second click. I'm thinking that i am initializing the modal on the first click and then opening it on the second.
I have tried different stuff to make it init and open, but i just cant seem to make it work. Hopefully someone on here can give me a hand.
this is the JavaScript that i currently have.
$('.currentDay').click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
var dialog = $('<div style="display:none"></div>').appendTo('body');
dialog.load(url, {},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
autoOpen: true,
closeText: "",
width: $(window).width() - 300,
height: $(window).height() - 100,
close: function (event, ui) {
dialog.remove();
}
});
});
return false;
});
It also throws an error: Uncaught TypeError: dialog.dialog is not a function, but it is still working.
Did you try to prevent default anchor behavior?
$('.currentDay').click(function ( e ) {
e.preventDefault();
alert('test');
});
All credit to earlyer post on github: Source
Its working fine for me... please check working example
$('.currentDay').click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
var dialog = $('<div style="display:none"></div>').appendTo('body');
dialog.load(url, {},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
autoOpen: true,
closeText: "",
width: $(window).width() - 300,
height: $(window).height() - 100,
close: function (event, ui) {
dialog.remove();
}
});
});
return false;
});
#import "//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css";
#import "/resources/demos/style.css";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<button class="currentDay">BTN 1</button>
<button class="currentDay">BTN 2</button>
<button class="currentDay">BTN 3</button>
I can't seem to get a reference to the on click events of buttons in the titlebar but if they are in the regular content area of the dialog I can click them. Can anyone point me in the right direction to be able to register click events from the buttons in the title bar?
// Define the player details window dialog
var dialog = $(".graph-container").dialog({
autoOpen: false,
modal: true,
show: {
effect: "clip",
duration: 1000
},
hide: {
effect: "explode",
duration: 2000,
complete: function () {
console.log('complete');
}
},
width: modalWindow.width,
height: modalWindow.height,
resizable: false,
beforeClose: function (event, ui) {
console.log('before close function');
},
position: {
my: 'center',
at: 'center',
of: window
}
});
// Override the undocumented _title property to allow HTML in the title
// More info: http://stackoverflow.com/questions/4103964/icons-in-jquery-ui-dialog-title
dialog.data("uiDialog")._title = function (title) {
title.html(this.options.title);
};
dialog.dialog('option', 'title', '<span class="left">Stats for ' + player.PlayerName + ' - Last ' + $scope.gameFilter + ' games</span>' +
'<span class="right"><div id="dateButtonDiv">' +
'<button class="dateButton">5</button>' +
'<button class="dateButton">25</button>' +
'<button class="dateButton">100</button>' +
'</div></span>');
$(".graph-container").dialog("open");
$('.dateButton').click(function () {
var btn = this;
console.log('Date button clicked');
});
Your elements are coming dynamically into the dom so the normal click event will not work for them. you have to bind the event on the document object and delegate it to the dynamic class.
following code might work, you can try it in your case
$(document).on('click', '.dateButton' , function() {
var btn = this;
console.log('Date button clicked');
});
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);
},
...
Here's one for the jquery masters:
This works:
$(function (){
$("#<?= $gridArr['event_id'] ?> .gallery-add").each(function() {
var $dialog = $("<div></div>");
var $link = $(this).one("click", function() {
$dialog
.load($link.attr("href"))
.dialog({
modal: true,
width: 520,
height: 180,
title: $link.attr("title")
});
$link.click(function() {
$dialog.dialog("open");
return false;
});
alert('clicked');
$(document).bind('uploadDone', function(e) {
// alert("dialogCloser triggered in dialog function");
$dialog.dialog("close");
$("#<?= $gridArr['uniq'] ?>-event-path-form-submit").trigger('click');
});
return false;
});
});
});
This doesn't:
$(function (){
$("#<?= $gridArr['event_id'] ?> .gallery-add").each(function() {
var $dialog = $("<div></div>");
var $link = $(this).one("click", function() {
$dialog
.load($link.attr("href"))
.dialog({
modal: true,
width: 520,
height: 180,
title: $link.attr("title")
});
$link.click(function() {
$dialog.dialog("open");
return false;
});
// alert('clicked');
$(document).bind('uploadDone', function(e) {
// alert("dialogCloser triggered in dialog function");
$dialog.dialog("close");
$("#<?= $gridArr['uniq'] ?>-event-path-form-submit").trigger('click');
});
return false;
});
});
});
The only difference is the alert statement. Basically what I'm doing here is attaching a bunch of click event handlers to images, which bring up ajax upload forms in dialogs. The upload form dumps the images to an iframe. The iframe then triggers an the uploadDone handler which is bound to $(document), and that triggers another click event.
The only difference is the presence of the alert statement. I take that line out, and the dialog fails to close.
Please tell me I just missed a semicolon or something stupid.... otherwise I was thinking of using delay().
Thanks.
Solution:
I finally arrived at this after an evening of goofing. I wasn't able to positively determine what was going on with the alert statement, or how to manage the asynchronous execution, but this worked around it.
var $dialog = $("<div></div>");
$(function (){
$("#event_22 .gallery-add").each(function() {
var $link = $(this).one("click", function() {
$dialog
.load($link.attr("href"))
.dialog({
modal: true,
width: 520,
height: 180,
title: $link.attr("title")
}).bind('uploadDone', function() {
// alert("uploadDone triggered in dialog function");
$("#myForm-submit").trigger('click');
});
$link.click(function() {
$dialog.dialog("open");
return false;
});
return false;
});
});
});
In the success iframe,
parent.$dialog.dialog("close");
parent.$dialog.trigger( 'uploadDone' );
Thanks a lot everyone for your help. Here are the changes I made to get this working:
declared $dialog outside the function in the global scope
bound the uploadDone event listener to $dialog prior to creating $link.click()
changed id="22" to id="event_22" cause in html < 5, IDs have to start with alpha chars.
I'm not sure who's answer to accept, but I certainly appreciate all of your help.
The alert statement is most likely causing a block which gives the code above it time to complete before the code below gets executed. My guess is that without the alert it's going all the way to the return false before it gets done with the upload.
My guess is that the dialog is loading before the uploadDone event is bound. Is there a reason you're binding it inside the click event handler, rather than when you create it?
$(function (){
$("#<?= $gridArr['event_id'] ?> .gallery-add").each(function() {
var $dialog = $("<div></div>");
var $link = $(this).one("click", function() {
$dialog
.load($link.attr("href"))
.dialog({
modal: true,
width: 520,
height: 180,
title: $link.attr("title")
});
$link.click(function() {
$dialog.dialog("open");
return false;
});
return false;
});
$(document).bind('uploadDone', function(e) {
// alert("dialogCloser triggered in dialog function");
$dialog.dialog("close");
$("#<?= $gridArr['uniq'] ?>-event-path-form-submit").trigger('click');
});
});
});
It seems like this should work provided you always want all dialogs to close whenever uploadDone is broadcast. But, like David says in your question's comment... some context would be helpful
I have a page that call from ajax a form with a specific target. this form has a delete entry and for that a warning with a jQuery dialog is used. everything works great.
BUT :
After doing the change or even not doing it, when I open another form (different form by ajax call) and I call the same code below described. When It is submit the dialog the #var_blabla as a value of 1 (the value of the first dialog opened/loaded) and for that moment should be '2'.
I try to figure it out.. So my problem I guess is not for the dialog it self, since I try to load a second page without the constructor and the dialog didn't open (what should be expected).
The problem is on the button 'Submit Delete' that has an event function and it stays active over another that is created.
The site have a lot of forms and many dialogs for each form, is there a wait to unbind, or destroy completely the dialog and the buttons? Ideas please?
Thanks
simplified 1st dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('1');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
simplified 2nd dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('2');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
UPDATE:
<script type="text/javascript">
submited=false;
var toggleOpened = true;
$("#admin_retractil_1").click(function () {
if(!toggleOpened){
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=true;
}
else{
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
var toggleOpened2 = false;
$("#admin_retractil_2").click(function () {
if(!toggleOpened2){
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=true;
}
else{
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
$(document).ready(function() {
//$( "button").button();
var locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$( "#EditDataForm" ).click(function() {
if(locked){
locked = false;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-unlocked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}else{
locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}
return false; });
$( "#DelDataForm").button({ icons: { primary: "ui-icon-scissors" }});
$( "#DelDataForm" ).click(function() {
$('#dialog-confirm-del').dialog('open');
return false; });
/*abre popup de alerta de eliminar */
arrayRemove.push("dialog-confirm-del");
$("#dialog-confirm-del").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Remove Stuff': function() {
$('#sel_action_form').val('TypoDesClients_DelDef');
$('#name').val('_____');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancelar: function() {
$(this).dialog('close');
}
}
});
$( "#AcceptChanges").button({ icons: { primary: "ui-icon-check" }});
$("#form_submeter").validator({
position: 'center right',
offset: [0, 0],
message: '<div><em /></div>'
}).bind("onSuccess", function(e, els) {
var numSucceeded = els.length,
numExpected = $(this).data('validator').getInputs().length;
if (numSucceeded === numExpected) {
if(!submited){submited=true;
SubmitFormSV('form_submit', 'action/action_a.php');
return false;
}else return false;
}
});
$( "#radio" ).buttonset();
$("#1_radio").click(function () {
$("#tr_1").show();
});
$("#2_radio").click(function () {
$("#tr_1").hide();
});
});
local lib:
function SubmitFormSV(formul, address)
{
DoChecks();
$("#loading").show("slow");
$.post(baseURL + address, $('#' + formul).serialize(), function(html){
$('#content').slideUp("slow", function () {
AjaxChargePage(html, true);
});
});
$("#loading").hide("slow");
return false;
}
next the next chuck of javascript is similar to this one.
and with this work because destroy didn't:
DoChecks() As:
$.each(arrayRemove, function() {
var element = arrayRemove.pop();
$('#'+element).remove();
});
When you're done with dialog 1 try...
$("#dialog-confirm-elimina").dialog("destroy");
or in your Cancel function...
$(this).dialog("destroy");
The .dialog command creates a new dialog on the element selected. You're doing this twice, and thus having problems. Once the dialog is created it can be reused using open and close methods or destroyed as I've shown above and then recreated.
Ok, then finally I got a solution that make everything works. Instead of using the
$("#dialog-confirm-elimina").dialog("destroy");
I use:
$("#dialog-confirm-elimina").remove();
I still don't know the reason but clearly don't have the problem anymore.
Thanks for the answer though.
PS: If anyone know how could this append I appreciate to illuminate me about it.Thanks