I have the following javascript:
$('#ge-display').click(function (event) {
window.open('/googleearth/ge-display.php','','scrollbars=yes,menubar=no,height=650,width=1000,resizable=yes,toolbar=yes,location=no,status=no');
event.stopPropagation();
return false;
});
the element with id 'ge-display' is a standard link:
Load Google Earth Plugin (in a new window)
The problem is - when I take out the 'return false;' line from the click event handler, the javascript popup opens, and then another browser window opens - I thought stopPropagation() would prevent the links own click handler?
I've also tried stopImmediatePropagation() - but I still need to return false to stop the default behaviour of the link.
Calling event.stopPropagation() will prevent other Javascript event handlers from handling that event. It will not prevent the browser's default action.
You need to call event.preventDefault().
Related
I am trying to show a loading animation / spinner on every Ajax request
my application.js
$(document).on("turbolinks:load", function() {
window.addAjaxLoaderHandler();
});
window.addAjaxLoaderHandler = function() {
$(document).on('ajax:send', function() {
$('#ajax-loader').show();
});
$(document).on('ajax:complete', function(){
setTimeout(() => {$('#ajax-loader').hide();}, 100);
});
}
This works perfectly, UNTIL I load a remote form by AJAX. If I submit that newly loaded form the ajax:send fires, but after completion (without any errors) the ajax:complete does not (the spinner will not be hidden).
The problem seems to be that I remove the loaded form with the ajax call.
What can I do to make this work?
I am just trying to click a link, load a form and remove the form after sending its information.
UPDATE
My application.html.haml (I use HAML so syntax is accordingly, so #... means <div id="...">#all indented code lines#</div>)
#main
= yield
#ajax-loader
The form will be loaded like:
$('#main').append('<%= j(render(:partial => 'new', :locals => {:model => #model})) %>');
The problem is that #ajax-loader is not hidden and still shows after form is submitted.
I think the problem is, that I remove the AJAX-call triggering element. But I was hoping, that since I bound the listener to document, that it still triggers.
Of course in this case I just can do $('#ajax-loader').hide();, but I am trying to understand why ajax:complete is not fired.
I guess you answered your own question: the problem is that when you remove the form, so does the event listener.
You can check what event listeners still apply to your document object using
getEventListeners(document). Try this on your console* after the spinner is fired and refuses to hide.
*edit: this is a Google Chrome function, might not work in other browsers, though most of them have ways to inspect the listeners on a node
I think of these workarounds:
a) Rebinding the listeners everytime you remove a form;
b) Attaching the listener to the window object instead of document
c) If you are using jQuery Ajax you could use the beforeSend and complete properties to show and hide the spinner instead of events. If it's not jQuery Ajax there's probably a similar way to achieve the same behavior.
I am trying to install the following: http://red-team-design.com/simple-and-effective-dropdown-login-box/
When I hover over it, the color changes. The CSS is shown when I click inspect element.
But when I click on the login tab, it does not open.
What am I doing wrong? How can I find out what I am doing wrong?
I have created a file called custom.js and embedded it.
I am using the Laravel framework.
I'm typing this out of my head, but it seems that the default anchor tag event is not discarded (on #login-trigger). You can either pass the event as a variable to the triggered function and call e.preventDefault(); or call return false; at the end of this function.
$(document).ready(function(e){
$('#login-trigger').click(function(e){ //add this
e.preventDefault(); //add this
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
I have the following code. As You can see I have tried most of the common methods for preventing it from opening.
I'm doing this because in the panelbeforeopen I would like to check to see if the user is logged in and then only show the panel if they are.
$(document).on('panelbeforeopen', '#right_panel', function(event){
event.preventDefault();
alert('test');
return false;
event.stopImmediatePropagation();
});
In the end I had to bind an event handler to the button that was responsible for opening the panel.
One note is that the code that will link an a tag automatically to a panel sets up its event handler as a click event not a tap event. It also for what ever reason will not work if you use .on to bind your click event handler. You must bind it like normal.
See js fiddle here
$('.footer .right_panel').on('click', function (event) {
alert('test');
event.stopPropagation();
});
So I've decided to use the jQuery Mobile framework to build my new mobile website. It has this feature of loading any local href link by ajax, which is great. But the new page that loads doesn't respond to any of the javascript. I've got a home page and page 2, both of which have the same html layout which a few changes in the content, I'll give an example.
I have made a navigation menu that slides in from the left and pushes the main content to the right. When I click on a page link, it loads the new page through ajax, but then on the new page, if I click the menu button, jQuery doesn't pick this up and so nothing happens (the menu doesnt slide out).
$(document).ready(function() {
$( ".menu-trigger" ).click(function() {
console.log("1")
if ($( 'nav' ).hasClass('navTransform')) {
console.log("2")
$( 'nav' ).removeClass('navTransform');
$( 'article' ).removeClass('articleTransform');
}
else {
console.log("3")
$( 'nav' ).addClass('navTransform');
$( 'article' ).addClass('articleTransform');
}
});
});
This jQuery script is in a seperate .js file thats included in the header of both the pages. I know the script works normally because when i refresh the page, the menu trigger works. Is there a known work around for this?
The workaround for this is to use appropriate jQM handler pageinit() instead of jQuery ready handler.
pageinit = DOM ready
One of the first things people learn in jQuery is to use the
$(document).ready() function for executing DOM-specific code as soon
as the DOM is ready (which often occurs long before the onload event).
However, in jQuery Mobile site and apps, pages are requested and
injected into the same DOM as the user navigates, so the DOM ready
event is not as useful, as it only executes for the first page. To
execute code whenever a new page is loaded and created in jQuery
Mobile, you can bind to the pageinit event.
So, your code might look like this:
$(document).on("pageinit", "#page1", function(){
//Your init code for page 1 goes here
});
$(document).on("pageinit", "#page2", function(){
//Your init code for page 2 goes here
});
Kinda New to Jquery and hit an issue regarding returned HTML. I am using the .load() function to load HTML returned from a jsp file - its all working grand except the returned HTML doesnt seem to allow further Jquery functions to be called on it.
i have a click and toggle combination running for "#showgame" - this id is in the returned HTML but clicking on it does nothing when it should. Do i have to update anything to tell jquery that this id now exists on the page after load() call?
Regards,
Cormac
You need to use the live() function to bind the click event.
$("#myelement").live("click", function() { });
Live binds the event to current and future elements that match the selector.
Read more at http://api.jquery.com/live .