Can I use update panels with jQTouch?

Question

I am using ASP.NET controls to fill in HTML for my jQTouch application, but I am having trouble with my hrefs ceasing to function as intended on my search page. The jQuery function for my anchor class evidently does not get called; it simply links back to the default page, even though the link is built similarly on other pages without any problems.

This is where my links are breaking:

<form id ="form1" runat="server" class="form">
   <asp:ScriptManager ID="ScriptManager1" runat="server" />
   <asp:UpdatePanel runat="server" ID="up1">
       <ContentTemplate>
           <ul class="rounded">
               <li><asp:TextBox ID="txtSearchString" runat="server" name="search-articles" placeholder="Search GROK"></asp:TextBox></li>
               <li><asp:Button ID="btnSearch" runat="server" Text="Search" type="rounded" OnClick="btnSearch_Click"></asp:Button></li>
           </ul>
           <asp:Literal ID="litSearchResults" runat="server"></asp:Literal> <%--HTML for jQTouch inserted here--%>
       </ContentTemplate>
   </asp:UpdatePanel>
   </form>

This is an example of the HTML generated by code behind.

<ul class="edgetoedge"><li class="sep">Found 101 articles</li><li><a href="#article" class="articleLink" id="4773">PAWS: How to Access the Sample Test Database</a></li><li><a href="#article" class="articleLink" id="6464">Mac OS X: Hardware Test</a></li><li><a href="#article" class="articleLink" id="10483">The JavaScript Test</a></li><li><a href="#article" class="articleLink" id="14110">PAWS: Emergency Text Message Test</a></li><li><a href="#article" class="articleLink" id="3659">Definition: remote digital loopback test</a></li><li><a href="#article" class="articleLink" id="4333">Definition: power-on self test</a></li><li><a href="#article" class="articleLink" id="4346">Definition: power-on self test</a></li><li><a href="#article" class="articleLink" id="14166">AVG 9.0 Free Edition: Setting Scan Process Priority</a></li><li><a href="#article" class="articleLink" id="4187">Microsoft Office 2007: Diagnostics</a></li><li><a href="#article" class="articleLink" id="7301">Moodle: Description of Aggregation Methods</a></li><li><a href="#article" class="articleLink" id="14124">AVG 9.0 Free Edition: How can I run the complete scan of whole computer?</a></li><li><a href="#article" class="articleLink" id="13758">LSU A-Z: Office of Assessment and Evaluation</a></li><li><a href="#article" class="articleLink" id="10765">Linux: sed Insert a Newline Into the RHS of a Substitution</a></li><li><a href="#article" class="articleLink" id="5193">Microsoft PowerPoint 2007: Narrating a Slide</a></li><li><a href="#article" class="articleLink" id="7401">Ubuntu:  Deleting Undeletable Files In the Trash</a></li><li><a href="#article" class="articleLink" id="10812">Linux: Remove All Digits/ Input From Inputs</a></li><li><a href="#article" class="articleLink" id="13643">SQL: Create a MySQL DocDB Databse</a></li><li><a href="#article" class="articleLink" id="5784">Linux Gnome: Screens and Graphics</a></li><li><a href="#article" class="articleLink" id="5731">Linux Xfce: Adjust keyboard settings</a></li></ul>

jQTouch handles every other tag normally, it is just the anchors that have ceased to function as intended by being placed inside this form. Can I keep using update panels here or will it inevitably break? Is there a work-around? Or am I approaching the problem incorrectly? Keep in mind I want to retain the AJAXical animations produced by jQTouch. If you find that I am unclear or you would like to see more code (I only included what I believe to be necessary), please let me know.

Bonus points if you can tell me how to get jQTouch to replace the ugly the ASP.NET button control with an iPhoney button. :)

Answer 1

I think you are going to have to do a ton of hacks to get ASP.Net working with jqtouch with update panels, as you are going to be fighting the JavaScript inserted by ASP.Net with the JavaScript that jqtouch inserts. In your example all your links are going to the same anchor (#article). To do this in a jQtouch kind of way, you would have all the the links going to '#' and handle the tap of the articleLinkClass and then adjust as you need to.

$('.articleLink').tap(function() 
{ 
    var id = $(this).val('id');
    // Pseudo CODE HERE FOR Setting up the article based on id...  E.g.
    $.json(jsonServiceUrl, { article_id: id }, function(data)
    {
        $('#article data).html(data);
    });
    jQt.goTo('article'); // Display the article page...
});

The iPhoney buttons are created in jQtouch as 's with their class as "whiteButton", i.e.:

<a id="myTestButton" class="whiteButton">Test Button</a>

Hope this helps...