Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery script interferes with asp.net control's event

Posted on 2010-08-26
8
Medium Priority
?
494 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 1000 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
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 1000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

661 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