I need a way to reload my parent page when I close my jqUI modal window. Somehow or the other, what I am currently doing is not working (imagine that)...
$('div#addPat').live('dialogclose', function (event) {
debugger;
location.reload(true);
});
I never get to the debugger statement so I assume just assume that my event is wrong...
How do I get the close dialog event and how can I use it to reload the page... I think I have the second part figured out.
Try this:
$( "div#addPat" ).dialog({
close: function(event, ui) {
debugger;
....
}
});
REF: http://jqueryui.com/demos/dialog/#event-close
Related
Adding my bindings to the pageinit event like so:
$('#mypage').on("pageinit", function () {
$('#login-sumbit').on('click', function () {
console.log('button clicked');
});
});
I would expect pageinit to bind the click event once only. But what happens in my single page app is that the button is binding every time the page is loaded even when clicking back.
This results in undesirable multiple duplicate binds. Any ideas on what event to use to bind only once in my single page app, so that loading the page again (back button, loading inline page) in the same session doesn't re-bind?
Looks like I found the answer myself, turns out quite rightly pageinit fires every time the page is loaded even though it's not reloading from the server, otherwise what would fire when a new page is shown.
pageinit is the right event but I need to use .one not .on, .one will bind one time only.
$('#mypage').on("pageinit", function () {
$('#login-sumbit').one('click', function () {
console.log('button clicked');
});
});
Now everything works as expected. Better still I've found you can use .one with the pageinit event for even more control over your bindings and data loads perfect for my requirements.
http://api.jquery.com/one/
You could use:
$('#login-sumbit').off('click').on('click', function(e) {
console.log('button clicked');
});
I have been searching for quite some time without success. I want to detect when a particular jquery ui dialog has lost focus.
I know I can detect when it gains focus like so:
focus: function(event, ui) { console.log('focus in: '+this.id); }
However the focusout event does not get triggered in any way I've tried:
focusout: function(event, ui) { console.log('focus out: '+this.id);}
This is my (PHP echo'ed) code:
<script type=\"text/javascript\">
$(\"".$element."\").click(function(e){
$(\"#".$divname."\").load('".$url."').dialog({
title: '".$title."',
modal:".$modal.",
resizable: true,
width:'".$width."',
height:'".$height."',
show: 'clip',
hide: 'clip',
open: function(event, ui) {\$(\".ui-widget-overlay\").css({'background-image': 'url(\"../css/stripe_small.png\")','background-repeat':'repeat', 'opacity':'0.8'})},
minimize: '#toolbar',
focus: function(event, ui) { console.log('focus in: '+this.id); },
focusout: function(event, ui) { console.log('focus out: '+this.id);}});
});
</script>
<div id=\"".$divname."\"></div>";
Everything works allright, apart from the focus out detection. Is there a way to do this, or do I have to iterate all window elements to find out which has the focus ?
EDIT: Alternatively, I would like to know if I can find which UI Dialog is the one at the front.
Since nobody has answered I will give a brief answer to what I have come up with.
jQuery's blur and focusout do not seem to trigger for my dialogs:
When trying to listen for events of a dialog widget:
$(".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable").blur(function({ //NOP });
When trying to listen for events of the divname used for a dialog:
$("#divname").blur( function({ //NOP });
Do not get triggered.
Weirdly enough, focusin does work:
$("#divname").focusin( function({ console.log('focused in'); });
A hackish solution (which may be a bit heavy if there are many ui-dialogs on the page as it so happens in my case, but which works nonetheless, is to listen for click events on ui-dialogs:
$(".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable").live('click',function(){
$(this).addClass('ui-active').removeClass('ui-inactive');
});
What this does it the exact opposite: instead of trying to detect a dialog losing focus, onclick I iterate all dialogs. The one with the highest ZIndex is at the top, the rest are not (and thus have lost focus):
var topZindex = 0;
$(".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable").each( function( ){
var thisZindex = parseInt($(this).css('zIndex'), 10);
if ( thisZindex > topZindex ) topZindex = thisZindex;
});
It would be really nice if somehow a callback would trigger when the entire ui-dialog lost focus, but I can't seem to find another solution on the web, and I cannot get blur or focusout to trigger.
Is there a way to replace all click event by vclick event in jQuery mobile?
The only solution I've found so far is to register a vclick event as below
$('a').bind("vclick", function (ev) {
// Do Some stuff
ev.preventDefault();
});
The problem is that this solution doesn't prevent jQuery mobile click event to fire so clicks are triggered twice
For some reason, I got the following to work:
$('a').bind('vclick click',function(e){
e.preventDefault();
//do some stuff//
})
Without the e.preventDefault() the event fires twice. With it, it only fires once (but it does fire)
This is similar to what you stated, but may be more all encompassing.
$("#elementId").bind('vclick',function(event){
event.preventDefault();
//your code..
});
this is working properly.
I have a page that loads and after it loads, it pulls in a list of LIs to populate a news feed.
<li>quick view</li>
<li>quick view</li>
<li>quick view</li>
I'm trying to get fancy box to trigger when a user clicks on quick view but haven't had any luck. Any Ideas?
$(document).ready(function() {
$('.quickview').fancybox();
});
also tried:
$(document).ready(function() {
$('a.quickview').live('click', function() {
$(this).fancybox();
});
});
http://fancybox.net/
Thanks for any ideas...
Old question, but might be useful for future searchers.
My preferred solution is to fire fancybox manually from within the live event, eg:
$('.lightbox').live('click', function() {
$this = $(this);
$.fancybox({
height: '100%',
href: $this.attr('href'),
type: 'iframe',
width: '100%'
});
return false;
});
EDIT: From jQuery 1.7 live() is deprecated and on() should be used instead. See http://api.jquery.com/live/ for more info.
this should work after every ajax request
$(document).ajaxStop(function() {
$("#whatever").fancybox();
});
The problems is to attach fancybox into AJAX loaded element, right?
I got same problems and I found this solution.
I copy paste it here, see the original bug report for more info:
$.fn.fancybox = function(options) {
$(this)
.die('click.fb')
.live('click.fb', function(e) {
$(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
e.preventDefault();
[...]
Credit goes to jeff.gran.
Since .on is now recommended over .live, and after reading over the documentation on delegated events, here's a solution I came up with (assuming your elements have a class of 'trigger-modal'):
$(document).on('click', '.trigger-modal', function() {
// remove the class to ensure this will only run once
$(this).removeClass('trigger-modal');
// now attach fancybox and click to open it
$(this).fancybox().click();
// prevent default action
return false;
});
From my understanding of Fancybox, the call to fancybox() simple attaches the plugin to the selected element. Calling fancybox on a click event won't open anything.
I think you just need to add
$(li_element_that_you_create).fancybox();
to the code that creates the new LI elements in your list
EDIT
If you're using load, then you would do something like:
$('#ul_id_goes_here').load('source/of/news.feed', function() {
$('.quickview').fancybox();
});
When an ajax operation fails, I create a new div with the errors and then show it as a dialog. When the dialog is closed I would like to completely destroy and remove the div again. How can I do this? My code looks something like this at the moment:
$('<div>We failed</div>')
.dialog(
{
title: 'Error',
close: function(event, ui)
{
$(this).destroy().remove();
}
});
When I run this the dialog box shows up correctly, but when I close it the dialog is still visible in the html (using FireBug). What am I missing here? Something I have forgotten?
Update: Just noticed my code gives me an error in the firebug console.
$(this).destroy is not a function
Anyone able to help me out?
Update: If I do just $(this).remove() instead, the item is removed from the html. But is it completely removed from the DOM? Or do I somehow need to call that destroy function first as well?
$(this).dialog('destroy').remove()
This will destroy the dialog and then remove the div that was "hosting" the dialog completely from the DOM
Why do you want to remove it?
If it is to prevent multiple instances being created, then just use the following approach...
$('#myDialog')
.dialog(
{
title: 'Error',
close: function(event, ui)
{
$(this).dialog('close');
}
});
And when the error occurs, you would do...
$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');
$(dialogElement).empty();
$(dialogElement).remove();
this fixes it for real
This is worked for me
$('<div>We failed</div>')
.dialog(
{
title: 'Error',
close: function(event, ui)
{
$(this).dialog("close");
$(this).remove();
}
});
Cheers!
PS: I had a somewhat similar problem and the above approach solved it.
An ugly solution that works like a charm for me:
$("#mydialog").dialog(
open: function(){
$('div.ui-widget-overlay').hide();
$("div.ui-dialog").not(':first').remove();
}
});
You can do use
$(dialogElement).empty();
$(dialogElement).remove();
I use this function in all my js projects
You call it:
hideAndResetModals("#IdModalDialog")
You define if:
function hideAndResetModals(modalID)
{
$(modalID).modal('hide');
clearValidation(modalID); //You implement it if you need it. If not, you can remote this line
$(modalID).on('hidden.bs.modal', function ()
{
$(modalID).find('form').trigger('reset');
});
}