Question

I have five $_POST hidden fields in my form that hold the id’s names of the icons the user has chosen.
I want to make these icons marked back again if the user goes back to the page.
I don’t seem to understand how to do this, (marked as PROBLEM).

var i=0;
while($('#field' + i + 1 + '_icon_id').val() != '') {
    $('img.selectable').filter(function() {
        // PROBLEM IS HERE (I THINK)
        return $(this).attr('id') == $('#field' + i + 1 +'_icon_id').val();
    }).css('border','3px solid ' + BLACK_COLOR);
    i++;
}

Besides, could anyone give me some advice as for how do I go about investigating my jQueries ? Can these be debugged ?

Thanks in advance !!

Answer 1

It depends on your browser; if you’re using a recent browser then normally you can press F12 to open up the developer window.

In Chrome, one of the Tabs is called Scripts. You can go into that screen and find your line and click the line number to set a breakpoint.
Once the breakpoint activates, you can click the button at the bottom of the screen to open the Console, and this lets you evaluate javascript functions on the fly, so you could type in

"#field' + i + 1 + '_icon_id'

and it’d display the answer.
This is what I got using firefox’s ‘Firebug’ developer window:

>>> i = 0
0
>>> '#field' + i + 1 + '_icon_id'
"#field01_icon_id"

Adding the bracketing shows this result:

>>> i = 9
9
>>> '#field' + (i + 1) + '_icon_id'
"#field10_icon_id"