add some info in docs on rendering custom-select loaded in with Ajax

[frequent]

I more or less got desperate trying to enhance a custom select menu pulled in via Ajax. The docs say forcing a rebuild can be done by

 $('select').selectmenu('refresh', true);

but while this seems to work with static content, dynamic elements don't play along (for example here, here ).

I tried to render a customselect which I had pulled in via Ajax. The only way it worked inside my success-handler is like this: :

var sel = $('.ui-page-active').find('select'),
wrapSel = $(sel).closest('.wrapper'),
newSel = $(sel)
    .clone()
    .attr('data-native-menu',false)
wrapSel.find('.ui-select').remove().end()
    .append( newSel );
newSel.closest('.ui-btn').trigger('create');

I have pretty much tried calling everything in the book on the wrapping ui-btn, ui-select and the select itself.

   selectmenu('refresh', true)
   selectmenu('refresh')
   selectmenu()
   trigger('refresh')
   page()

I could only get the Ajax-in select to render correctly with the above clone and split up order. Using any of the other methods or trying to chain breaks it again.

Not sure this really is a bug, but it sure is difficult and maybe deserves a look or some more info in the docs.

[MauriceG]

Hi @frequent !
I would like to see your code when pull in data via ajax and refresh your select.
For example:
$("#select").load("data.php", { what: "all" }, function(){ $("#select").selectmenu('refresh', true); });
will wait until the data is arrived to refresh the select.
Or I've got you wrong?

[frequent]

Hi @MauriceG

ok. This is for a registration form with 3 types of accounts. The inital page just has a radio with type A,B,C. On change, I'm pulling the respective forms from a file called registry.cfm

My function binding an call:

$(document).on('change',"[name=form_type]", function() {
    // id of select will be parameter in Ajax call for which form to load
    var param = $(this).attr('id');                 
    ajaxUpdate( "../templates/tmp_registry.cfm", $('.registryWrapper'), param );
    })

Ajax call (and I'm still experimenting with the CSS3 effects and overall settings):

var ajaxUpdate = 
    function update( from, target, param ) {    
    $.mobile.showPageLoadingMsg();
    $.ajax({
        async: true,
        type: 'GET',    
        returnFormat: 'json',
        data: { value: param },
        url: from,
        timeout: 7500,
        success: function(data) {
                target.addClass('.fade.out')
                                .html(data)
                                    .trigger('create')
                                        .removeClass('.fade.out')
                                            .addClass('.fade.in');
                $.mobile.hidePageLoadingMsg();

                // this renders everything perfectly, expect for the select. 
                // I'm now thinking if I can find select(s) from html(data)
                // to add data-native-menu="false" before triggering create.

                // === for SELECT only ===
                var page = target.closest('div:jqmData(role="page")');                 
                if ( !$.support.touch ) {
                    var sel = page.find('select');
                    for (i=0; i< sel.length;i++) {  
                        if ( $(sel[i]).attr('enhanced') == true ){
                            return;
                            } else {
                            var  wrapSel = $(sel[i]).closest('li'),
                                   newSel = $(sel[i])
                                        .clone()
                                            .attr('data-native-menu',false)
                            wrapSel.find('.ui-select').remove().end()
                                    .append( newSel );
                            newSel.closest('.ui-btn')
                                    .trigger('create')
                            }
                     // === end SELECT only ===
                    }       
            }
        // cleanup
        window.setTimeout(function() {
            target.removeClass('.fade.in');             
            },300);
        },
    error: function (XMLHttpRequest, textStatus, errorThrown) {}
    });
}

I want to set data-native-menu depending on support.touch, so I can't just write it into the markup. As I'm calling trigger create after pulling in the data, the question would be, if I can somehow add data-native-menu before calling trigger('create') the first time. Should also work and would save a chunk of code.

So to your question. I'm rendering after the data has arrived. Not sure what's better - sending a big chunk of enhanced data or processing it on the device. For now, I'm sending pre-enhanced markup.

[MauriceG]

the ajax call is asynchronous async: true. Success is may executed to late.

[MauriceG]

Du bist ja in meiner Zeitzone !

[jaspermdegroot]

hello neighbours!

@frequent

Maybe this fiddle helps you: http://jsbin.com/itikad/8/
When you manipulate the state/options/value/etc. of a selectmenu you use .selectmenu("refresh");
When you create a whole new custom select menu you use .trigger("create");

Good night all ... zzzzz
Jasper

[frequent]

@MauriceG - und Du in meiner :-) Danke für die Infos. Ich verlasse jetzt die Zeitzone.add( @uGoMobi ).goodnight()

[jaspermdegroot]

$.(" @MauriceG + @frequent ").trigger("sleep");

[MauriceG]

function call succeded ... system is down ...

[frequent]

@uGoMobi - not quite, but I have found a nicer solution:

When the Ajax call returns data (my html form), I'm now doing this:

 success: function(data) {
     // insert the native menu before calling trigger('create')
     var makeUp = data.replace("<select", "<select data-native-menu='false' ");
     target.addClass('.fade.out')
           .html( makeUp )
                .trigger('create')
                   ...

So I gues because the select box received the initial trigger('create') treatment without *data-native-menu, triggering it a 2nd time did not do anything. Come to think, I lock up some plugin elements, too, so they are not re-enhanced multiple times in case some events bubble around in the DOM.

Anyway, I'm having a nice customselect menu now. Thanks for help!

Regarding the issue: Would it make sense to add info to the docs, that dynamically generated selects need trigger('create') vs. dynamically modified selects need *selectmenu('refresh')? Otherwise we should close this again.

[jaspermdegroot]

hi @frequent

Great that you managed to get the custom select the way you wanted!

Regarding the docs; the information is there (http://jquerymobile.com/test/docs/forms/docs-forms.html) but maybe it is not clear enough. I noticed in other threads too that people don't know what to use.

@agcolom and @MauriceG are doing a great job on improving all the docs. Maybe they can give it a look.

[toddparker]

@uGoMobi - Can this issue be closed now that the PR has landed?

[jaspermdegroot]

@toddparker

The original issue "add some info in docs on rendering custom-select loaded in with Ajax" stil stands. This issue has been referenced in a comment on that PR because we could use the examples of its test page for this. I suggest to close this issue anyway, because the thread is off topic. We could open new ticket for "adding dynamically injected content examples (code + result) to docs".

[toddparker]

@uGoMobi - I agree. Mind creating a new ticket for that?