Solved

jquery script interferes with asp.net control's event

Posted on 2010-08-26
8
488 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
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.

 
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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
$q.all is slower or not  in  Angularjs 2 21
jQuery - Add confirm message to button? 2 19
jQuery on Submit 4 36
googleapis - jQuery.com and so forth 3 11
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
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)

790 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