Develop Reference

Javascript - How to load content depends on url

I have 2 buttons and when we click it redirects to different pages with window.location.replace and in document ready I put 2 if's for each click button. But what happens is when I click it entry inside both if's and should not.
My click function:
$('a[href="#reception-supplier"]').on('click', function()
{
var type = $(this).attr('data-type');
$.get("/reception-type/"+type, function(data)
{
$('.popup').html('');
$('.popup').append(data);
$('.popup').fadeIn(300);
$('.loading').fadeOut(300);
$('.inputDossie').select2();
$('.enter-reception-order').on('click', function()
{
var supplierId = $('#supplierChoose option:selected').val();
window.location.replace("/reception-order-header-supplier/"+supplierId);
});
});
});
The second function click:
$('a[href="#reception-order"]').on('click', function()
{
$.get("/reception-type/"+type, function(data)
{
$('.popup').html('');
$('.popup').append(data);
$('.popup').fadeIn(300);
$('.loading').fadeOut(300);
$('.input-order').focus();
$('.enter-reception-order').on('click', function()
{
$('.error-message-reception').fadeOut(300);
$('.error-message-reception .error').remove();
var orderId = $('.input-order').val();
$.get("/verify-reception-order/"+orderId, function(validOrder)
{
window.location.replace("/reception-order-header/"+orderId);
});
});
});
});
And in document ready I put this 2 if's:
$(document ).ready(function()
{
if(window.location.href.match('/reception-order-header-supplier/?') !== null)
{
alert('1');
}
if(window.location.href.match('/reception-order-header/?') !== null)
{
alert('2');
}
});
How can I resolve this issue or what are the alternatives?
Thank you

Jquery - Getting trouble on double click because change in class

I have a button. onclick I am changing the class of that button but when I double click its changing class. All my functionality depend on current class
how to disable double click or make the request complete on first click.
function data() {
lastScrollTop = 0;
document.getElementById("expand-dataset-btn").disabled = false;
var id = event.target.id
var allChildern = null
if(!$(".id_"+event.target.id).hasClass('minus-symbol')){
$(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol')
$.ajax({
},
success : function(result) {
}
});
}else{
$(".id_"+event.target.id).addClass('plus-symbol').removeClass('minus-symbol')
$.ajax({
},
success : function(result) {
}
});
}
}
Calling function from controller like below
htmlDataId += "<a onclick=\"data()\" title='View' id="+row[primaryField]+">

