Hi, Ray... I appreciate the work you did in putting together the jQuery Mobile Quick Start Guide, but it's really just a more limited version of the Intro to jQuery Mobile found here:
http://www.ibm.com/developerworks/web/library/wa-jqmobile/ You can see the example below (attempting to work online at: http://ibm.whitestonemedia.com The trouble I'm having is with AJAX. Let me give you a scenario that should be working, it seems, but isn't and have you tell me what's wrong with it, if you would. The approach below works very well in "regular" web-apps, but not in jQuery Mobile. Let's say I have these code parts in play: ================================================================= In index.cfm: (with non-essential code stripped out) <div data-role="page" id="schedule"> <div data-role="content"> <table id="postSeasonScheduleTable"> </table> </div> </div> Here's the form in index.cfm: <div data-role="page" id="gameManager"> <div data-role="header"> <h1>Game Manager</h1> </div> <div data-role="content"> <form id="addGame"> <fieldset> <div class="ui-field-contain ui-body ui-br" data-role="field-contain"> <label for="gameType" class="select">Specify game-type:</label> <select name="gameType" id="gameType" data-theme="b"> <option value="Pre-Season">Pre-Season</option> <option value="Season">Season</option> <option value="Post-Season">Post-Season</option> </select> </div> <div class="ui-field-contain ui-body ui-br" data-role="field-contain"> <label for="gameOpponent">Opponent:</label> <input type="text" name="gameOpponent" id="gameOpponent" value="" data-theme="b" /> </div> <div class="ui-field-contain ui-body ui-br" data-role="field-contain"> <label for="gameHomeVisitor" class="select">Are you home or visitor?</label> <select name="gameHomeVisitor" id="gameHomeVisitor" data-theme="b"> <option value="H">Home</option> <option value="V">Visitor</option> </select> </div> <div class="ui-field-contain ui-body ui-br" data-role="field-contain"> <label for="gameDate">Game Date (format "Jun 4, 2011")</label> <input type="text" name="gameDate" id="gameDate" value="" data-theme="b" /> </div> <div class="ui-field-contain ui-body ui-br" data-role="field-contain"> <label for="gameTime">Game Time (format "6:45 pm")</label> <input type="text" name="gameTime" id="gameTime" value="" data-theme="b" /> </div> <button class="ui-field-contain ui-body ui-br" id="gameAddSubmit" type="submit" name="submit" value="submit">submit</button> </fieldset> </form> <script type="text/javascript"> $(document).ready(function() { $('#gameAddSubmit').live('click', function() { fnAddGame(); }); }); </script> <script type="text/javascript" src="jQuery-fnAddGame.js"></script> ================================================================= In jQuery-fnAddGame.js: // global variable declarations var gameType = null; var gameOpponent = null; var gameHomeVisitor = null; var gameDate = null; var gameTime = null; function fnAddGame() { var gameType = $('#gameType').val(); var gameOpponent = $('#gameOpponent').val(); var gameHomeVisitor = $('#gameHomeVisitor').val(); var gameDate = $('#gameDate').val(); var gameTime = $('#gameTime').val(); values = { dsn: performanceSoftball, gameType: gameType, gameOpponent: gameOpponent, gameHomeVisitor: gameHomeVisitor, gameDate: gameDate, gameTime: gameTime } $.ajax ({ cache: false, type: 'post', url: 'games.cfc?method=mAddGame&returnFormat=json', dataType: 'json', data: values, success: function(response) { if ( response.STATUS = 'Success' ) { //$('#postSeasonScheduleTable').append( response.LASTGAMEINSERTED ); alert(response.LASTGAMEINSERTED); } else { alert('Failed to add new game'); } } }); }; ============================================================================ == and in games.cfc, I have this function: <cffunction name = "mAddGame" displayname = "mAddGame" hint = "Adds Game" output = "false" returnType = "struct" access = "remote"> <cfargument name = "dsn" type = "string" required = "yes" > <cfargument name = "gameType" type = "string" required = "yes" > <cfargument name = "gameOpponent" type = "string" required = "yes" > <cfargument name = "gameHomeVisitor" type = "string" required = "yes" > <cfargument name = "gameDate" type = "string" required = "yes" > <cfargument name = "gameTime" type = "string" required = "yes" > <cfset addGameStruct = structNew() > <cfquery name="qAddGame" datasource="#arguments.dsn#"> insert into games ( gameType, gameOpponent, gameHomeVisitor, gameDate, gameTime ) values ( <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.gameType#">, <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.gameOpponent#">, <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.gameHomeVisitor#">, <cfqueryparam cfsqltype="cf_sql_date" value="#createODBCDate(arguments.gameDate)#">, <cfqueryparam cfsqltype="cf_sql_time" value="#createODBCTime(arguments.gameTime)#"> ) </cfquery> <cfquery name="qGetLastInsertedID" datasource="#arguments.dsn#"> select last_insert_id() as lastInsertedID from games </cfquery> <cfquery name="qGetLastInsertedGame" datasource="#arguments.dsn#"> select * from games where gameID = '#qGetLastInsertedID.lastInsertedID#' </cfquery> <cfsavecontent var = "lastGameInserted"> <tr style="font-size:14px;"> <td style="width:80px;">#dateFormat(gameDate, 'mmm d')#</td> <td style="width:90px; text-align:right;">#timeFormat(gameTime, 'h:mm tt')#</td> <td style="width:30px; text-align:center;">#gameHomeVisitor#</td> <td style="width:200px; padding-left:10px;">#gameOpponent#</td> </tr> </cfsavecontent> <cfset addGameStruct.STATUS = 'Success' /> <cfset addGameStruct.QGETLASTINSERTEDGAME = '#qGetLastInsertedGame#' /> <cfset addGameStruct.LASTGAMEINSERTED = '#lastGameInserted#' /> <cfreturn addGameStruct /> </cffunction> ============================================================================ == At what point would this code be incorrect for the jQuery Mobile framework? I'm getting this error in Firebug: k.attr is not a function 2].url===D;p=p!==c?p:a.mobile.defaultT...TML=E;k=I.find('[data-role="page"]' ); jquery....min.js (line 90) I'm not even getting to the "alerts" in the success section of the AJAX call, so I'm assuming the error is occurring in the AJAX line: url: 'games.cfc?method=mAddGame&returnFormat=json', I haven't been able to figure out how to modify this to get the data into the database and back onto the calling page. Could you provide some modification of this code, or provide a complete working example that you've coded, using AJAX to call a method in a CFC, and I can extrapolate from that how AJAX should be done in jQuery Mobile. I'd like to use jQuery Mobile for more limited app-like work, but I've got to get over this hump... I'd be willing to pay you or purchase something off a wish-list, whichever you prefer for your help. Thanks! Rick -----Original Message----- From: Raymond Camden [mailto:[email protected]] Sent: Wednesday, June 29, 2011 1:46 PM To: cf-talk Subject: Re: Iphone app Ok guys - here is my jQuery Mobile Quick Start: http://www.coldfusionjedi.com/index.cfm/2011/6/29/jQuery-Mobile-Quick-Start- and-new-jQuery-class On Wed, Jun 29, 2011 at 12:16 PM, Rick Faircloth <[email protected]> wrote: > > I've been wrestling over these same considerations > the last few weeks. > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:345958 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
