Custom jQ Mobile 1.4.3 build gives "$.mobile.textinput is undefined" error during config

[adammessinger]

In my current jQM project, I'm making changes to $.mobile.textinput.initSelector on mobileinit -- an approach which works fine with the default full build of the framework. With a custom build that includes the textinput widget, I get the error "$.mobile.textinput is undefined".

Here are my checked selections for the custom build:

Animation Complete jqmData Defaults Helpers Init Namespace Support Tests Orientation support test Touch support test Virtual Mouse (vmouse) Bindings Widget Factory Page Creation Navigate Orientation Change Throttled Resize Touch Events Buttons: Link-based Fieldcontainers Controlgroups Textarea Autosize Buttons: Input or button-based Checkboxes & Radio Buttons Text Input Clear Button Form Reset Selects Slider Slidertooltip Text Inputs & Textareas Content Management Base Tag History Manager Navigate Method Navigation Manager Path Helpers Content Management Transition Concurrent Transition Handlers Transition Serial Transition Core Pop Transition Degrade Inputs Link Classes Match Media Polyfill “nojs” Classes Zoom Handling iOS Orientation Change Fix First & Last Classes Collapsible Collapsible Sets (Accordions) Toolbars: Fixed Toolbars: Fixed: Workarounds Listview Loading Message Dialog styling Panel Popups popuparrow Toolbars: Fixed

[agcolom]

@adammessinger Thank you for reporting this issue. However, this is the repository for the jquerymobile.com web site. I will close this and would be grateful if you could reopen this issue under https://github.com/jquery/jquery-mobile/issues/ Many Thanks.

[agcolom]

@adammessinger Actually, this may be the correct place if the cause is the download builder... I will reopen for now and will transfer later if this needs to go under jquery-mobile.

[adammessinger]

This is the repository that the download builder links to for issue reporting, so if such things don't belong here then that link should be changed. Anyway, I learned that 1.4.4 was released after I posted this. I'll give it another try with that version later tonight to see if it still happens.

[gabrielschulhof]

@adammessinger I've reproduced it with 1.4.4. For some reason some parts of jQuery Mobile (including textinput) end up loading after init, so mobileinit will have been triggered by then. js/jquery.mobile.js should prevent this from happening in principle.

[gabrielschulhof]

AFAICT this has never worked. i.e., it's not a regression. I've tried custom builds all the way back to 1.1.2, and the triggering of "mobileinit" always ends up earlier than the definition of "mobile.textinput".

[gabrielschulhof]

@gseguin I was thinking that it might be better for the download builder to request a bundle like this:

config = {
  ...
  exclude: /* jquery and stuff we already exclude */.concat( /* checkboxes that are not checked */ ),
  include: "jquery.mobile"
  ...
};

instead of

config = {
  ...
  exclude: /* jquery and stuff */
  include: /* checkboxes that are checked */
  ...
};

So, basically we include "jquery.mobile", and exclude not only jquery, but all the checkboxes the user hasn't checked. That ensures that jquery.mobile.js is used for dependency management. This, in turn, ensures that init goes last, because of the nested define()/require() structure of jquery.mobile.js.

I've mostly gotten this to work, but for some reason, when I use @adammessinger's settings with this modification, widgets/forms/textinput is not added to the build, even though both the requested extensions (autogrow and clearBtn) are added to the build. I'm also running into amd-builder problems producing the zipball. All kinds of problems with relative/absolute paths etc.

I'll keep investigating, but I thought I'd run this idea by you, because, aside from the missing textinput widget, the build seems to correctly place init at the end. Maybe you know of a better, faster way to implement this, and I'm sure your local amd-builder setup is far more reliable, allowing you to test this include/exclude setup more efficiently.

[gabrielschulhof]

@gseguin I've poked around some more, but I'm beginning to think that you can solve this much faster than I can.

[cme813]

/* The following basic Html formatting Tags are supported within Text, Button and List controls. For more advanced text formatting use a WebView control.

<a href="..."> <b>,  <big>, <br>, <div>, 
<font color="..." face="...">
<h1>,  <h2>, <h3>, <h4>,  <h5>, <h6>
<i>,  <img src="...">,  <p>, <small>
<strong>, <sub>, <sup>, <tt>, <u>

*/

//Called when application is started. function OnStart() { //Create a layout with objects vertically centered. lay = app.CreateLayout( "linear", "VCenter,FillXY" );
lay.SetBackground( "/Sys/Img/StarField.jpg" );

//Button with image in between chars.
var text = "<big><b>Andr<img src='/Sys/Img/AScript.png'>id</b></big>";
btn = app.CreateButton( text, 0.6, -1, "Html" );
btn.SetTextSize( 20 );
btn.SetPadding( 0.03, 0.02, 0.03, 0.02 );
btn.SetMargins( 0, 0.03, 0, 0 );
btn.SetTextColor( "#aaaaaa" );
btn.SetTextShadow( 20, 5,10, "#000000" );
lay.AddChild( btn );

