Im building an application which is intended for speed, and Im thinking to process actual page loads on mousedown event than click event, so the gap between the mousedown and click saves me some milliseconds(about 100ms), my app can load pages with in that 100ms time, so it just runs instant.
$(document).on('mousedown','a.magic_links',function(e) {
$(this).click().off("click");
});
I tried this code, but not preventing the default click action, any suggestions to achieve this?
You want to prevent the default behavior of the event (or cancel it).
What you are currently trying to do is remove an event handler that was never created in the first place
$(document).on('mousedown','a.magic_links',function(e) {
e.preventDefault();
// code here to do your loading
});
Personally I think you should rethink this over-optimization strategy as it may not be optimal for all devices
Related
I am working on a app with a drag and drop function that on drop, posts a set of variables to a handler to change the status of the item being dropped. I also have an AJAX script running to auto refresh the div with the updated database ID's.
The issue I have is that whilst the AJAX is reloading the div, I loose the ability to interact with the object. Is there a way to pause the AJAX whilst MouseDown is active or another way to handle this. I need the refresh of the Div to be every 100ms or so.
Thanks in advance.
I have a problem with jQuery events.
First let me explain the setup of the page:
The main-page.php is consisted of:
a) a header (where the logo is)
b) a navbar (where the various selections are)
c) a dynamic content area (Where the content of the clicked element on the navbar will be loaded)
d) Footer
Lets say that the navbar is consisted of | HOME | MESSAGES | ABOUT US | ...
The content of HOME is a separate PHP file, with a separate CSS and JS file. The same goes for all selections.
As soon as I select HOME (for example), i remove any content from the DYNAMIC CONTENT area and I place the content of HOME using AJAX. At the same time I remove any CSS/JS files associated with the previous content and I link the CSS/JS files associated with the one loaded. This part is working perfectly.
Now, if I switch from one selection to other selections (lets say from HOME --> MESSAGES --> ABOUT US and then back to HOME), if I click on a button inside HOME it will fire the event multiple times. This is even worse if that event is causing an AJAX call to the server (imagine calling the server 5 times instead of 1).
**The reason I use the on() event on the element with radio-element class is because is a future DOM element. Initially this element is not on the page.
A sample of JS code:
$(document).on('click', '.radio-element', function(){
$.ajax({
url: "js/ajax/ajaxcall.php",
success: function(output){
$('#ajaxcall-container').html(output);
}
});
});
What I do is, as soon as I click an element with the class of radio-element, I go in the server and i fetch the output of ajaxcall.php script.
Watching the NETWORK tab inside INSPECT ELEMENT, I see that the click event is executing the AJAX call multiple times. Sometimes 2, other 3 or even 5.
What I did to solve the problem (non of them is working 100%):
A) unbind the event before binding it using "off"
$(document).off('click','.radio-element').on('click', '.radio-element', function(){ .... });
B) Use event.stopImmediatePropagation()
$(document).on('click', '.radio-element', function(event){
event.stopImmediatePropagation();
//rest of code
});
Below is a solution that I haven't tried yet since I read in an article that it will not stop event binding process, it will just prevent multiple event execution (don't know if this will cause other problems).
$(document).on('click', '.radio-element', function(event){
if(event.handled !== true)
{
//Code goes here
event.handled = true;
}
});
The problem with multiple event firing is that there are AJAX calls that perform actions that are not supposed to be executed more than once (eg. send email to clients).
Also, this behavior (multiple event firing) is not something i can predict. Sometimes it works fine, some others it fires the event 5 times in a row.
I have been searching the web for a week now, but everything i tried did not solve the problem. Any solution will be much appreciated :)
Thanks!
Based upon what I am reading here - I would guess you are bringing on the js file with the click bind event more than once. If you are using custom routing or single page app and not refreshing the page, it is very likely based on what you are saying.
You could test this theory by adding a console.log inside the click event (above the ajax) and fool around with it and check the logs. If you are clicking it and it is logging whatever you logged more than once, then you know that this is the issue. I don't think it is the ajax.
I have also encountered the same problem quite a while. I solved this by unbinding all the events associated with the element before executing new event handlers.
Use like this:
$('#element').unbind().click()
{
//write something here
}
This will unbind previous event handlers before creating a new one. I think this will works well for you.
If you are using jquery version 1.7+
you can use off() like this
$('#element').Off().click()
{
//write something here
}
My guess based on your description is that you are not removing the event listeners. So every time you switch tab/page the same event will be added over and over again. Even though you have tried to do it, something is not going right. I doubt it has anything to do with Ajax.
This is a bit more abstract than the usual questions which I know goes against the spirit of things, but I'm hoping that I can still get a good response.
Here's the issue. We have a fairly complex web application that is written in PHP. The purpose is relatively unimportant, but simply put: We are using Comet / AJAX / JSON / JavaScript / PHP / MySQL (NO jQuery, however, native JavaScript only) to render controls that display data in real time. Throughout this application we are rendering popup modals using native JavaScript. It's fairly complex logic that tests for the existence of a modal with the same name on the page and prevents creating new versions of the same, and of course once created a layer is created to prevent interacting with links beneath.
The issue is that we have at least one modal that can be called multiple times before it is rendered on the page due to the time it takes the AJAX call to collect data from the database and assemble it for presentation. If a user were to 'double click' on said link they would be presented with two modals, one on top of the other. I've been able to actually render 8-10 of these. Interacting with the topmost modal appears to be broken because the user is actually effecting collapsible headers on the bottom-most modal. Once you start closing the dialog boxes and get to the bottom you can see where you've clicked.
So, my issue is this: What is the best way to prevent this behavior?
I've considered simply adding a function to the onClick event that would remove the onClick attribute from the link after the first click with a minor timeout (say 500ms). I've also considered trying to implement bit testing logic that would count clicks and only actually first the event after the first click and reset when the modal is closed.
What I'm wondering is if someone has any thoughts or suggestions or even has tackled a similar issue and has some insight on best practices to accomplish my goal in this instance.
Thank you very much.
You can unregister the click handler once it fired:
var element = ...,
myClickHandler = function(event) {
// ...
element.removeEventListener('click', myClickHandler, false);
// ...
}
element.addEventListener('click', myClickHandler, false);
In this case, I found the simplest solution to be the best but I would still love to hear other feedback if'n it's out there.
In this case I found that the order of operations was the issue. I was awaiting the AJAX response to generate the body html for this modal. I changed the order to instead create the modal immediately using <p>Loading...</p> within the body of the modal. Then, when the AJAX was completed and I had my new body text, I just injected it into the modal's content area with a neat bit of code and Bob's your Uncle, we had jackpot.
I'm implementing a twitter like news system on my website. It loads all news items on page load with an ajax call fine. But how do I show a new item without having a trigger like a page load or a click on something? So when a new item is added to the database, It should automatically be added to an open page, like an auto-update or something.
you can look into
ajax polling
reverse ajax
comet
server polling
here is a useful link http://www.zeitoun.net/articles/comet_and_php/start
edit
you can achieve the effect by using jquery alone below are some useful links
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html
Timeout jQuery effects
If you don't have an event, you have to generate one. A common practise to archive this is to have a timer running on the client/browser which fires an event in certain intervals to generate ajax requests.
Here are a few jquery plugins which might help you:
http://plugins.jquery.com/project/timers
Some SO posts which are in a similar direction:
Use AJAX to watch SQL database for changes
jQuery - If a database is updated, update the page
Sending notification to the user on database change
Is it possible to use JQuery & PHP to create a "like" button that a user could click and it would add +1 to a "number of likes" database (or even text file) and disable the "like" button for that user so that the user could only click it once? I was browsing around and found some information about writing cookies with JQuery:
http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html
Perhaps, when a like button is clicked, it could write a cookie to the user's computer that would prevent them from future clicks? It just basically needs to be that the user could click the like button, it adds a count to some type of database, and it disables the button for the user. Pretty simple I would imagine - there may already be some type of plugin for this, but I haven't found any. Any ideas?
Thanks!
jquery:
$("button").click(function(){
$(this).remove();
$.post('count.php');
});
though the user can just reload the page, so any real validation needs to happen on the php side.
You may want to look at jQuery's one() function. It allows you to bind an event for only one invocation. Here's an example I'd run on page load.
if (likedBefore) {
$("button").addClass("liked");
}
else {
$("button").one("click", function() {
$(this).addClass("liked");
$.post("count.php");
});
}
Validating server side is a bit more difficult. It really depends on how secure you need this to be.