We Keep Coding

How to define global variable for a function in javascript?

Here is my javascript code, the event is onkeyup for many row of table !
function product(id)
{
$('#customers2').find('tr').click( function(){
var clicked = this;
});
var row = $(clicked).find('#tempnow').val();
if (row == "noncheck"){
$(clicked).find('#ett').val("");
$(clicked).find('#ett').prop("disabled", true);
}
else{
$(clicked).find('#ett').prop("disabled", false);
$.ajax({
url:baseurl+"/getinform/",
type: "POST",
dataType: "json",
data: {masp : id},
success:function(data) {
var thue = data['pcs_cl_pd_thue'];
$(clicked).find('#tyu').css("color", "red");
$(clicked).find('#tyu').val(thue);
}
});
}
}
When i use firebug, variable clicked is not defined ?

var clicked; // Define it outside
$('#customers2').find('tr').click( function(){
clicked = this; // Give it a value on click, from inside a function
next() // Now it has a value, call another function that'll do something with it
});
function next(){
$(clicked).find('#ett') // It works!
}

Don't allow multiple form submissions

I'm trying to validate Google Captcha and my form, which currently does work. I'm using JQuery Forms and Validate Unobstructive. The problem is after submission, you can still submit the form as many times as you click.
Is there a way to ensure this only happens once?
I have tried using the following (commented in the code), but then you can't submit the form again to recheck the captcha:
if ($form.data('submitted') === true) { } else { }
JS:
$(document).ready(function () {
//Intercept Submit button in order to make ajax call instead of a postback
$('#contactForm').preventDoubleSubmission();
});
// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
$("button").click('submit', function (e) {
e.preventDefault();
var $form = $("#contactForm");
$($form).bind("invalid-form.validate", function() {
if( $("invalid-form.validate") ) {
formErrors();
}
})
// if ($form.data('submitted') === true) {
// // Previously submitted - don't submit again
// } else {
if ($form.valid()) {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
if ( captchaCheck() == false) {
captchaCheck();
} else {
// Make ajax call form submission
$.ajax({
url: $form.attr('action'),
type: 'POST',
cache: false,
data: $form.serialize(),
success: function (result) {
success();
}
});
}
}
// }
});
// keep chainability
return this;
};
function hover() {
$(".contour-button").on("mouseenter", function() {
return $(this).addClass("hover");
});
}
function hoverOff() {
$(".contour-button").on("mouseleave", function() {
return $(this).removeClass("hover");
});
}
function success() {
$(".contour-button").addClass("success");
var formFields = $(".contactForm input, .contactForm textarea, .contactForm button");
$(formFields).attr('disabled', 'disabled');
$(formFields).animate({'opacity':'0.5'});
$(".contour-btn-arrow").addClass("contour-btn-success");
$(".contour-button .submit").html("Thank you for your enquiry");
}
function formErrors() {
$(".contour-button").addClass("form-errors").delay(3500).queue(function(){
$(this).removeClass("form-errors").dequeue();
});
$(".contour-btn-arrow").addClass("contour-btn-error").delay(3500).queue(function(){
$(this).removeClass("contour-btn-error").dequeue();
});
$(".contour-button .submit").html("There are errors on the form").delay(3500).queue(function(){
$(this).html("Submit").dequeue();
});
}
function captchaCheck() {
var captchaResponse = grecaptcha.getResponse();
if(captchaResponse.length == 0) {
// html for the captcha error message
var captchaMsgHtml = '<img src="/images/form-error-icon.png" /> Please check the captcha and try again';
$("#captchaMsg").html(captchaMsgHtml).slideDown(500);
$(".g-recaptcha div div").addClass("recaptchaHighlight");
return false;
} else {
$(".g-recaptcha div div").removeClass("recaptchaHighlight")
$("#captchaMsg").hide();
return true;
}
}
hover();
hoverOff();

You might disable clicked button just putting
var that = this;
$(that).attr("disabled", true);
after
e.preventDefault();
then, if you need, enable it when the operation is completed with
//probably after success()
$(that).attr("disabled", false);
I hope that's what you need!

