Categories

See More
Popular Forum

MBA (4887) B.Tech (1769) Engineering (1486) Class 12 (1030) Study Abroad (1004) Computer Science and Engineering (988) Business Management Studies (865) BBA (846) Diploma (746) CAT (651) B.Com (648) B.Sc (643) JEE Mains (618) Mechanical Engineering (574) Exam (525) India (462) Career (452) All Time Q&A (439) Mass Communication (427) BCA (417) Science (384) Computers & IT (Non-Engg) (383) Medicine & Health Sciences (381) Hotel Management (373) Civil Engineering (353) MCA (349) Tuteehub Top Questions (348) Distance (340) Colleges in India (334)
See More

Alternate for nested Ajax requests

Course Queries Syllabus Queries

Max. 2000 characters
Replies

usr_profile.png

User

( 4 months ago )

 

I have one button on clicking I need multiple things need to be done, so I went for AJAX and PHP:

$('.go_nxt_lsn').live('click',function(e){
    e.stopPropagation();
    var user_id = $('input[name=user_id]').val();
    var course_id = $('input[name=course_id]').val();
    var taskName = "SaveActivity";
    var subTask = "watchvideo";
    var lesson_id = $(this).attr('data-lesson-id');
    var video_id = $(this).attr('data-video-id');
    var course_box = '.course_'+course_id;
    var refresh_boo = 1;

    $.ajax({
        type        : 'POST', 
        url         : '<?php echo $vars['url']?>learn/pages/syllabus/saveitems.php',
        datatype    : 'html',
        data        : {subtask:subTask,lessonid:lesson_id,theSubModID:video_id,userid:user_id,prodid:course_id,taskname:taskName},
        success:function(data)
        {
            taskName = "GoToNextLesson"
            $.ajax({
                type        : 'POST', 
                url         : '<?php echo $vars['url']?>learn/pages/syllabus/saveitems.php',
                datatype    : 'html',
                data        : {subtask:subTask,lessonid:lesson_id,userid:user_id,prodid:course_id,taskname:taskName},
                success:function(data)
                {   
                    $.ajax({
                        type        : 'POST', 
                        url         : '<?php echo $vars['url']?>learn/pages/syllabus/learn.php',
                        datatype    : 'json',
                        data        : {user_id:user_id,course_id:course_id},
                        success:function(data)
                        {
                            $.ajax({
                                type        : 'POST', 
                                url         : '<?php echo $vars['url']?>mod/event_calendar/views/default/event_calendar/instantlearn.php',
usr_profile.png

User

( 4 months ago )

 

The chain of Ajax calls can be set programmatically, instead of being "hardcoded" as in your code. The next snippet shows a possible approach.

However, as Piotr pointed out, you should study your application a bit more to determine whether that is a good solution.

// First generate an array with all the ajax calls than need to be done, in order.
var ajaxCalls = [

    // First ajax
    function(){
        return $.ajax({
            type        : 'POST', 
            url         : '<?php echo $vars['url']?>learn/pages/syllabus/saveitems.php',
            datatype    : 'html',
            data        : {subtask:subTask,lessonid:lesson_id,theSubModID:video_id,userid:user_id,prodid:course_id,taskname:taskName}
        });
    },

    // Second ajax
    function(data){
        return $.ajax({
            type        : 'POST', 
            url         : '<?php echo $vars['url']?>learn/pages/syllabus/saveitems.php',
            datatype    : 'html',
            data        : {subtask:subTask,lessonid:lesson_id,userid:user_id,prodid:course_id,taskname:taskName}
        });
    },

    ...

    // Last function doesn't need to return a promise
    function(data){
        $(course_box).replaceWith(data);
        $(".accordion").accordion({     
            active: false, 
            collapsible: true,
            heightStyle: "content"
        });
    }
];

// Every time you run an ajax, you want to set it up so that the next 
// ajax will be called as a response. Let's do a function for that:
function callAjax(var index){

    var thisAjax = ajaxCalls[index];

    // Run the ajax
    var promise = thisAjax();

    // Set up next one if necessary.
    var isLastAjax = (index === (ajaxCalls.length - 1));
    if(!isLastAjax){
        promise.done(function(){
            callAjax(index + 1);
        });
    }
}

// Call the first one
callAjax(0);

what's your interest