After a successful Ajax post, I would like the template associated with POST in the handler to be rendered with JQuery's .load() method. The GET request keeps getting called after a successful POST ...so the template associated with GET is getting rendered instead of the one associate with POST. Thanks for any hints you can give.

Javascript:

$(function() {  
    $(".topic_submit").click(function() {  
    var topic = $("#topic").val();
    refresh = 'false'
        $.ajax({  
            type: "POST",  
            url: "/mentorlist",  
            data: {'topic': topic},  
            success: function(dataString) {  
                $('#mentor_list').load('/mentorlist');
                console.log('**mentor_list div updated via ajax.**'); 
            }  
        });  
        return true;  
    });  
}); 

HTML Form:

<form id="topic_search_form"  name="topic_search_form" action="">
 Topic:  <input id ="topic" type="text" name="topic" size="60" placeholder="Search by Keyword" />
<input type="submit" class="topic_submit" name="topic_submit" value="Search" >

After a successful Ajax post, I would like the template associated with POST in the handler to be rendered with JQuery's .load() method. The GET request keeps getting called after a successful POST ...so the template associated with GET is getting rendered instead of the one associate with POST. Thanks for any hints you can give.

Javascript:

$(function() {  
    $(".topic_submit").click(function() {  
    var topic = $("#topic").val();
    refresh = 'false'
        $.ajax({  
            type: "POST",  
            url: "/mentorlist",  
            data: {'topic': topic},  
            success: function(dataString) {  
                $('#mentor_list').load('/mentorlist');
                console.log('**mentor_list div updated via ajax.**'); 
            }  
        });  
        return true;  
    });  
}); 

HTML Form:

<form id="topic_search_form"  name="topic_search_form" action="">
 Topic:  <input id ="topic" type="text" name="topic" size="60" placeholder="Search by Keyword" />
<input type="submit" class="topic_submit" name="topic_submit" value="Search" >

• javascript
• ajax
• jquery
• web-development-server

3 Answers 3

When you call .load() in that fashion without additional data you are really just calling a simplified version of .get(). If you're trying to use the data returned from the post, you should be doing

    $.ajax({  
        type: "POST",  
        url: "/mentorlist",  
        data: {'topic': topic},  
        success: function(dataString) {  
            $('#mentor_list').html(dataString);
            console.log('**mentor_list div updated via ajax.**'); 
        }  
    });  

You don't need two subsequent requests to load the response data into your #mentor_list, you can simply call load() once and make is use POST as follows:

$(".topic_submit").click(function()
{
    var topic = $("#topic").val();
    refresh = 'false';

    $('#mentor_list').load('/mentorlist', { topic: topic });
});

.load() does allow a POST, but you have to give it a data object... try giving it a new object...

$('#mentor_list').load('/mentorlist', {});