Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery script interferes with asp.net control's event

Posted on 2010-08-26
8
Medium Priority
?
495 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 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
Industry Leaders: 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!

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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 Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)
Suggested Courses

916 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