AJAX request, to change two divs content

[paddy_fields]

Hello

 

I have a 'save job' button next to my list of results, which a  user can click to add to their 'shortlist'. The AJAX I have written for this works fine... when the button is clicked it magically turns into a 'added!' message and inserts the data into the database.

 

I want to expand on this to have a seperate div on the right hand side that lists all the users shortlist entries. So when the 'save job' button is clicked, I want the AJAX request to also refresh the list on the right with the next entry.

/* AJAX code inserting a shortlist entry */


function ajaxShortlist(doSave, jobid, candidateid) {
    var ajaxRequest;    
 
try {
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer Browsers
        try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    
ajaxRequest.onreadystatechange = function () {
        var div = document.getElementById("shortlist" + jobid);
        if (ajaxRequest.readyState == 4) {
            div.innerHTML = ajaxRequest.responseText;
        } else {
            div.innerHTML = "<p>loading...</p>";
        }
    }
    var queryString = "?jobid=" + jobid + "&candidateid=" + candidateid;
    var url = "includes/shortlist.php";
    ajaxRequest.open("GET", url + queryString, true);
    ajaxRequest.send(null);
}

How do I go about writing this into my script? Do I simply need to repeat the var queryString part and make another ajaxRequest.send, or does this require an entire new AJAX script?

 

I'm a novice at javaScript... it took me a very long time to get the above working!

 

Any pointers/explanations would be great

 

Cheers

Edited February 7, 2014 by paddyfields

[paddy_fields]

From staring at the code I'm guessing that i could repeat the process, with  ajaxRequest2 = new XMLHttpRequest(); after the code first ajaxRequest (but still inside the main function), so they will execute one after the other. i'll test this and report back!
 

[gristoi]

ok, first thing, bin off all of the XMLHttpRequest crap, is old hat. Nowadays pretty much everyone uses jquery to handle this. you want to do something like this:

$(document).ready(function(){

$('#shortlist').click(function(){
     var listId = $(this).attr('id');
     var self = $(this);
    $.ajax({
         url:"your url",
         data:{id:listId},
         type:'post',
         success:function(result){
         self.html(result);
         var divOnTheRight = $('#rightList');
         divOnTheRight.append(result);
          }});
});
// you can make as many ajax requests as you want this way

hope it helps

Edited February 7, 2014 by gristoi

[gristoi]

remember you have to have jquery included at the top of your site. have a google on setting up jquery

[paddy_fields]

Gristoi, thank you for your reply.

 

Before I got round to seeing your response I got this working with the method below. I realise you've said to avoid this method, but are there any major downsides? This is the only javascript I'm using on the page so would this method be faster for page execution that including the whole jquery library?

/* AJAX code inserting a shortlist entry */

//Browser Support Code
function ajaxShortlist(doSave, jobid, candidateid) {
    var ajaxRequest; // The variable that makes Ajax possible!

    try {
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer Browsers
        try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function () {
        var div = document.getElementById("shortlist" + jobid);
        if (ajaxRequest.readyState == 4) {
            div.innerHTML = ajaxRequest.responseText;
        } else {
            div.innerHTML = "<p>loading...</p>";
        }
    }
    var queryString = "?jobid=" + jobid + "&candidateid=" + candidateid;
    var url = "includes/shortlist.php";
    ajaxRequest.open("GET", url + queryString, true);
    ajaxRequest.send(null);

    // 
    var ajaxRequest2; // The variable that makes Ajax possible!

    try {
        // Opera 8.0+, Firefox, Safari
        ajaxRequest2 = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer Browsers
        try {
            ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest2.onreadystatechange = function () {
        var div2 = document.getElementById("shortlist-list");
        if (ajaxRequest2.readyState == 4) {
            div2.innerHTML = ajaxRequest2.responseText;
        } else {
            div2.innerHTML = "<p>loading...</p>";
        }
    }
    var url2 = "includes/shortlist2.php";
    ajaxRequest2.open("GET", url2, true);
    ajaxRequest2.send(null);
}

[paddy_fields]

hi again, Gristol

 

I'm trying to get your way working

 

At the moment I have the jobId being passed inside the function - onclick="AjaxShortlist(12)"

 

How do I pass the jobId with your method?

 

I can see you have 'var listId = $(this).attr('id');

 

But I don't understand what that is calling?
 

Edited February 11, 2014 by paddyfields