jQuery read from text file in my web folder and append to div

Question

I'm trying to read values ("img1.jpg", etc.) from a text file on my server and append to a div to create a slide show.

The only catch is I need the first "slide" to have a class of .active applied.

Here's how my text file reads:

enter image description here

Here's the div I want to append to looks like:

 <div class="carousel-inner">
   <!-- slide -->
     <div class="active item slide3 animated fadeInUpBig">
        <img src="img1.jpg" />
     </div>
   <!-- slide -->
     <div class="item slide3 animated fadeInUpBig">
        <img src="img2.jpg" />
     </div>                           
 </div>

Here's what I tried:

$(function () {
var file = "gallery.txt"; // gallery.txt PATH

$('<div />'.load(file, function(data){ // dummy DIV to hold data 
    var line      = data.split('\n');
    var NofImages = line.length -1;        
    for( i=0; i < NofImages; i++ ){
        image = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
        $(".carousel-inner").append("<div class='active item slide3 animated fadeInUpBig'><img src='+ image +' /></div>");
    }   
}

});

You're missing a right parenthesis: `$('
').load...` – Lukas Jan 10 '13 at 16:34 — Lukas, Jan 10 '13 at 16:34

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

$(function () {
    var file = "gallery.txt"; // gallery.txt PATH

    $('<div />').load(file, function(data){ // dummy DIV to hold data 
        var line      = data.split('\n'),
            NofImages = line.length -1,
            imageURL  = '';
        for( i=0; i < NofImages; i++ ){
            imageURL = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
            $(".carousel-inner").append("<div class='item slide3 animated fadeInUpBig'><img src='"+ imageURL +"' /></div>");
        } 
        // NOW ADD THE .active TO FIRST ONE
        $('.carousel-inner').find('.item').eq(0).addClass('active');
    });
});

Difference between $.ajax() and $.get() and $.load()

edited May 23 '17 at 10:24

Community

1
1

answered Jan 10 '13 at 16:43

Roko C. Buljan

196,159
39
305
313

`.find('.item:first')` yields one less chained function call – wired_in Jan 10 '13 at 16:51
2

also, `var image` should be declared outside the for loop, other than that great answer. – wired_in Jan 10 '13 at 16:52
@wired_in +1 for declaration – Roko C. Buljan Jan 10 '13 at 16:54
one last thing, shouldn't `NofImages` be set to `line.length` instead of `line.length - 1` – wired_in Jan 10 '13 at 16:54
1

Thanks roXon! (and wired_in) – user1040259 Jan 10 '13 at 16:56
2

@wired_in no, there's an extra line (empty new line) in the file created by **Pulse CMS**, so lines N are always -1, that could be easily skipped inside the for loop but sould work that way too using `-1` – Roko C. Buljan Jan 10 '13 at 16:57
Nm, I see it in the question – wired_in Jan 10 '13 at 16:58

score 1 · Answer 2 · answered Jan 10 '13 at 16:34

1

so add a class if you are at zero

var activeClass = i==0 ? "active " : "";
$(".carousel-inner").append("<div class='" + activeClass + "item...

answered Jan 10 '13 at 16:34

epascarello

204,599
20
195
236

score 1 · Answer 3 · answered Jan 10 '13 at 16:41

Try this:

$.get("gallery.txt").done(function(response) {
    var lines = response.split("\n");
    for (var i = 0; i < lines.length; i++) {
        var fragments = lines[i].split("|");
        var html = "<div class='item animated fadeInUpBig slide3'><img src='" + fragments[2] + "' /></div>";
        $(".carousel-inner").append(html);
    }

    $(".carousel-inner .item").eq(0).addClass("active");
});

jQuery read from text file in my web folder and append to div

3 Answers3