I have created two hyper links with Create User and Batch
If one hyper clicked a pop up is being opened , and at the same time when other hyper link (Batch ) should not be opened
(Currently both are being opened )
Please tell me how to resolve this ??
please see my code :
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openDialog()'>Create User</a> <span>|</span><a href='javascript:openFileDialog()'>Batch </a>"
}
function openDialog() {
dojo.byId('create_links').disabled=true;
$("#create_links").addClass("disabled");
// some code
}
The other hyper link code is
function openFileDialog() {
$("#fileuploadfun").attr('title',"Batch");
$( "#fileuploadfun" ).dialog({ position: 'center' , zIndex: 0, width: 500, show: 'slide', resizable:'false' });
}
Currently the Dialog bOxes are created in this way :(This is for Batch)
$("#fileuploadfun").attr('title',"Batch ");
$( "#fileuploadfun" ).dialog({ position: 'center' , zIndex: 0, width: 500, show: 'slide', resizable:'false' });
And the User dialog is created this way :
$( "#createUserDialog" ).dialog( "option", "title", 'Create User' );
$( "#createUserDialog" ).dialog("open");
The links cannot be disabled by just any attribute.The way to disable any link is by simply removing the onclick or replacing the href with # or javascript:void(0) to avoid jumping to page top.
Related
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#revocation" ).dialog({
autoOpen: false,
height: 200,
width: 460,
modal: true,
buttons:{
"Yes": function() {
revocation();
},
"Close" : function() {
$( this ).dialog( "close" );
}
}
});
I want to put add processing time in this function, when I click the button "Yes", add processing time of 3-5 seconds, thank you in advance
Javascript is asynchronyous language. You can put
setTimeout(function() {revocation();},3000);
instead of
revocation();
for delay in 3000 msec
you see my picture for more ,can add function , when i click button " yes " appear 2 files "revocation" in chrome with latency time: 410ms & 309ms , there a way to add jquery make one click button 2 file to run equal not, eg: 410ms & 410ms.
Images
Hi i need to reload the parent page when close button clicked on modal dialog.
my code is:
//customer edit start
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).attr('data-id'); // data-id
$.post("sample.php",
{
name:myGroupId,
},
function(data,status){
});
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
I tried for close button as/
$( ".ui-dialog-titlebar-close" ).click(function() {
window.location.reload(true);
});
on below also tried inside.Nothing works.Can anybody help me.Thanks.
You can use native create event of dialogue to bind close button click. Like this:
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn",
create: function() {
$(this).closest('div.ui-dialog')
.find('a.ui-dialog-titlebar-close')
.click(function(e) {
window.location.reload(true);
e.preventDefault();
});}
});
Working Demo
Try to use window property , to get access to main page from iframe
top Returns the topmost browser window
can you give link to your page or example at jsbin?
Elements that are added to the DOM at runtime requires event delegation as your popup is generated using model (jQuery UI)
You can execute a click event of close button by doing this:
$(document.body).on('click','.ui-dialog-titlebar-close',function(e) {
e.preventDefault(); // To prevent default dialog close action
window.location.reload(true);
});
See the API documentation for .on()
May be this will fix. But i think close() of model popup is already defined in UI. You may prevent the default action.
Hi there StackOverflowvians!
I'm learning to Javascript and JQuery and I've got a connundrum I'm not solving very well. I've used JqueryUI tooltips on some buttons. The tooltip uses the following code to display. I realize that my structure and organizational skills with regards to code suck, and there's probably a million more efficient ways to do what I'm doing, but bear with me - This is quite literally my first attempt at any kind of javascript.
$(function() {
$("#button-menu").tooltip({
position: {
my: "top",
at: "bottom+10",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" ).addClass( "arrow" ).addClass( "top" ).appendTo( this );
}
}
});
$("#button-menu").tooltip({ hide: { effect: "fadeOut", duration: 100 }, show: { effect: "fadeIn", duration: 100 }});
});
So I'm calling a tooltip when you hover on the buttons, it's pretty and does what I want. A couple of the buttons when you click them lead to Modal Dialog windows. If one clicks a.search, one gets a modal dialog window with a search form. If one decides to simply close the modal window, it closes and whatnot. I note that when the modal is open, the tooltip closes and the state of the button returns to unfocused. When I close the Modal, the tooltip returns as if I'm hovering on the button - no matter where my mouse is positioned.
I tried to call blur on close for the button item for all buttons in the div, but to no avail. I might try setting a timeout on that function next, because somewhere the tooltip function is re-instating the aria-tooltip class after the button close event and I suppose if I can wait it out I can close it after it opens, but that feels sloppy. The code below was my interpretation of the correct way to call a dialog and close the tooltip for the button on dialog close, but it doesn't do what I think it should. The tooltip still re-appears
$(function() {
$( "#searchform" ).dialog({
modal: true,
autoOpen: false,
close: function( event, ui ) {$('a.search').blur();},
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 1000
}
});
$( "a.search" ).click(function() {
$( "#searchform" ).dialog( "open" );
});
});
edit: I suppose I should ask the question - why is this behavior happening, and is there something I can do identify how that tooltip is firing, or just stop it from reappearing when I close the modal?
The Dialog widget has an open() event. I'd be inclined to us it to disable tooltips (like so), and re-enable them on close() by naming your init function and calling it.
Something like:
$('.dialogSelector').dialog({
open: function( event, ui ) {
$('.tooltipSelector').tooltip('disable');
}
});
$('.dialogSelector').dialog({
close: function( event, ui ) {
$('.tooltipSelector').tooltip();
// OR
myTooltipFunction();
}
});
I was having the same problem. What solved it for me was adding an 'Ok' buton
$("#dialog").dialog({
resizable: false,
autoOpen: false,
height: 200,
width: 440,
modal: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
Example: this is the function i use to show a dialog
function pop_up_extra(div, titulo,h,w){
$( "#" + div ).dialog({
autoOpen: false,
show: "explode",
modal: true,
height: 'auto',
width: w,
title: titulo
});
$( "#" + div ).dialog( "open" );
$(".ui-widget-overlay").click (function () { $("#pop").dialog( "close" ); });
return false;
}
something like: http://jsfiddle.net/YcZFj/2/
how should I update the show method??
PS: please edit the title if you consider (i am spanish thinker)
How about slide effect of show options? Try this - http://jqueryui.com/demos/show/
I have the following modal dialog:
$(document).ready(function() {
$( "#addLocation" ).dialog({
modal: true,
height: 820,
width: 550,
buttons: {
"Add Location": function() {
document.forms['mapform'].submitted.value='1';
document.forms["mapform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
});
How can I toggle the 'Add Location' button? I want it to display only when a certain button within the dialog is clicked.
Thanks,
You can do it like this:
hide you add location button as soon as dialog is shown on screen. call this after the dialog open command
$("button[value='Add Location']").hide();
Then add event to the desired button that will toggle the add location button
$("buttonid or any selector").click(function(){
$("button[value='Add Location']").show();
});