Can't seem to find element to append

Question

Hi I have a select box with id 'quote-area' that I want to dynamically create options for.

It's for a mobile app using jQuery mobile and HTML5.

I have a table of areas saved locally, I'm pulling them out and putting them in a for for loop constructing a html string which I then append to the select box.

Here is my JS:

               function(tx, results) {
                    len = results.rows.length;

                    var markup = [];

                    for(var i=0; i< len; i++){

                        var area_id= results.rows.item(i).area_id;
                        var label = results.rows.item(i).label;

                        markup.push("<option value='"+area_id+"'>");
                        markup.push(label);
                        markup.push("</option>");
                    }
                    alert(markup.join(""));
                    $('#quote-area').append(markup.join(""));
                }
                );

HTML:

<select name="area" id="quote-area"></select>

My alert gets run and I can see the markup has been constructed correctly. but nothing happens to my select box. I have tripple checked the selects ID.

I'm wondering if it's because the js file is loaded first then each subsequent html page is ajaxed into the DOM (jQuery mobile functionality). So when the javascipt is downloaded the select box doesn't exist yet?

Can anyone help me with this? Do I need to use some sort of live event?

UPDATE:

I've also tried using the live query plugin because I'm almost positive it because the list isn't part of the DOM when the script is loaded. But still no luck.

 $('#quote-area').livequery(function(){
     $(this).append($("<option></option>").attr("value",area_id).text(label));
 });

Is there a DOM ready event on jQuery Mobile? If so, are you using it? That would solve the problems with there being no select box in the DOM yet. — Fred, Jul 20 '11 at 11:00
I suggest you check out the answer to this question: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery — pederOverland, Jul 20 '11 at 11:06

score 1 · Answer 1 · answered Jul 20 '11 at 11:02

1

Have you tried

$(document).ready(function() { whatever(); });

This should make the code run after the page is loaded

answered Jul 20 '11 at 11:02

JSantos

1,698
22
39

Yes I call my function from within a doc ready. However the scipt is loaded then subsequent pages are pulled in via ajax so I'm not sure there is doc ready on every new page – iamjonesy Jul 20 '11 at 11:33

score 0 · Answer 2 · answered Jan 21 '13 at 23:57

With JQM you need to bid it to the page events AS PER:

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

Link here:http://jquerymobile.com/demos/1.2.0/docs/api/events.html

score 0 · Answer 3 · answered Jul 20 '11 at 11:06

If you are putting the target select box on the page through an ajax request, you should execute your code in the ajax onsuccess event. the document ready event is fired when the 'static' page is loaded, not when all ajax requests have been processed.

Can't seem to find element to append

3 Answers3