what you need is "throttle" function or "debounce" function.
Throttling is a means by which we can limit the number of times a function can be called in a given period. For instance, we may have a method that should be called no more than 5 times per second.
you can either use underscore underscore official website
or
you can use the following codes:
/*trigger specific eventhandler when the event is idle for specific time*/
function debounce(fn, delay, self) {
var timer = null;
return function () {
var context = self ? self : this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
//use in the following way
$input.on('click',debounce(clickCallback,250));
then if the second "click" event triggered within 250ms, it will be ignored

You should wait for ajax to complete
function data() {
lastScrollTop = 0;
document.getElementById("expand-dataset-btn").disabled = false;
var id = event.target.id;
var allChildern = null;
if($(".id_"+ id).hasClass("disable"))
{
event.preventDefault();
}
if(!$(".id_"+ id).hasClass('minus-symbol')){
//make control disable
$(".id_"+ id).addClass('disabled');
$.ajax({
},
success : function(result) {
//change here after success
$(".id_"+ id).removeClass('plus-symbol').addClass('minus-symbol');
//remove control disable
$(".id_"+ id).removeClass('disabled');
});
}else{
//make control disable
$(".id_"+ id).attr('disabled', true);
$.ajax({
},
success : function(result) {
//change here after success
$(".id_"+ id).addClass('plus-symbol').removeClass('minus-symbol');
//remove control disable
$(".id_"+ id).attr('disabled', false);
}
});
}
}

Making sure my form isn't being submitted multiple times with jquery show/hide

So when someone hits Reply, I am attempting to pop-up a form to type your response. Once the form is submitted, it disappears until the next time you hit Reply.
This is working except after the 1st time, I am submitting the information twice. If I do it a third time, the form submits three times. Essentially what is happening is the previous form doesn't seem to be resetting after I hide it again.
I checked this website/google and have tried using reset() but it didn't work. Below is the code:
$(document).on('click', '.secretfeed button', function () {
var message_id = $(this).attr('name');
$(".comment_box").show();
$("#m_id").val(message_id);
var value = document.getElementById("m_id").value;
$('#comment_form').submit(function (e) {
e.preventDefault();
var commentData = $(this).serialize();
$.post('../../process_comment.php', commentData, processData);
function processData(data) {
//$('comment_form').reset()
$(".comment_box").hide();
$('#comment_form')[0].reset();
RefreshFeed();
}
});
});

Rather than initializing the submit function on every click, move it outside the click function. jQuery may be creating an instance of it for each click.
$('#comment_form').submit(function (e) {
e.preventDefault();
var commentData = $(this).serialize();
$.post('../../process_comment.php', commentData, processData);
function processData(data) {
//$('comment_form').reset()
$(".comment_box").hide();
$('#comment_form')[0].reset();
RefreshFeed();
}
});
$(document).on('click', '.secretfeed button', function () {
var message_id = $(this).attr('name');
$(".comment_box").show();
$("#m_id").val(message_id);
var value = $("#m_id").val();
});
The alternative is to unbind the click function before reusing it.

We want a reusable way to handle the state. We will save the state of the button in a boolean which gets turned on and off depending on the status of the request. The pattern is the following:
var isSending = false;
function onSubmit() {
isSending = true;
// Send data
}
function onComplete() {
// done sending data
isSending = false;
}
if (!isSending) {
onSubmit();
}
// When data sending is finished:
onComplete();
The above can be encapsulated in a more functional way that uses promises to manage the state. (jQuery AJAX functions all return a promise-like object):
function oneAtATimeFunction(promisedFunction) {
var pendingPromise;
function reset() { pendingPromise = null; }
return function() {
if (pendingPromise) { return pendingPromise; }
pendingPromise = promisedFunction.apply(promisedFunction, arguments)
.always(reset);
return pendingPromise;
}
}
function submitForm() {
return $.ajax({
url: '/foo',
method: 'POST',
data: { data: 'from form' }
});
}
$('#submit-button').on('click', oneAtATimeFunction(submitForm));
Adding a little flare to the UI We can add a way to turn on and off the submit button. First we will define a helper function to handle the on and off state:
function buttonEnable(enabled) {
$('#submit-button').attr('disabled', !enabled);
}
buttonEnable(false); // disable the button
buttonEnable(true); // enable the button
Putting it all together:
function onClick() {
buttonEnable(false);
return onSubmit()
.always($.proxy(buttonEnable, null, true));
// The above is also the same as:
// .always(function() { buttonEnable(true); });
}
$('#submit-button').on('click', oneAtATimeFunction(onClick));
To see this in action here is a JSBin example.

Synchronize blur and click events in JavaScript

I am finding it difficult to synchronize blur and click events. The scenario is as follows: I have a page in which i have a textbox and a button. Now I have a blur event handler for the textbox, which basically makes an AJAX request and updates some part of the page. Also I have a click handler for the button which does some other job.
Now the problem here is that since I have a blur event handler on the textbox, when I enter something in the text box and directly click the button, it fires both blur and click events (as expected). The problem is synchronizing the two since the click handler should only execute once the blur handler has returned (if there was any blur event).
Sample code is as follows:
$('#textbox').on('blur', function(){
//make an ajax request
});
$('#btn').on('click',function(){
//wait for the blur event to finish(if any)
// then execute the code
})

Try something like this:
http://jsfiddle.net/8m7j5/2/
var blurring = [];
var expecting = false;
$(document).ready(function () {
$('#textbox').on('blur', function () {
// make an ajax request
console.log("TEXTBOX BLURRED");
blurring.push(1); // Flag a new blur event
$.ajax({
url: "/echo/json/",
complete: function () {
setTimeout(function () { // Simulate AJAX request taking 2 seconds
console.log("AJAX REQUEST COMPLETE");
blurring.pop(); // Flag completed blur event
checkClick();
}, 2000);
}
});
});
$('#btn').on('click', function () {
// wait for the blur event to finish(if any)
// then execute the code
console.log("ACTUALLY CLICKED BUTTON");
expecting = true;
checkClick();
});
});
function checkClick() {
if (expecting && blurring.length < 1) {
console.log("CHECKING: EXPECTING CLICK AND NO MORE BLUR EVENTS");
expecting = false;
clickFunction();
} else {
console.log("CHECKING: EITHER NOT EXPECTING OR BLUR EVENT(S) STILL OCCURRING");
}
}
function clickFunction() {
console.log("EXECUTING CLICK FUNCTION");
// Put your actual click code here
}
What you actually want to happen when the button is clicked, put in clickFunction.

The code from ianpgall a bit improved:
var functionsToCall = [];
var ajaxRunning = false;
$(document).ready(function(){
$('#textbox').on('blur', function(){
ajaxRunning = true;
console.log("START AJAX REQUEST");
$.ajax({
url: "/echo/json/",
complete: function () {
setTimeout(function () { // Simulate AJAX request taking 2 seconds
console.log("AJAX REQUEST COMPLETE");
ajaxRunning = false;
fireStackedCalls();
}, 5000);
}
});
})
$('#btn').on('click',function(){
if(ajaxRunning === true) {
functionsToCall.push('clickFunction()');
} else {
clickFunction();
}
});
function fireStackedCalls() {
while(functionsToCall.length > 0) {
toCall = functionsToCall.pop();
eval(toCall);
}
}
function clickFunction() {
console.log("EXECUTING CLICK FUNCTION");
// Put your actual click code here
}
});
Now every call of the clickFunction is recorded and executed if the ajax request is done.

setInterval and clearInterval javascript not working as needed

I have the following code partially working. I am newbie in javascript so please don't blame me if my approach is not the best.
window.url_var = "status.htm";
window.elem = "#e1";
function menu_item(){
$(window.elem).click(function (event)
{
$("#divTestArea1").load(window.url_var);
});
}
$("#e1").click(function (event)
{
event.preventDefault();
window.url_var = "demo2.txt";
window.elem = "#e1";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
$("#e2").click(function (event)
{
event.preventDefault();
window.url_var = "status.htm";
window.elem = "#e2";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
$("#e3").click(function (event)
{
event.preventDefault();
window.url_var = "form.htm";
window.elem = "#e3";
clearInterval(auto_refresh);
$("#divTestArea1").load(window.url_var);
});
jQuery(document).ready(function() {
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
Whenever I click elements e1 and e2, the setInterval works as expected and as soon as I click element e3, the element cease to be reloaded.
That's the behavior I want so far. But I also wants to start the setinterval again if e1 or e2 get's again clicked.
the last is what it's not working on the above code.
I will appreciate if you could point me in the right direction.
I have come to this code after seeing some of the answers to my original question (thanks to everyone). To clarify my original idea, I need to update some items on my web page on a regular basics but the content can be change with some menu and also some of the contents like a form should not be updated.
window.url_var = "demo2.txt";
var auto_refresh = null;
function setRefresh() {
var self = this;
this.bar = function() {
if(window.url_var != ""){
$("#divTestArea1").load(window.url_var);
auto_refresh = setTimeout(function() { self.bar(); }, 5000);
}
}
this.bar();
}
$("#e1").click(function (event)
{
event.preventDefault();
window.url_var = "demo2.txt";
setRefresh();
});
$("#e2").click(function (event)
{
event.preventDefault();
window.url_var = "status.htm";
setRefresh();
});
$("#e3").click(function (event)
{
event.preventDefault();
window.url_var = "form.htm";
$("#divTestArea1").load(window.url_var);
window.url_var = "";
});
$(document).ready(function() {
setRefresh();
});

Try using 2 different variables and clearing all if needed. This is: auto_refresh1 and auto_refresh2. Each time you call setinterval, it creates a new timer with a new id. You are overwriting auto_refresh variable and the timer before that will still fire.
Or you can store the setinterval in a hash object and run through and clear them all.

I'm unclear as to what exactly it is that you're trying to do here. Nevertheless, I've rewritten your code a bit to make some improvements (and fix one glaring bug in your code involving the setInterval calls).
var url_var = "status.htm",
elem = "#e1",
$destination = $("#divTestArea1"),
auto_refresh;
function menu_item() {
$(elem).bind("click", function (e) {
$destination.load(url_var);
});
}
function load() {
$destination.load(url_var);
}
function set(url, id) {
url_var = url;
elem = id;
}
function setRefresh() {
return setInterval(menu_item, 5000);
}
function handleClick(e) {
e.preventDefault();
set(e.data.url, e.data.id);
load();
auto_refresh = setRefresh();
}
$("#e1").on("click", {
url: "demo2.txt",
id: "#e1"
}, handleClick);
$("#e2").on("click", {
url: "status.htm",
id: "#e2"
}, handleClick);
$("#e3").on("click", function (e) {
e.preventDefault();
set("form.htm", "#e3");
clearInterval(auto_refresh);
load();
});
$(document).ready(function () {
load();
auto_refresh = setRefresh();
});
I'm guessing that maybe those setInterval calls should actually be setTimeout calls? Why would you want to bind a "click" event handler over and over again?
EDIT #1: Switched to jQuery's currently preferred on method from the bind method, included use of event data parameter to further abstract event handling code.