Search jQuery

jQuery Forum

data-theme styling lost for select menus after ajax update

in jQuery Mobile • 5 months ago

I have a Form that contains a bunch of select menus and text field. I am running into an issue that, after AJAX update of a select menu, the updated select menus lost all its styling (data-themes etc.). All select menus have the same look as the first select menu before the AJAX update of the bottom 3 select menus.

Here is the html snippet:

<html xmlns:wicket="http://wicket.apache.org/">
    <head><script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-ver-1353527137996.js"></script>
    <script type="text/javascript" src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-event-jquery-ver-1353527137996.js"></script>
    <script type="text/javascript" src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1353527137996.js"></script>
    <script type="text/javascript" id="wicket-ajax-base-url">
    /*<![CDATA[*/
    Wicket.Ajax.baseUrl="newmetaprofile";
    /*]]>*/
    </script>
    <title wicket:id="pageTitle">Create Metaprofile</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script type="text/javascript" >
    /*<![CDATA[*/
    Wicket.Event.add(window, "domready", function(event) {
    Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-profileTypeRow-type","e":"change","c":"profileType","ad":true,"m":"POST"});;
    Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-oxeNodeRow-oxeNode","e":"change","c":"oxeNode","ad":true,"m":"POST"});;
    Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-rangeRow-range","e":"change","c":"range","ad":true,"m":"POST"});;
    Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-otNode","e":"change","c":"otNode","ad":true,"m":"POST"});;
    Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-site","e":"change","c":"site","ad":true,"m":"POST"});;
    ;});
    /*]]>*/
    </script>
    </head>
    <body>
    ...

    <form id="createMPForm" wicket:id="createMPForm" method="post" action="./newmetaprofile?4-1.IFormSubmitListener-createMPForm"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="createMPForm_hf_0" id="createMPForm_hf_0" /></div>

        <div data-role="fieldcontain" data-theme="b" wicket:id="profileTypeRow" id="profileTypeRow22">
            <img wicket:id="profileTypeAsteriskImg" src="images/asterisk.gif" alt="Required">
            <label for="profileType" class="select" wicket:id="profileTypeLabel">Metaprofile Type</label>
            <select name="profileTypeRow:type" id="profileType" wicket:id="type" data-theme="b">
    <option selected="selected" value="">Choose One</option>
    <option value="OXE">OXE</option>
    <option value="OXE_WITH_OT">OXE_WITH_OT</option>
    <option value="OXE_WITH_ICS">OXE_WITH_ICS</option>
    <option value="OT">OT</option>
    </select>
        </div>

        <div data-role="fieldcontain" data-theme="b" wicket:id="profileNameRow" id="profileNameRow23">
            <img wicket:id="profileNameAsteriskImg" src="images/asterisk.gif" alt="Required">
            <label for="profileName" class="select" wicket:id="profileNameLabel">Profile Name</label>
            <input name="profileNameRow:profileName" type="text" id="profileName" wicket:id="profileName" value=""/>
        </div>

        <div data-role="fieldcontain" data-theme="b" wicket:id="oxeNodeRow" id="oxeNodeRow24">
            <img wicket:id="oxeNodeAsteriskImg" id="oxeNodeAsteriskImg25" src="images/asterisk.gif">
            <label for="oxeNode" class="select" wicket:id="oxeNodeLabel" id="oxeNodeLabel26">OXE Node</label>
            <select name="oxeNodeRow:oxeNode" id="oxeNode" wicket:id="oxeNode">
    <option selected="selected" value="">Choose One</option>
    </select>
        </div>
    ...
        <div data-role="fieldcontain" data-theme="b" wicket:id="deviceTypeRow" id="deviceTypeRow2a">
            <img wicket:id="deviceTypeAsteriskImg" id="deviceTypeAsteriskImg2b" src="images/asterisk.gif" alt="Required">
            <label for="deviceType" class="select" wicket:id="deviceTypeLabel" id="deviceTypeLabel2c">Device type</label>
            <select name="deviceTypeRow:deviceType" wicket:id="deviceType" id="deviceType2d">
    <option selected="selected" value=""></option>
    <option value="NOE_A">4019</option>
    <option value="NOE_A_IP">IPTouch 4018</option>
    <option value="NOE_B_IP">IPTouch 4028</option>
    <
    </select>
        </div>

