Solved

jquery script interferes with asp.net control's event

Posted on 2010-08-26
8
486 Views
Last Modified: 2012-05-10
I have implemented an asp.net 2.0 page with jquery tabs, several gridviews and a client script that shows/hides divs.
But the problem is that, when using ClientScript.RegisterStartupScript method, the GridView selectedindexchanged event doesn't fire anymore...
please help, code attached
aspx page: 
<script src="../Scripts/jquery-142min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-182custommin.js" type="text/javascript"></script>
    <script src="../Scripts/JScript.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $("#tabs").tabs();
        });
    </script>
asp:GridView ID="GridViewMyCases" runat="server" 
                    onselectedindexchanged="GridViewMyCases_SelectedIndexChanged" 
                    AllowPaging="False" OnRowDataBound="GridViewMyCases_RowDataBound"
                    AutoGenerateColumns="False" >

aspx.cs page:
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "hidediv", "<script type=\"text/javascript\">$('#divCaseDetails').hide();</script>");
....
}

protected void GridViewMyCases_SelectedIndexChanged(object sender, EventArgs e)
    {
        //display my case details when selected
        Session["CurrentCase"] = GridViewMyCases.Rows[GridViewMyCases.SelectedIndex].Cells[1].Text;
        GenerateCaseDetails(GridViewMyCases, GridViewMyCases.SelectedIndex, "Id Caz");
        ClientScript.RegisterStartupScript(this.GetType(), "showdiv", "<script type=\"text/javascript\">$('#divCaseDetails').show();</script>");
    }

Open in new window

aspx page: 
<script src="../Scripts/jquery-142min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-182custommin.js" type="text/javascript"></script>
    <script src="../Scripts/JScript.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $("#tabs").tabs();
        });
    </script>
asp:GridView ID="GridViewMyCases" runat="server" 
                    onselectedindexchanged="GridViewMyCases_SelectedIndexChanged" 
                    AllowPaging="False" OnRowDataBound="GridViewMyCases_RowDataBound"
                    AutoGenerateColumns="False" >

aspx.cs page:
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "hidediv", "<script type=\"text/javascript\">$('#divCaseDetails').hide();</script>");
....
}

protected void GridViewMyCases_SelectedIndexChanged(object sender, EventArgs e)
    {
        //display my case details when selected
        Session["CurrentCase"] = GridViewMyCases.Rows[GridViewMyCases.SelectedIndex].Cells[1].Text;
        GenerateCaseDetails(GridViewMyCases, GridViewMyCases.SelectedIndex, "Id Caz");
        ClientScript.RegisterStartupScript(this.GetType(), "showdiv", "<script type=\"text/javascript\">$('#divCaseDetails').show();</script>");
    }

Open in new window

0
Comment
Question by:danielivanov2
  • 5
  • 3
8 Comments
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 33537083
Do you get a JavaScript error?

Since Asp.Net renames your controls to something like GridView_MyControl you need to use wild cards with your Jquery id/names.

$('[id$=divCaseDetails]').show();

This essentially says any id that ends in divCaseDetails.
0
 

Author Comment

by:danielivanov2
ID: 33540496
I receive no error, the gridview select hyperlink simply doesn't work
Not solved even with wildcards, as proposed above (and it's not clear for me why asp.net renames controls..)
0
 
LVL 14

Assisted Solution

by:CtrlAltDl
CtrlAltDl earned 250 total points
ID: 33562430
Since SelectedIndexChanged causes a post-back maybe your "showdiv" javascript is happening before the div is rendered.

You could tell jquery to wait until the page is ready:

ClientScript.RegisterStartupScript(this.GetType(), "showdiv", "<script type=\"text/javascript\">$(document).ready(function() {$('[id$=divCaseDetails]').show();});</script>");
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 33562539
Oh you should also not hide on every Page_Load.

if (!IsPostBack)
{
     ClientScript.RegisterStartupScript(this.GetType(), "hidediv", "<script type=\"text/javascript\">$(document).ready(function() {$('[id$=divCaseDetails]').hide();});</script>");
}
0
 

Author Comment

by:danielivanov2
ID: 33564712
Didn't work.. and i need this div to be hidden and/or be shown (depending on action) for each page posback
as long as I comment out the script line, everything is ok (except show/hide div, of course)
0
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 33568509
Have you tried debugging and putting a breakpoint in SelectedIndexChanged to see if it is even triggered?
0
 

Author Comment

by:danielivanov2
ID: 33583685
the funny thing is that I have redesigned my page that I have moved the entire div that to be shown/hidden into a new aspx page, and now it is working (hiding the div in Page_Load method and firing selectedindexchanged method). But still not working when trying to show the div when selecting the gridview row..

protected void Page_Load(object sender, EventArgs e)
ClientScript.RegisterStartupScript(this.GetType(), "hidediv", "<script type=\"text/javascript\">$(document).ready(function() {$('[id$=divCaseDetails]').hide();});</script>");

protected void GridViewMyCases_SelectedIndexChanged(object sender, EventArgs e)
ClientScript.RegisterStartupScript(this.GetType(), "showdiv", "<script type=\"text/javascript\">$('[id$=divCaseDetails]').show();</script>");
0
 
LVL 14

Accepted Solution

by:
CtrlAltDl earned 250 total points
ID: 33590144
You have to wait til the document is ready for "show()" also:

ClientScript.RegisterStartupScript(this.GetType(), "showdiv", "<script type=\"text/javascript\">$(document).ready(function() {$('[id$=divCaseDetails]').show();});</script>");
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question