5

I've been struggling trying to link an ASP.NET Gridview to a JQuery Mobile dialog, which would be used to edit data in the Gridview.

My goal was to use the GridView to display the data. The user would click on a row, and a dialog would open a dialog with a FormView, which the user could edit the data for the selected row. I got this to work fine with a JQuery UI dialog, but when I switched to Jquery Mobile, things fell apart.

Right now the dialog flashes on the screen for a second if I run it on an iOS device, or a Blackberry. It works okay if I run it in Windows. I'm not sure what I'm doing wrong.

Here is my code for the aspx page:

   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyTest.aspx.cs"    Inherits="MySite.MyTest" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test</title>
    <style type="text/css">
        .hover
        {
            background-color: Gray;
        }
    </style>
    <script type="text/javascript">
    function clickRow() {
        //Had to put in $(document).ready or I got PostBack errors.
            $(document).ready(function () {
                $.mobile.changePage("#dialogPage", 'pop', true, true);
            });
        }
    </script>
</head>
<body>
     <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div data-role="page" id="mainpage">
        <div data-role="content">
        ...GridView goes here...
        <a href="#dialogPage" id="lnkDialog" data-rel="dialog">Click Me</a>
    </div>
    </div>        
   <div data-role="dialog" id="dialogPage">
    <div data-role="content">
        ... FormView goes here....         
    </div>

    </form>

</body>
</html>

And here is some of the code behind:

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //Allows user to click/tap anywhere on gridview row to trigger SelectIndexChange
            e.Row.Attributes["onmouseover"] = "this.oldClass = this.className;this.className='hover';";
            e.Row.Attributes["onmouseout"] = "this.className=this.oldClass;";
            e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex.ToString());
        }
    }

    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //This should open dialog
        ClientScript.RegisterStartupScript(typeof(Page), "test", "clickRow()",true);
    }

I think the problem is with the way I wrapped the $.mobile.changePage() function in the $(document).ready() function. If I didn't do that, I got postback errors. I'm not sure the right way to do this.

If I try to open the dialog using a <a data-rel="dialog"></a> link, it works fine on all devices.

Thanks for any advice.

user2480262
  • 51
  • 4
  • Just FYI, you're missing an open bracket on the (document).ready.... That's probably not it, but I can't help but notice, and I know I've spent more than enough time searching for minor little problem details like that. – RJB Jun 12 '13 at 23:33
  • Thanks. I just deleted too much when I shorted the code a bit before I posted it. The original had the bracket. – user2480262 Jun 12 '13 at 23:46

1 Answers1

0

I remember encountering a similar situation. The thing to remember is that when dealing with jQuery mobile, the script tags located within the head are not loaded on subsequent pages. Try moving your script block to within the tag that serves as the page.

Justin Ross
  • 372
  • 5
  • 15
  • Here is another posted answer that better explains: http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files – Justin Ross Jul 19 '13 at 18:15