I googled and tried to append several java script fixes - none worked for me :(

document.getElementById('oxeNode').trigger('create');
document.getElementById('oxeNode').selectmenu('refresh', true);
document.getElementById('oxeNode').selectmenu('refresh', true).trigger('create');
$('#oxeNode').selectmenu('refresh', true).trigger('create');
document.getElementById('oxeNode').setAttribute('data-theme', b);
document.getElementById('oxeNodeRow24').page('destroy').page();

I am tearing my hair out, is there something I am missing here? Please help! Thanks!

Replies(8)

shimin_q

Re: data-theme styling lost for select menus after ajax update

5 months ago

Here is the screenshot of the page after the ajax update of the bottom 3 select menus:

haga0054

Re: data-theme styling lost for select menus after ajax update

5 months ago

Woah there! Settle down. Looks like you might need to read through some documentation. First off, if you are going to use JQuery Mobile, I highly recommend utilizing JQuery notation.

Second, you really should explain all those other JS files you are including. Why are you using them and what are they? You are using something called Wicket for event handling and such? Why would you want to do that.

Third, I believe the answer to your question is the following. You need to call trigger('create') on the parent when entering dynamic content.

For example, if you're going to add a new select menu to the div with class dynamicdiv, you call .trigger('create'); on that div.

EDIT: Example http://jsfiddle.net/HgNsX/

EXAMPLE:
<div class="dynamicdiv">
</div>
JAVASCRIPT
var newSelect = '<select name="select-choice-1" id="select-choice-1">' +
'<option ...' +
' ...' +
' ... </option>'+
'</select>';
$('.dynamicdiv').append(newSelect).trigger('create');

The ... above are the options. Didn't want to write a bunch out.

And that's it. In addition to my recommendation above, I would stray away from id's in JQuery Mobile. This could potentially cause problems if you aren't careful.

Your code above is very confusing, especially because it looks like you are using something you don't need. If this doesn't help please provide a better example or at least explain what's going on a bit better. Again, very confusing to see what's going on.

watusiware

Re: data-theme styling lost for select menus after ajax update

5 months ago

He's using a server-side framework called Apache Wicket.

First Prize goes to anybody who can decipher their "vison" statement:

http://wicket.apache.org/meet/vision.html

In art, negative space is the part that’s not the subject. In music, negative space is the rest. In software, negative space is all the code that you managed to avoid writing. In all three disciplines, it’s what separates what is truly excellent from what is merely good.

I dunno, but the negative space here seems to be a clear statement of what the heck this is. It has a POJO data model, whatever that is.

(Ahhhhh... It's Java. POJO = Plain Old Java Object. Explains it all! This is what is considered "simple" in the Java world...)

jQuery Mobile doesn't play well with others. Before using it with some complicated server-side framework, I would first seek out others who have done so successfully, to see if they have been able to work-around whatever assumptions it has made about the browser environment.

shimin_q

Re: data-theme styling lost for select menus after ajax update

5 months ago

Thanks haga0054 for your suggestions. In my case, the select menu in the div exists already, the ajax update simply loads the options list. I tried the trigger('create') on the parent div as you suggested:

document.getElementById('oxeNodeRow24').trigger('create');

But it still does not work

. I have searched and found quite a few posts on stackoverflow and even jquery mobile forum about mobile css style lost after ajax update (without even Wicket in the picture), so it appears the problem is unrelated to wicket. As I stated in the original post, I have tried various different solutions people posted online, without success unfortunately. Am I missing something in my attempts or is there anything else other than the java script solutions I appended above?

watusiware was correct...we have a Java app and use Apache Wicket framework as part of the requirement. Starting from Wicket 6.3 (which is the version I use), Wicket actually has JQuery under the hood for all AJAX behaviors, so there is no inherent conflict there, but that's why you see all those wicket ajax scripts included.

watusiware

Re: data-theme styling lost for select menus after ajax update

5 months ago

Wicket actually has JQuery under the hood for all AJAX behaviors, so there is no inherent conflict there,

jQuery Mobile, or just jQuery?

It's an erroneous assumption that if some backend framework uses jQuery to handle AJAX interactions that it would automatically be compatible with jQuery Mobile. In fact, quite the opposite.

I think you need to seek out those who have used Wicket with jQuery Mobile, and see what they had to do to make them play well together.

In the mean time, it would be useful to boil it down to a simple example that does not use Wicket.

haga0054

Re: data-theme styling lost for select menus after ajax update

5 months ago

Well here is how you would add/refresh your select menu.

http://jsfiddle.net/HgNsX/2/

I can see if I can reproduce your issue but it might be difficult. As was suggested try to reproduce without wicket.

shimin_q

Re: data-theme styling lost for select menus after ajax update

5 months ago

Thanks, haga0054.

Finally, there is a combination that worked:

$('#oxeNode').selectmenu();
$('#oxeNode').selectmenu('refresh', true);

It appears that I had 2 problems:

- document.getElementById() does not work
- selectmenu() has to be called first to initialize

Since I am new to JQuery Mobile, I don't know why I had these two problems in my case. Judging from the other similar posts, different developers seem to have to find different solutions to the same problem. Some solutions that are supposed to work do not work... not sure why.

haga0054

Re: data-theme styling lost for select menus after ajax update

5 months ago

Well first you should use JQuery notation, not document.getElementById()... Since JQuery Mobile requires JQuery, I would read through documentation for both.

As for different solutions I don't believe this is true. Developers may have wrong answers that work, but when adding dynamic content different elements require different refresh or create methods. This can be confusing so I understand that.

For example listview you have to call .listview('refresh');, for select menu you have to call .selectmenu('refresh');, etc.

Top Reply

Response title

Attachments

jQuery Forum

data-theme styling lost for select menus after ajax update

Replies(8)

Re: data-theme styling lost for select menus after ajax update

Re: data-theme styling lost for select menus after ajax update

Re: data-theme styling lost for select menus after ajax update

Re: data-theme styling lost for select menus after ajax update

Re: data-theme styling lost for select menus after ajax update

Re: data-theme styling lost for select menus after ajax update

Re: data-theme styling lost for select menus after ajax update

Re: data-theme styling lost for select menus after ajax update

Statistics

Tags

Actions

Related Posts