CODEWITHSUNDEEP
jqueryajax
sergio
sergio

Reputation: 57

Ajax display data in order to use it later on code

before anything im sorry if the title isnt the most correct i didnt knew how to put it, what i want to achieve,

I have a website where im getting the data(books,ect) that belongs to the user logged for that im using ajax on page load :

$.post('scripts/myArt_scripts.php', {dataSession: "set"}, function(response) {
    var response = jQuery.parseJSON(response);
    var responseLength = response.length;
        alert(responseLength);
});

What im trying to do is when the data is displayed.For exemple the user as a x book and when he click on the book x name it will open the rest of the data of that book.

My question is how will i associate the name of the book to the unique idc that i also get from the ajax on load.

I tought on print create a unique id,or by innerhtml but wouldnt that be edditable by other users.

Im gettin data this way:

response[0].title
response[0].description
....
response[1].title
......

NOTE:The title will be on a "subnavar" on the leff (ex: div id:navbar) and the img description upvotes ect will be on the right (ex: div class:content)

Upvotes: 0

Views: 47

Answers (2)

Sherif Elshahat
Sherif Elshahat

Reputation: 47

as Barmar answer i think he mention best ways to do it

another stupid way :) is first ajax get just ids of books when user click make second ajax to get more details about clicked bookid you can send userid 

 $("#bookDiv").onclick(function(){

 $.post('scripts/myArt_scripts.php', {bookid: $(this).attr("data-
 bookid"),userId:userid}, function(response) {
   //Show book details returned from the server 
   })
})

Upvotes: 0

Barmar
Barmar

Reputation: 780869

There are a couple of ways you can do it.

One way is to put all the data into the HTML of the page, but hide everything except the title. When they click on the title, you simply show the DIV containing the rest of the data.

$.post('scripts/myArt_scripts.php', {dataSession: "set"}, function(response) {
    alert(response.length);
    $.each(response, function(book) {
        var bookdiv = $("<div class='book'>");
        bookdiv.append($("<div class='title'>").text(book.title))
            .append($("<div class='description'>").text(book.description).hide());
        $("#results").append(bookdiv);
    });
}, "json");

$("#results").on("click", ".book", function() {
    $(this).next(".title").toggle();
});

The other way is to just put the array in a Javascript global variable. The title can contain a data-XXX attribute with the array index, and when you click on it it looks up the object in the array, adds the appropriate elements to the DOM and displays it.

Upvotes: 1

Related Questions