Simplifying an ajax script in my HTML

Question

I'm using Twitter Bootstrap and I'm working on a page that has several tabs that all have carousels in them (each with a ton of images) I've managed to write an AJAX script that pulls the images from a JSON file I've created (for one of the carousels). I'm planning on making similar JSON file for the rest, but what I'm wondering though is there a way to write the AJAX script so that it grabs the id from the HTML so I don't have to make a unique AJX script for each version of the carousel

Here's how my HTML looks for the carousel:

    <div id="ShaluCarousel1b" class="carousel slide"><!-- class of slide for animation -->
        <div class="carousel-inner" id="carousel1b">

        </div><!-- /.carousel-inner -->
    </div>

And here's my AJAX script:

<script>
    $.ajaxSetup({
            error: function(xhr, status, error) {
                alert("An AJAX error occured: " +status + "\nError: " +error);
            }
        });
    $.ajax({
        url:'json/carousel1b',
        type:'GET',
        success: function(data){
            console.log('grabbing photos');

            var totalPictures = data['totalPictures'];
            for (var i=0; i<totalPictures; i++) {
                console.log("new image");

                if(i<1){
                    console.log("first image");

                    var d = "<div class='item active'>";
                    d += "<a href='" +data.pictures[i]['photo'] +"' rel='prettyPhoto'>";
                    d += "<img src='" +data.pictures[i]['photo'] +"' >";
                    d += "</a>";
                    d += "</div>";

                $('#carousel1b').append(d);
                }

                else {
                    console.log("image" +i);

                var d = "<div class='item'>";
                    d += "<a href='" +data.pictures[i]['photo'] +"' rel='prettyPhoto'>";
                    d += "<img src='" +data.pictures[i]['photo'] +"' alt=''>";
                    d += "</a>";
                    d += "</div>";

                $('#carousel1b').append(d);

                $("a[rel^='prettyPhoto']").prettyPhoto();
                    console.log('pp init');


                }
            }   
        }
    })
</script>

I'm basically wondering if there is a way to pull the id (carousel1b) from the htnl and inject it into the AJAX strip in the "url:'jason/carousel1b and the "$('carousel').append(d)"

When do you decide to load the AJAX? Is it when the user clicks on a link? Or when the page loads? — Jonny Sooter
– Jonny Sooter, Commented Jul 29, 2013 at 20:57
I was looking to do it when the user clicks on a link - I ended up taking your answer and modifying it a bit. I actually have a bit of a challenge in that there are tabs within tabs... I think I have it mostly working now though — Mike
– Mike, Commented Jul 31, 2013 at 18:21

Jonny Sooter · Accepted Answer · 2013-07-29 21:18:17Z

Depending on when you want to make the ajax request, you'll need to modify the first line of my example. Currently it just gets all of them. You might want to change it so that it gets only the div that was clicked, or whatever. Anyways here's one way you could do that:

$('div[id*="carousel"]').each(function() { //The *= selector gets all the divs with an id that contains carousel anywhere in the id.
    var $this = $(this), //Here we select the right div
        id = $this.attr('id'); //And grab the id of the div

    $.ajax({
        url: 'json/' + id,
        //You don't need to set type: GET, the GET is the default.
        success: function(data) {
            //blah blah blah...
            $this.append(d); //Boom done!
        }
    });
});

The way you have your success function set up, you're appending and changing the DOM each time that for loop goes around, and it goes around for every image. That's not good because DOM manipulations are quite expensive performance wise. So if you have 100 images, you're append one at a time - 100 times. The better way to do that would be do all your stuff and save to a variable, string, or object, then append once outside the loop.

Here's an example of what I mean:

var totalPictures = data['totalPictures'],
    d = ""; //We add "d" outside

for (var i=0; i<totalPictures; i++) {
    if(i<1){
        d = "<div class='item active'>";
        d += "<a href='" +data.pictures[i]['photo'] +"' rel='prettyPhoto'>";
        d += "<img src='" +data.pictures[i]['photo'] +"' >";
        d += "</a>";
        d += "</div>";
    } else {
        d += "<div class='item'>"; //Added a += here so that it'll add onto the first picture
        d += "<a href='" +data.pictures[i]['photo'] +"' rel='prettyPhoto'>";
        d += "<img src='" +data.pictures[i]['photo'] +"' alt=''>";
        d += "</a>";
        d += "</div>";
    }
}

$('#carousel1b').append(d); //Here we append a single time outside the loop
//This cuts our appends down from totalPictures to 1.
//What may seem like a small change will make a huge difference

$("a[rel^='prettyPhoto']").prettyPhoto(); //I assume you'll need this outside since it depends on the appended content

Hey Jonny thanks for the help. One small "bug". $('#carousel1b').append(d); should be $('#' +id).append(d); otherwise it worked great. I'd upvote but I can't yet :\ — Mike
– Mike, Commented Jul 30, 2013 at 1:23

Stack Exchange Network

Simplifying an ajax script in my HTML

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Simplifying an ajax script in my HTML

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions