CODEWITHSUNDEEP
jqueryhtmlselectjquery-mobile
Niveditha Karmegam
Niveditha Karmegam

Reputation: 740

Jquery mobile select menu duplicating on document load

I have this simple select menu, im trying in project 

<select data-mini="true">
  <option value="small">One</option>
  <option value="medium">Two</option>
  <option value="large">Three</option>
</select>

This works fine. But I am loading my header and footer on document load (as shown below). This seems to be creating two nested select menus, sometimes this nested menu tends to go upto 3 or 4 levels.

        $(document).ready(function () {
            $('#header').load("iphoneHeader.html");
            $('#footer').load("iPadFooter.html");
        });

enter image description here

Why is this error popping? Are there any workaround for this?

Thank you!

Upvotes: 0

Views: 53

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Never use document ready with jQuery Mobile.

You should also use predefined jQuery Mobile page events.

First of all, jQuery Mobile uses Ajax to load content. Because of this, document ready will usually load before jQuery has actually loaded predefined page content. Even worse, document ready can trigger several times (more than two). This is also the case with unproperly attached click/tap events.

That's why it is important to use jQuery Mobile events.

If you want to trigger something on app start you would use mobileinit event.

$(document).on("mobileinit", function(){
  //apply overrides here
});

On the other hand, if you want to trigger something on certain page init you would use pagecreate event.

$(somePageID).on("pagecreate", function(){
  //apply overrides here
});

Find more about jQuery Mobile events here.

Upvotes: 1

Related Questions