CODEWITHSUNDEEP
javascriptjquery
soum
soum

Reputation: 1159

Suppressing and adding parameters for ajax call

I am trying to make an ajax call for two separate click events. The difference is for the second click event the variable testOne should not be part of the call and instead there would be a new variable. How should I approach this? 

var varOne = '';
var varTwo = '';
var varThree = '';

function testAjax(){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: {
            testOne: varOne,
            testTwo: varOne
        }
    }).done(function(data) {
        $('.result').html(data);
    });
}

$('.clickOne').click(function(){
    varOne = 'xyz123';
    varTwo = '123hbz';
    testAjax();
});   

$('.clickTwo').click(function(){
    //varOne = 'xyz123'; // I dont need this for this click
    varTwo = '123hbz';
    varThree = 'kjsddfag'; // this gets added
    testAjax();
});

<div class="clickOne"></div>
<div class="clickTwo"></div>

Upvotes: 0

Views: 59

Answers (5)

ip_x
ip_x

Reputation: 172

A more optimized and cleaner version -

var varTwo='junk1'
var varOne='junk2'
var varThree='junk3'

function testAjax(data){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: data,
    }).done(function(data) {
        $('.result').html(data);
    });
}

$('.ajaxClick').click(function(){
    var data={};
    if(this.classList.contains('clickOne')){
        data.varOne=varOne;
        data.varTwo=varTwo;
    }else{
        data.varThree=varThree;
        data.varTwo=varTwo;
    }
    testAjax(data);

});   
<div class="ajaxClick clickOne"></div>
<div class="ajaxClick clickTwo"></div>

Upvotes: 0

user3743250
user3743250

Reputation: 89

I just wanted to add something. I often hide value inside the value attribute of the button tags to produce something like this.

I haven't been able to test this of course but I thought it was worth mentioning.

jquery:

var fields = '';

function testAjax(){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: fields
    }).done(function(data) {
            $('.result').html(data);
        });
}

$('#btn').click(function(){
    var varCount = 0;
    var vars = $(this).val().split('|');
    $.each( vars, function( key, value ) {
        varCount++;
        fields = fields + 'var' + varCount + '=' + value + '&';
    });
    fields = fields.slice(0,-1);
    $(this).val('123hbz|kjsddfag');
    testAjax();
});

html:

<button id="btn" value="xyz123|123hbz"></button>

Upvotes: 0

lokeshpahal
lokeshpahal

Reputation: 541

You can also do the same in other way with minimum line of code, you can call the ajax on click event and pass the data based on the element triggered the click event. like this:

$('.ajax').click(function(e){
 if($(this).hasClass('clickOne')){
  var data= {     varOne: 'xyz123';    varTwo: '123hbz'; }
 }else{
  var data= {     varThree : 'kjsddfag';    varTwo: '123hbz'; } 
 }
 $.ajax({
  type: "POST",
  dataType: 'json',
  url: "http://someblabla.php",
  data: data,
 }).done(function(data) {
  $('.result').html(data);
 });
 e.preventDefault();
});
<div class="ajax clickOne"></div>
<div class="ajax clickTwo"></div>

In this way you can put as many conditions for different data variable.

Upvotes: 2

Ignacio Laborde
Ignacio Laborde

Reputation: 1462

Make some like this

function testAjax(data){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: data,
    }).done(function(data) {
        $('.result').html(data);
    });
}

$('.clickOne').click(function(){
    var data= { 
    varOne: 'xyz123',
    varTwo: '123hbz',
}
    testAjax(data);
});   

$('.clickTwo').click(function(){
    var data= { 
    varThree : 'kjsddfag',
    varTwo: '123hbz',
}
    testAjax(data);
});

<div class="clickOne"></div>
<div class="clickTwo"></div>

Upvotes: 2

Andre Pena
Andre Pena

Reputation: 59336

You should be doing it like this:

function testAjax(data){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: data
    }).done(function(data) {
        $('.result').html(data);
    });
}

$('.clickOne').click(function(){
    var data {
        varOne = 'xyz123',
        varTwo = '123hbz'
    }
    testAjax(data);
});   

$('.clickTwo').click(function(){
    var data = {
        varTwo = '123hbz',
        varThree = 'kjsddfag'
     }
    testAjax(data);
});

<div class="clickOne"></div>
<div class="clickTwo"></div>

This way you absolute control over which variables are added to which ajax call. You should not use global variables unless you really need them to be global, which doesn't seem to be the case.

You can pass whatever JavaScript object to the data parameter of the ajax method.

Upvotes: 1

Related Questions