//Button with image at end.
var text = "Explode <img src='/Sys/Img/Explode1.png'>";
btn = app.CreateButton( text, 0.6, -1, "Html" );
btn.SetTextSize( 30 );
btn.SetPadding( 0.03, 0.02, 0.03, 0.02 );
btn.SetMargins( 0, 0.03, 0, 0 );
btn.SetTextColor( "#888888" );
btn.SetTextShadow( 20, 5,10, "#000000" );
btn.SetOnTouch( btn_OnTouch );
lay.AddChild( btn );

//Create a text with formatting.
var text = "<p><font color='#77CECF'>A <i>long</i> time ago, " + 
"in a galaxy <br><small>far,<small> far away...</small></small></font></p>" + 
"It is a period of civil war. <font color='#00aa00'>Rebel</font> " + 
"<tt>spaceships</tt>, striking from a <u>hidden</u> " +
"base, have won their first victory " +
"against the <big><i><font color='#ff0000'>evil</font></i></big> " + 
"<a href='http://www.google.co.uk/search?q=galactic+empire'>" + 
"Galactic Empire&#8482;</a>";
txt = app.CreateText( text, 0.8, -1, "Html,Link" );
txt.SetMargins( 0, 0.02, 0, 0 );
txt.SetPadding( 0.03, 0.03, 0.03, 0.03 );
txt.SetTextSize( 20 );
txt.SetTextColor( "#F7E273" );
lay.AddChild( txt );

//Create list with formatting.
var data = 
    "Luke Skywalker:Actor^c^ <font color='#77CECF'>Mark Hamill</font><br>" + 
    "<i>(Cool dude with a Lightsaber)</i>:null" +
    ",R2D2:Actor^c^ <font color='#77CECF'>Kenny Baker</font><br>" + 
    "<i>(Luke's loyal robot companion)</i>:null";
lst = app.CreateList( data, 0.8, 0.25, "Html" );
lst.SetMargins( 0, 0.02, 0, 0 );
lst.SetBackColor( "#77444444" );
lst.SetTextColor( "#cccccc" );
lst.SetEllipsize1( "end" );
lst.SetTextSize( 18 );
lst.SetTextShadow1( 2, 2,4, "#000000" );
lst.SetTextShadow2( 1.5, 2,4, "#000000" );
lst.SetDivider( 0.002, "#222222" );
lst.SetOnTouch( lst_OnTouch );
lay.AddChild( lst );

//Add layout to app.    
app.AddLayout( lay );

}

//Called when user touches our 'explode' button. function btn_OnTouch() { //Lets have some fun! layExp = app.CreateLayout( "linear", "VCenter,FillXY" );
imgBack = app.CreateImage( null, 1.0, 1.0 ); layExp.AddChild( imgBack ); app.AddLayout( layExp ); player = app.CreateMediaPlayer(); player.SetOnReady( player_OnReady ); player.SetFile( "/Sys/Snd/Explode.mp3" ); Explode( 0 ); }

//Called when a list item is touched. function lst_OnTouch( item ) { if( item=="R2D2" ) { //Make R2D2 sounds (sort of). synth = app.CreateSynth( "VCF" ); synth.SetWaveShape( "Square" ); synth.SetVca( 10, 400, 0.8, 100 ); synth.SetVcf( 10, 400, 0.8, 100, 1000, 0.85, 2.0 ); synth.SetVcfEnabled( false ); synth.SetVolume( 0.5, 0.5 ); synth.PlayTone( 1000, 1400 ); RandomBeeps( 50 ); } }

//Make random changes to frequency and effects. function RandomBeeps( beeps ) { if( beeps!=null ) beepCount = beeps; else beepCount--;

if( beepCount > 40 )
{   
    if( Math.random()>0.4 ) {
        synth.SetVcfEnabled( false );
        synth.SetFrequency( 500 + 500*Math.random() );
    }
    else { 
        synth.SetVcfEnabled( true  );
        synth.SetFrequency( 200 * Math.random() );
    }
    setTimeout( RandomBeeps, 100+2*Math.random() );
}
else if( beepCount==40 ) {
    freq = 3600; 
    add = ( Math.random()>0.6 ? 30 : -30 );
    synth.SetWaveShape( "Sin" );
    synth.SetVcfEnabled( false ); 
    setTimeout( RandomBeeps, 0 );
}
else if( beepCount > 0 ) { 
    //if( beepCount==20 ) add = -add;
    synth.SetFrequency( freq+=add );
    setTimeout( RandomBeeps, 2 );
}

}

//Show an animated explosion. function Explode( startFrame ) { if( startFrame!=null ) explodeFrame = startFrame;

if( explodeFrame < 5 ) {
    var file = "Explode" + (++explodeFrame) + ".png";
    imgBack.SetImage( "/Sys/Img/" + file, 1 );
    setTimeout( Explode, 100 );
}
else { 
    explodeFrame = 1;
    app.DestroyLayout( layExp );
    player.Release();
    setTimeout( "btn.SetVisibility( 'Show' )", 1000 );
}

}

//Play explosion sound and vibrate. function player_OnReady() { player.Play(); app.Vibrate( "100,80" ); btn.SetVisibility( "Hide" ); }