I have a little problem with JQuery

I have a little problem with JQuery
0.0 0

#1

Hi all, I have a problem with JQuery and for iterator.
I will copy the code here:

for (i = 0; i < len; i++) {   
                $("#product").append('<div data-role="collapsible"><h4>' + results.rows.item(i).nome+ i +'</h4><p>' + results.rows.item(i).descrizione + '<a href="#popup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">read more</a><button id="pianta">pianta</button></p></div><div data-role="popup" id="popup" class="ui-content" style="max-width:280px"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><p> text' + i + '</p></div>');
            } 

Everything works as it should except the value of “i” when I print it within the popup.
the first time “i” is incremented correctly but within the popup it is always valid 0.

Solutions? I guess it’s something simple but I just can not understand it.
p.s I am using JQuery 1.8.0 and Jquery mobile 1.4.5


#2

You have a function inside of a loop, which is something you should avoid. If you are going to do that though, try for ( let i = 0.... Also, you’re missing a space before the plus sign: results.rows.item(i).nome+.


#3

thanks for the advice, unfortunately it does not work even declaring let instead of var.
The strange thing is that by printing here results.rows.item(i).nome+ i

i is incremented normally but here <p> text' + i + '</p>

it always remains zero.

Is there any better way to not declare the function within the for loop?


#4

Do you see any errors showing in the browser’s console (Ctrl+Shft+J in Chrome)?

Also, I do not understand what you mean by a popup. If you have more code, then please post it. For example, what is the value of len before entering the for loop? What is the value of results before entering the for loop?


#5

I’m using apache cordova. The complete code of the function is this:

 var db = window.sqlitePlugin.openDatabase({ name: "myDB.sqlite", location: "default" });
    db.transaction(function (transaction) {
        transaction.executeSql('SELECT * FROM prodotti', [], function (tx, results) {
            var len = results.rows.length, i;
            for (i = 0; i < len; i++) {   
                $("#product").append('<div data-role="collapsible"><h4>' + results.rows.item(i).nome+ i +'</h4><p>' + results.rows.item(i).descrizione + '<a href="#popup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">leggi di più</a><button id="pianta">pianta</button></p></div><div data-role="popup" id="popup" class="ui-content" style="max-width:280px"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><p id="prodotto"> text' + i + '</p></div>');
            }

            console.log("prodotti appesi");
        }, null);
    }); 

The console does not show any errors but if I print “i” in the console just before the loop is closed, “i” is printed correctly.
for popup I’m intending the jquery mobile popup widget


#6

The id attribute is supposed to be unique for all elements on a page. Make the ids for the popups unique.

For example, change the following part

<a href="#popup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">leggi di più</a>

to

<a href="#popup"' + i + '" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">read more</a>

and change the following part

<div data-role="popup" id="popup"' + i + '" class="ui-content" style="max-width:280px">

to

<div data-role="popup" id="popup${i}" class="ui-content" style="max-width:280px">

#7

Thanks Randelldawson, the problem was precisely that of the univocal id.


#8

FYI - The reason it would show the 0 is because it selected the first element with id=“popup” and that element was the one when i was 0.