Solved

jquery script interferes with asp.net control's event

Posted on 2010-08-26
8
493 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

 
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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)

635 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