I managed to solve this in a similar way to MonkeyZeus's suggestion by wrapping the AJAX call in a condition, using a bool (true/false).
var ajaxRunning = false;
$("button").click('submit', function (e) {
e.preventDefault();
var $form = $("#contactForm");
$($form).bind("invalid-form.validate", function() {
if( $("invalid-form.validate") ) {
formErrors();
}
})
if ($form.valid()) {
if ( captchaCheck() === false) {
captchaCheck();
formErrors();
} else {
if(!ajaxRunning){
ajaxRunning = true;
$.ajax({
url: $form.attr('action'),
type: 'POST',
cache: false,
data: $form.serialize(),
success: function (result) {
success();
},
error: function (result) {
captchaCheck();
formErrors();
}
});
}
}
}
});
function hover() {
$(".contour-button").on("mouseenter", function() {
return $(this).addClass("hover");
});
}
function hoverOff() {
$(".contour-button").on("mouseleave", function() {
return $(this).removeClass("hover");
});
}
function success() {
var disabledElements = "#formFooter button, .contourField input, .contourField textarea";
var opacityElements = ".contourField input, .contourField textarea";
// disable button & inputs once submitted
$(disabledElements).attr('disabled', 'disabled');
// change opacity of elements
$(opacityElements).animate({ 'opacity' : '0.5' });
$(".contour-button").addClass("success");
$(".contour-btn-arrow").addClass("contour-btn-success");
$(".contour-button .submit").html("Thank you for your enquiry");
}
function formErrors() {
$(".contour-button").addClass("form-errors").delay(3500).queue(function(){
$(this).removeClass("form-errors").dequeue();
});
$(".contour-btn-arrow").addClass("contour-btn-error").delay(3500).queue(function(){
$(this).removeClass("contour-btn-error").dequeue();
});
$(".contour-button .submit").html("There are errors on the form").delay(3500).queue(function(){
$(this).html("Submit").dequeue();
});
}
function captchaCheck() {
var captchaResponse = grecaptcha.getResponse();
if(captchaResponse.length == 0) {
// html for the captcha error message
var captchaMsgHtml = '<img src="/images/form-error-icon.png" /> Please check the captcha and try again';
$("#captchaMsg").html(captchaMsgHtml).slideDown(500);
$(".g-recaptcha div div").addClass("recaptchaHighlight");
return false;
} else {
$(".g-recaptcha div div").removeClass("recaptchaHighlight")
$("#captchaMsg").hide();
return true;
}
}
hover();
hoverOff();

For starters, if you are actually using a <form> with a dedicated <submit> or <button type="submit">Submit</button> then you should be listening for on.('submit'):
var allowSubmit = TRUE;
$('form').on('submit', function(e)
{
if(allowSubmit === TRUE)
{
allowSubmit = FALSE;
// Perform your validations + AJAX calls and make sure to set
// allowSubmit = TRUE; wherever appropriate
if(validationFails)
{
allowSubmit = TRUE;
}
else
{
$.ajax({
url: $form.attr('action'),
type: 'POST',
cache: false,
data: $form.serialize(),
success: function (result) {
success();
allowSubmit = TRUE;
},
error: function() {
// Do some error handling
allowSubmit = TRUE;
}
});
}
}
else
{
e.preventDefault();
}
});

$post method using in jQuery

I want to create a "add" button in my jQuery calculator. When I click "add" button, it display "+" in the display and the number that I have entered will be stored. After that I can input another number to finish the equation. I can stuck in the part of the add button not sure how to do it. Do I need to use load()?

Try this out. Made a solution with limited inputs you have given
http://jsfiddle.net/sabkaraja/utc7f2ex/
You can decide what you want to do with the added value in #add.click(....) event. I have used a simple eval to get the result in.
$(function () {
var $display = $('#display');
$display.val(0);
$(document).on('click', 'button.number', function () {
if ($display.val().length >= 8) {
$display.val("Error");
} else if ($display.val() == "Error") {
$display.val("0");
} else {
$display.val( $display.val() + '+' + $(this).val());
}
});
$("#clear").click(function () {
$display.val("0");
});
$("#ce").click(function () {
if ($display.val().length >= 2) {
$display.val($display.val().substring(0, $display.val().length - 1));
} else {
$("#ce").trigger("click");
}
});
$("#add").click(function () {
if ($display.val().length !== 0) {
v = eval($display.val()); //<----- here is where I add the numbers
$display.val( v); //------------> do whatever you like to do after this
$.ajax({
url: 'submit.php',
type: 'POST',
dataType :'html',
data: {sum: v},
success: function(data) {
alert(data);
}
});
}
});
});

JQUERY 1.9 ,1.10, 1.11 conflict with code

