We have many hyperlinks in a html page. On click of which we do certain function.
After one hyperlink is clicked I wanted to make other hyperlink clicks to do nothing until first one finishes it processing. (During testing testers started clicking the hyperlinks rapidly one after another)
I did something like this, but it does not seem to be working. Basically used a variable to track if a hyperlink is clicked.
var hyperlinkClickInProcess=false;
function clickHandler(inputData){
if(hyperlinkClickInProcess ==false){
hyperlinkClickInProcess =true;
linkProcessing(inputData);
hyperlinkClickInProcess =false;
}
}
Any thoughts on how to implement such functionality?
function disableAllLinks() {
// search for all links and remove onclick event handlers, + return false.
}
function enableAllLinks() {
// search for all links and reassing onclick event handlers
}
function clickHandler(inputData){
disableAllLinks();
/// Link processing body here ////
enableAllLinks();
}
This question tells how to use jquery to disable all the links on a page: jQuery disable a link. But instead of disabling just one specific link, you could use a similar strategy on all the links on the page by doing like so:
$('a').click(function(e) {
if(hyperlinkClickInProcess) {
e.preventDefault();
}
else {
hyperlinkClickInProcess =true;
linkProcessing(inputData);
hyperlinkClickInProcess =false;
}
});
Related
Firstly, here is my code:
<script>
$(document).ready(function(){
$("#search_dropdown").on('change', function() {
ajax_search();
});
});
function ajax_search(){
var search_this = $("#search_dropdown").val();
$.post("../includes/db-search-properties.php", {searchit : search_this}, function(data){
$("#display_results").html(data);
});
}
</script>
What I am trying to achieve here is quite simple. I have a select dropdown with a list of clients. On click, the select changes the data table (called #display_results) without the need of pressing a button and that is why the change function is used.
This works, how ever you can only click the select dropdown twice and then it will not drop down again unless the page is refreshed. The event also causes my other jQuery events to break (such as my menu accordion to go up and down repeatedly) and I don't know how to tell this script to only focus on the task at hand.
Even though i've removed the login script, you can view the errors via this link:
https://www.summersproperty.com/dashboard3/directory/search-properties.php
Click the drop down on the right a few times and it will stop working, click the navigation menu items afterwards and they will bounce.
I would try stopping the event from propagating further. Like so:
$(document).ready(function(){
$("#search_dropdown").on('change', function(e) {
ajax_search();
e.stopPropagation();
});
});
Documentation
It does appear after much trial and error a bug with Chrome, as it works wonders in all other browsers but stops after a few clicks in Chrome.
$(document).ready(function(){
$("#search_dropdown").on('change', function() {
var search_this = $(this).find('option:selected').val();
if(search_this !=''){
$.post("../includes/db-search-properties.php", {searchit : search_this}, function(data){
$("#display_results").html(data);
});
}
else{ console.log("no value found"); }
return false; # optional
});
});
Have you tried this ? passing the value of current selection to your ajax call ?
for running example check this
I have big upload form, user can drag and drop images here. But when images are loaded, i'm showing button, which on click should link to some page. But this element instead of loading next page, opens file chose window (its parent default behaviour)
So I'm checking, if event has class, if it's true, I'm using e.preventDefault().
And this works better (I don't have image choose window on link click, but also this link will not work - every event is disabled) My question is, how i can enable linking now?
// jFiler is a parent - upload form, with event - on click it opens window for file choose - like input field.
$(document).on('click', '.jFiler', function(e) {
if ($(event.target).hasClass("jFiler-input-done-btn")) {
e.stopPropagation();
e.preventDefault();
}
});
$('.jFiler-input-done-btn').on('click',function(e) {
// Test works, but this is a link, and it cannot link to another page now...
alert ('test')
});
You break the link execution with e.stopPropagation() and e.preventDefault() in the parent click event. You have to just return true there.
$(document).on('click', '.jFiler', function(e) {
if( $(event.target).hasClass("jFiler-input-done-btn") ) {
return true;
}
});
Just redirect to the other page inside the click event you already attach :
$('.jFiler-input-done-btn').on('click',function(e) {
windows.location.href = $(this).attr('href');
});
//OR also
$('.jFiler-input-done-btn').on('click',function(e) {
e.stopPropagation();
});
Hope this helps.
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
I have a cancel button, that does an ajax and then refreshes page contents, and when navigating away I want to trigger the button, but I don't want it to refresh anything in the UI.
I thought of using a global variable, placed in the window object, but that does not seem very nice:
$(".cancel").bind("click", function(e) {
e.preventDefault();
tellTheServerThatUserCanceled(); // ajax call
if (!isUnloading) refreshUI();
});
$(window).bind("unload", function(e) {
isUnloading = true; // this is disgusting, I don't want to do this
$(".cancel").trigger("click");
}
Is there any official way, or another more elegant way, or I shouldn't be worried about using global variables?
EDIT:
The unload event code does not know what exactly it must do, because the page can have multiple edit panels, with multiple cancel buttons. All it knows is that it must trigger the cancel buttons of each panel.
I find its nicer not to run your code in jQuery's anonymous functions, but rather have them call functions that are sharable. Something like this illustrates the general idea:
function doCancel(e, isUnloading){
e.preventDefault();
tellTheServerThatUserCanceled(); // ajax call
if (!isUnloading) refreshUI();
}
$(".cancel").bind("click", function(e) {
doCancel(e, false);
});
$(window).bind("unload", function(e) {
doCancel(e, true);
}
We have a website built in .NET and jQuery. We have custom jQuery to call the load method on a processing ASP.NET page. That ajax call is fired in a click handler, e.g.
$("#Submit").click(function(){
$(a_selector).load("Process.aspx?data=" + someDataObject, null, function(){
alert("Done")});
}
return false;
);
Our issue is when we hit the #Submit button the click is fired which calls the ajax to process it. People seem to be double-clicking the button and therefore we're getting multiple results in our database from the dual clicks. Does anyone have an idea on how to prevent this issue? I considered something like disabling the button via JS but I'd like to know of other ideas.
Use the one function of jQuery. This way, the event is only ever fired once. Of course, you should also disable the button so the user knows that clicking on it is futile. In addition, show a spinner, progress bar, or change the cursor styling to indicate to the user that something is happening and the system isn't stuck.
stop propagation
$("#Submit").click(function(event){
event.stopPropagation();
if (typeof $_submitSend == "undefined")
var $_submitSend = true;
else if ($_submitSend == true)
return false;
$_submitSend = true;
$(this).attr("disabled", "disabled");
$(a_selector).load("Process.aspx?data=" + someDataObject, null, function(){
alert("Done")});
$_submitSend = false;
$(this).removeAttr("disabled");
}
);
$("#Submit").click(function(){
$(a_selector).removeClass("class").load("Process.aspx?data=" + someDataObject, null, function(){
$(this).addClass("class");
alert("Done")});
}
return false;
);
Then just add some specific class without any styling which you will use as a selector. Dont know if it will work the way you want, but it looks like simplest solution to me... :)