jquery query string creation issue

Question

in my php page i use jquery code to make it dynamic and i have problem in creating query string and my small sample of code is.

$.listSemester = function(selStreamId) {
    var obj = { year: $( "#batches option:selected" ).text() };
    $.ajax({
        url:"searchStream.php?" + $.param(obj),
        data:{
            streamId:selStreamId,
        },
        success: function(data) {
            $('#sem').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}

i want to pass variable year in query string and it's value coming from another jquery code. my full jquery code is.

$(document).ready(function() {
    $('.sidebar-menu .system').addClass('active');
    $('.sidebar-menu .system .student').addClass('active');
    $(".sidebar-menu .system").tree();
    $('#streams').change(function() {
        $('#branches').html("<option value=''>-- Select --</option>");
        $('#batches').html("<option value=''>-- Select --</option>");
        $('.divAfter').hide();
        $('.divBefore').show();
        $('.semesterAfter').hide();
        $('.semesterBefore').show();
        $('.btnAdd').hide();
        $('.btnExcel').hide();
        $('.studList').hide();
        if($(this).val() == '') {
        }
        else {
            $.when($.streamSelection($(this).val())).then($.listSemester($(this).val()));
        }
    });
    $('#branches').change(function() {
        $('#batches').html("<option value=''>-- Select --</option>");
        $('.divAfter').hide();
        $('.divBefore').show();
        $('.semesterAfter').hide();
        $('.semesterBefore').show();
        $('.btnAdd').hide();
        $('.btnExcel').hide();
        $('.studList').hide();
        if($(this).val() == '') {
        }
        else {
            $.branchSelection($(this).val());
        }
    });
    $('#batches').change(function() {
        if($(this).val() == '') {
            $('.divAfter').hide();
            $('.divBefore').show();
            $('.semesterAfter').hide();
            $('.semesterBefore').show();
            $('.btnAdd').hide();
            $('.btnExcel').hide();
            $('.studList').hide();
        }
        else {
            $('.divBefore').hide();
            $('#division').val('');
            $('.divAfter').show();
        }
    });
    $('#division').change(function() {
        $('.studList').hide();
        $('.semesterAfter').hide();
        $('.semesterBefore').show();
        $('.btnAdd').hide();
        $('.btnExcel').hide();
        if($(this).val() != '') {
            $('.semesterBefore').hide();
            $('#sem').val('');
            $('.semesterAfter').show();
        }
    });
    $('#sem').change(function() {
        $('.btnAdd').hide();
        $('.btnExcel').hide();
        $('.studList').hide();
        if($(this).val() != '') {
            $.when($('.btnAdd').attr('href', 'add.php?streamId='+$('#streams').val()+'&branchId='+$('#branches').val()+'&batchId='+$('#batches').val()+'&divisionId='+$('#division').val()+'&semId='+$('#sem').val()))
            .then($('.btnExcel').attr('href', 'studExcel.php?streamId='+$('#streams').val()+'&branchId='+$('#branches').val()+'&batchId='+$('#batches').val()+'&divisionId='+$('#division').val()+'&semId='+$('#sem').val()))
            .then($('.btnAdd').show())
            .then($.studentList($('#streams').val(),$('#branches').val(),$('#batches').val(),$('#division').val(),$('#sem').val()));
        }
    });
});
$.streamSelection = function(selStreamId) {
    $.ajax({
        url:"searchBranch.php",
        data:{
            streamId:selStreamId
        },
        success: function(data) {
            $('#branches').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}
$.branchSelection = function(selBranchId) {
    $.ajax({
        url:"searchBatch.php",
        data:{
            branchId:selBranchId,
        },
        success: function(data) {
            $('#batches').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}
$.listSemester = function(selStreamId) {
    var obj = { year: $( "#batches option:selected" ).text() };
    $.ajax({
        url:"searchStream.php?" + $.param(obj),
        data:{
            streamId:selStreamId,
        },
        success: function(data) {
            $('#sem').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}
$.studentList = function(streamId,branchId,batchId,divisionId,semId) {
    $.ajax({
        url:"searchStudent.php",
        data:{
            selStreamId     :   streamId,
            selBranchId     :   branchId,
            selBatchId      :   batchId,
            selDivisionId   :   divisionId,
            selSemId        :   semId
        },
        success: function(data) {
            $('.studList').html(data);
            $('.studList').show();
            if(data.length > 0)
                $('.btnExcel').show();
        },
        error: function(error) {
            alert(error);
        }
    });
}

now it's pass noting in query string.

alert or console.log the value of obj and see whether you are getting the right value in the variable — Amal Ts
– Amal Ts, Commented Feb 18, 2016 at 6:50
place a keyword debugger; above your ajax call line ie: after your ` var obj = { year: $( "#batches option:selected" ).text() };` line of code. And when you are in the page open browser console and the run whatever that will trigger this ajax post. your debugger will be hit and just type this int console $.param(obj) and it will give you the result. — Rajshekar Reddy
– Rajshekar Reddy, Commented Feb 18, 2016 at 6:51
No option element has been selected when $.listSemester is called ? — guest271314
– guest271314, Commented Feb 18, 2016 at 6:57

Barmar · Accepted Answer · 2016-02-18 07:07:28Z

You can't use this in callback functions, it's not saved in closures. Create a local variable.

Also, the argument to .then() must be a function, otherwise you'll call $.listSemester immediately, not when the AJAX call returns.

$('#streams').change(function() {
    var $this = $(this);
    $('#branches').html("<option value=''>-- Select --</option>");
    $('#batches').html("<option value=''>-- Select --</option>");
    $('.divAfter').hide();
    $('.divBefore').show();
    $('.semesterAfter').hide();
    $('.semesterBefore').show();
    $('.btnAdd').hide();
    $('.btnExcel').hide();
    $('.studList').hide();
    if($this.val() == '') {
    }
    else {
        $.when($.streamSelection($this.val())).then(function() {
            $.listSemester($this.val());
        });
    }
});

And since the argument to $.when() needs to be a Deferred, you need to return a value from $.streamSelection().

$.streamSelection = function(selStreamId) {
    return $.ajax({
        url:"searchBranch.php",
        data:{
            streamId:selStreamId
        },
        success: function(data) {
            $('#branches').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}

Or, since you're just interested in the value, you could just save that in a variable.

$('#streams').change(function() {
    var $thisVal = $(this).val();
    $('#branches').html("<option value=''>-- Select --</option>");
    $('#batches').html("<option value=''>-- Select --</option>");
    $('.divAfter').hide();
    $('.divBefore').show();
    $('.semesterAfter').hide();
    $('.semesterBefore').show();
    $('.btnAdd').hide();
    $('.btnExcel').hide();
    $('.studList').hide();
    if($thisVal == '') {
    }
    else {
        $.when($.streamSelection($thisVal)).then(function() {
            $.listSemester($this.val());
        });
    }
});

You need to make similar fixes to other functions.

@guest271314 Good catch, I've shown how to fix that problem.

Collectives™ on Stack Overflow

jquery query string creation issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related