I have this piece of code , that does not work , if I link JQUERY above 1.8.0
Just for curiosity, why its happening?
it takes values from select boxes, passing to pagination.php file and in the meantime showing loading image
// Pagination
$(document).ready(function () {
function loading_show() {
$('#loading').html("<img src='img/loading.gif'/>").fadeIn('fast');
}
function loading_hide() {
$('#loading').fadeOut('fast');
}
function loadData(page) {
var house_id = $("#pbthouse option:selected").val();
var sale_id = $("#pbtsale option:selected").val();
var year_id = $("#pbtsale option:selected").val();
var ipp = $("#res option:selected").val();
loading_show();
$.ajax({
type: "POST",
url: "pagination.php",
//data: "page="+page,
data: {
page: page,
house_id: house_id,
year_id: year_id,
sale_id: sale_id,
ipp: ipp
},
success: function (msg) {
$("#container1").ajaxComplete(function
(event, request,settings)
{
loading_hide();
$("#container1").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container1 .pagination li.active').live('click', function () {
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click', function () {
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if (page != 0 && page <= no_of_pages) {
loadData(page);
} else {
alert('Enter a PAGE between 1 and ' + no_of_pages);
$('.goto').val("").focus();
return false;
}
});
$('#container1 .pagination li.active').live('click', function () {
var page = $(this).attr('p');
loadData(page);
});
$("#pbthouses").change(function () {
var page = '1';
loadData(page);
});
$("#res").change(function () {
var page = '1';
loadData(page);
});
$('#pbtsale, #pbtyear').change(function () {
var sale_id = $("#pbtsale option:selected").val();
var sale_id = $("#pbtyear option:selected").val();
var page = '1';
if (sale_id != '') {
$.ajax({
type: "POST",
url: "get_pbtsales.php",
data: {
year_id: year_id,
sale_id: sale_id
},
success: function (option) {
$("#pbhouses").html(option);
loadData(page);
}
});
} else {
$("#pbhouses").html("<option value=''
>-- No category selected --</option>");
}
return false;
});
});

Support for .live() has been deprecated since version 1.7 and removed since version 1.9. You should switch to the dynamic form of .on() which would change from this:
$('#go_btn').live('click', function () {
to this:
$(document).on('click', '#go_btn', function () {
Ideally, instead of $(document), you would pick a closer parent of #go_btn that is static (e.g. not dynamically created) as this is more efficient than using $(document), particularly if you have a number of delegated event handlers like this.
Some references for delegated event handling with .on():
jQuery .live() vs .on() method for adding a click event after loading dynamic html
Should all jquery events be bound to $(document)?
Does jQuery.on() work for elements that are added after the event handler is created?

jquery .on() is not triggering

I have the following code:
console.log($(".resultLike"));
$(".resultLike").on("click", function (event) {
alert('test');
event.stopPropagation();
alert('test1');
value['clicked'] = 1;
$.ajax({
url: 'scripts/php/userProfile.php',
data: {
action: value
},
type: 'post',
dataType: 'json',
success: function (profileData) {
if (profileData == 'removed') {
$(me).children('.resultInside')
.children('.resultData')
.children('.resultLike').html('Favourite?');
} else if (profileData == 'notLoggedIn') {
$(me).children('.resultInside')
.children('.resultData')
.children('.resultLike').html('Login to add');
} else {
$(me).children('.resultInside')
.children('.resultData')
.children('.resultLike').html('un-Favourite');
}
}
});
});
My expectations is that when you click on the div resultLike, then it will preform the function(). However, it does nothing. I have two alert() calls in there, and neither is being called. The output of console.log() is as follows:
[
<div class=​"resultLike searchBarGameLike">​</div>​
]
That proves it's being put on the page. Any help would be appreciated, thanks.
EDIT:
I think it should be mentioned that I'm actually using two .on() events.
This is actually all my code. The issue is around the
$("body").on("click", ".resultLike", function(){
Line, it's not working.
$searchedGamesContainer.on(
"click",
".box",
function(event){
if(!$displayLock){
$displayLock = true;
var description;
var user_id;
if($(this)[0].style.width == '75%'){
var org_img = $(this).children(".resultInside").find("img").attr("src");
$(this).children(".resultInside").append("<img src='"+org_img+"' id='imgId'/>");
$(this).children(".resultInside").css('height','auto');
$(this).css('width', '18%');
$(this).css('height', 'auto');
$(this).find(".resultData").fadeOut('fast');
setTimeout(function(){$searchedGamesContainer.masonry('reload');},300);
setTimeout(function(){$displayLock = false;},1000);
}else{
var me = this;
var pos;
largeImage= new Image();
value['name']=$(me).find("p").html();
oldImage = $(this).find("img").attr("src");
for(var i = 0; i<$searchBarGames.length; i++){
if($searchBarGames[i][5] == value['name']){
pos = i;
break
}
}
description = $searchBarGames[pos][2];
$(me).find("img").hide();
largeImage.src = $searchBarGames[pos][4];
$(me).find("img").attr("src",largeImage.src);
$(me).children(".resultInside").css('height','400px');
$(me).css('width', '75%');
$(me).children(".resultInside").html("\
<div class='resultData'>\
<div class='resultImg'><img src='"+ largeImage.src +"'></div>\
<div class='resultName'>" + value['name'] + "</div>\
<div class='resultDesc'>" + description +"</div>\
<div class='wikiLink searchBarGameWiki'><a href='http://wikipedia.org/wiki/" + value['name'] + "'>Wikipedia</a></div>\
<div class='resultLike searchBarGameLike'></div>\
</div>");
value['clicked']=0;
$.ajax({
url:'scripts/php/userProfile.php',
data:{action:value},
type: 'post',
dataType: 'json',
success:function(profileData){
//logic
}
});
console.log($(".resultLike"));
$("body").on("click", ".resultLike", function(){
alert('test');
event.stopPropagation();
alert('test1');
value['clicked']=1;
$.ajax({
url:'scripts/php/userProfile.php',
data:{action:value},
type: 'post',
dataType: 'json',
success:function(profileData){
//logic
}
});
}
);
}
}
}
);

try
$("body").on("click", ".resultLike", function(){
// your code goes here.
});
Your implementation will likely not be bound if the div.resultLike is added dynamically

This problem actually ended up being completely because of CSS.
For the div element I wanted the alerts on, I had markup to look like a button.
However, I noticed this:
.resultLike:active {
position:relative;
top:1px;
z-index:1235;
}
I'm not 100% why, but I think this was actually changing where the button was when clicking it. Meaning as soon as it was active, it wasn't where your mouse was. I could be wrong, but this fixed it.