Using jquery in a user control

[FishGuy]

Hi,

I am trying to get some jquery to run but I have a feeling it is not working like the tutorial because I am wanting to run it in a user control rather than on the page.

This is the code for the control jquery

<&#37;@ Control Language="C#" AutoEventWireup="true" CodeFile="SearchOutlines_j.ascx.cs" Inherits="usercontrols_SearchOutlines_j" %>
<%@ Register TagPrefix="A" TagName="HelpIcon" Src="~/usercontrols/HelpIcon.ascx" %>
       <script src="../../scripts/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () 
    {
        $(".detail").hide();

        $(".header").click(function () 
        {
            $(this).next(".detail").slideToggle(300);
        });
    });
</script>

and here is the code with the divs i am wanting to show/hide

 <div id="listing-container" class="listing-container">
                     
                    
                           <asp:Repeater ID="Repeater1" runat="server"
                               onitemcommand="Repeater1_ItemCommand">
                               <HeaderTemplate>
                              <table class="coursetable1" border="0" cellpadding="0" cellspacing="0"> <tr><th class="leftcol" scope="col">TITLE</th><th scope="col">TYPE</th><th scope="col">CODE</th><th scope="col">DAYS</th></tr></HeaderTemplate>
                               <ItemTemplate>
                               <tr><td class="leftcol"><asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Outlines/Outlines.aspx" oncommand="CourseCodeClick" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Code")%>'><%# DataBinder.Eval(Container.DataItem, "Description")%></asp:LinkButton></td>
                               <td><img alt='<%# DataBinder.Eval(Container.DataItem, "Type")%> Course' title='<%# DataBinder.Eval(Container.DataItem, "Type")%> Course' src='../Outlines/images/<%# DataBinder.Eval(Container.DataItem, "Type")%>.jpg' /></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Code")%></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Duration")%></td>
                               <td><div id="header">Detail</div></td></tr>
                               <tr><td><div id="detail">fish</div></td></tr>
                               </ItemTemplate>
                               <AlternatingItemTemplate>
                               <tr class="altrow"><td class="leftcol"><asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Outlines/Outlines.aspx" oncommand="CodeClick" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Code")%>'><%# DataBinder.Eval(Container.DataItem, "Description")%></asp:LinkButton></td>
                               <td><img alt='<%# DataBinder.Eval(Container.DataItem, "CourseType")%> ' title='<%# DataBinder.Eval(Container.DataItem, "CourseType")%> ' src='../Outlines/images/<%# DataBinder.Eval(Container.DataItem, "Type")%>.jpg' /></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Code")%></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Duration")%></td></tr>
                                                     </AlternatingItemTemplate>
                                <FooterTemplate>
	   </table>
   </FooterTemplate>

                           </asp:Repeater>

                        

               
                    </div>

Has anyone any experience of jquery in user controls on bound items?

EDIT:

I have also added the code

<div id="courseheader">fish</div>
<div id="coursedetail">chips</div>

directly after the script tags. The chips also do not get hidden so the problem definately stems from it being a user control and not because of the repeater. I am also using master pages which could be affecting it!

[motil]

Hi.

the problem is not lain in the master page/user control/whatever.. they all render as native HTML at the end...

by doing this:

  $(".detail").hide();

you tells jQuery to hide all elements inside the page that has "detail" class.
in your repeater there is no "detail" class only "detail" ID:

<div id="detail">fish</div>

if you'll change it to this

<div id="detail" class="detail">fish</div>

it should work. if you want to use the ID's for your hiding / toggling task change the "." with "#" just like CSS selectors.

beside this you have another problem here:

 $(".header").click(function () 
        {
            $(this).next(".detail").slideToggle(300);
        });

I'll break it down for you:

 $(".header").click = when ever an element that has the class "header" getting click do this callback
$(this) = group of elements
.next('.detail').slideToggle(300); = go to the next sibling (of that group elements) that has the class ".detail" and toggle it.

so far so good, but this is the group of elements you activate the click on:

<td><div id="header">Detail</div></td></tr>
<tr><td><div id="detail">fish</div></td></tr>

The problems:
A) again you try to find an element with the class "header" but it has an ID that it's name is "header" so again add to this element a class with the name "header" like so:

<div id="header" class="header">Detail</div>

B) what you're doing won't work, cause the div with the id of header has no sibling with the class ".detail"

I'll break it down for you again :

<td> <-- Parent 
         <div id="header" class="header">Detail</div>  <-- the click with execute here but this element has no siblings ... so nothing will be found. 
</td> <-- end parent
</tr>
<tr><td><div id="detail">fish</div></td></tr>

this is what you should do (I'm writing this blind so it might won't work but try it anyway)

$(".header").click(function () 
        {
            $(this).parent().parent().next().children().next().slideToggle(300);
            // or
              $(this).parent().parent().next().find('.detail').slideToggle(300); 
        });

again don't forget to add those elements classes with the the same name as their IDs

now for some performance tips:
it's very easy to abuse jQuery and make your code slow so never do this:
$(".header")...

this will cause jQuery to search all over the document;
instead warp the elements you work with with some container like:

<div id="MyContainer">
 <div class='detail'> hee </div>
</div>

and call it like this:

$("#MyContainer .header")...

I could go on and on about performance tip but I'm too tired right now and I still need to work

just post here if you need some more help.

[gep13]

As a point of interest motil...

Would this:

$(".detail").hide();

If there are no items with that class result in a JavaScript error on the page, or does jQuery handle that silently?

Gary

[FishGuy]

Thanks that helped alot, I now have a basic interpretation working
at the top of my control

<script type="text/javascript">
                 $(document).ready(function () {
                     $(".msg_body").hide();
                     $(".msg_head").click(function () {
                         $(this).next(".msg_body").slideToggle(300);
                       

                     });
                 });
</script>           
              <div id="msg_head" class="msg_head">fish</div>    
                   <div id=".msg_body" class="msg_body">Bread</div>

Like you mentioned it needed the class name not the id. I have tried to get it to work with id but no luck, however I have been reading that I may need to find what name ASP gives the controls when rendered as they can change.

My problem now is taking this further and getting it to work in the repeater control, currently if I move the divs the msg_body one stops being hidden (or toggle).

I also tried 
$("#listing-container .msg_body").hide();
AND
$("#Repeater1 .msg_body").hide();[/

lising-container is a wrapper class which goes around the repeater control, it is worth noting that there are many other wrapper divs around these objects also.

If you can see, what I am wanting to achieve is a repeated list and if a user clicks on an item row in the repeated list I intend to drop down some further detail about that row.

[motil]

@Gary: No there will be no "object null" exception, jQuery take care of most javascript exceptions for you, which in most cases can be good thing but sometimes it turns to debugging hell

@FishGuy can you please post here the render result of your repeater (or at least the first 2-3 rows) and the javascript / jQuery code ?

[FishGuy]

If I do view source on the page it just looks like this, presumably because it contains is a web user control.

<div id="maincontent_SearchCourseOutlines1_UpdatePanel1">
<div id="searchcourse-searchbutton-container" class="left-button-container">
 <input type="image" name="ctl00$maincontent$SearchCourseOutlines1$ImageButton1" id="maincontent_SearchCourseOutlines1_ImageButton1" src="CourseOutlines/images/buttons/find-a-course.gif" />
 </div>
<div id="course-listing-container" class="course-listing-container">                    
</div>                  
</div>

The actual code in the control looks like

     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate><div id="search-searchbutton-container" class="left-button-container">
                        <asp:ImageButton ID="ImageButton1" runat="server" 
                            ImageUrl="~/Outlines/images/buttons/find-a-course.gif" 
                            onclick="ImageButton1_Click" />
                    </div>

                   <div id="listing-container" class="listing-container">
                     
                    
                           <asp:Repeater ID="Repeater1" runat="server"
                               onitemcommand="Repeater1_ItemCommand">
                               <HeaderTemplate>
                              <table class="table1" border="0" cellpadding="0" cellspacing="0"> <tr><th class="leftcol" scope="col">TITLE</th><th scope="col">TYPE</th><th scope="col">CODE</th><th scope="col">DAYS</th></tr></HeaderTemplate>
                               <ItemTemplate>
                               <tr><td class="leftcol"><asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Outlines/Outlines.aspx" oncommand="CourseCodeClick" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Code")%>'><%# DataBinder.Eval(Container.DataItem, "Description")%></asp:LinkButton></td>
                               <td><img alt='<%# DataBinder.Eval(Container.DataItem, "Type")%> Course' title='<%# DataBinder.Eval(Container.DataItem, "Type")%> Course' src='../Outlines/images/<%# DataBinder.Eval(Container.DataItem, "Type")%>.jpg' /></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Code")%></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Duration")%></td>
                               <td></td></tr>
                               <tr><td>
                               <div id="msg_head" class="msg_head">fish</div>
                               <div id="msg_body" class="msg_body">Gravy</div></td></tr>
                               </ItemTemplate>
                               <AlternatingItemTemplate>
                                <tr class="altrow"><td class="leftcol"><asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Outlines/Outlines.aspx" oncommand="CodeClick" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Code")%>'><%# DataBinder.Eval(Container.DataItem, "Description")%></asp:LinkButton></td>
                               <td><img alt='<%# DataBinder.Eval(Container.DataItem, "Type")%> Course' title='<%# DataBinder.Eval(Container.DataItem, "Type")%> Course' src='../CourseOutlines/images/<%# DataBinder.Eval(Container.DataItem, "Type")%>.jpg' /></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Code")%></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Duration")%></td></tr>
                                                     </AlternatingItemTemplate>
                                <FooterTemplate>
	   </table>
   </FooterTemplate>
                           </asp:Repeater>     
                    </div>
                    </ContentTemplate>
                    </asp:UpdatePanel>

The script that gets rendered is like below

<script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$maincontent$Outlines1$ScriptManager1', 'mainform', ['tctl00$maincontent$SearchOutlines1$UpdatePanel1','maincontent_SearchOutlines1_UpdatePanel1'], [], [], 90, 'ctl00');
//]]>
</script>
   
<script type="text/javascript"> 
                 $(document).ready(function () {
                     $("#Repeater1 .msg_body").hide();
                     $("#Repeater1 .msg_head").click(function () {
                         $(this).next("#Repeater1 .msg_body").slideToggle(300);
                       
 
                     });
                 });
</script>

[motil]

there is no element that has the "msg_body" or "msg_head" class in the rendered code you've posted..

[motil]

there is also control with the "Repeater1" as its ID.

[motil]

one sec do you load this user control with ajax?

[FishGuy]

Yes there is an image button in the update panel, when you click it it
it runs the code below.
This all happens within the web user control though, there is nothing at all on the hosting page except for the web user control

   protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
DALOutlines = new DAL_Outlines();
        DALOutlines.Fill_Outlines();

        Repeater1.DataSource = DALOutlines.Get_Outlines();
      
        Repeater1.DataBind();
}

[motil]

hi

try to replace this:

 $("#Repeater1 .msg_head").click(function () {
                         $(this).next("#Repeater1 .msg_body").slideToggle(300);
                     });

with this:

  $("body").delegate(".msg_body", "click", function () {
           alert('test')
           $(this).next("#Repeater1 .msg_body").slideToggle(300);
        });

it should only work when you click on an element with .msg_body class
tell me what happens

[FishGuy]

When I try that it currently throws this error.

Microsoft JScript runtime error: Object doesn't support this property or method

[motil]

1. please post the jQuery code
2. what version of jQuery are you using?

[FishGuy]

Sorry here is the jquery code

<script type="text/javascript">
                 $(document).ready(function () {
                     $("#Repeater1 .msg_body").hide();
                     $("body").delegate(".msg_body", "click", function () {
                         alert('test')
                         $(this).next("#Repeater1 .msg_body").slideToggle(300);
                     });
       
                 });
</script>         <script type="text/javascript">
                 $(document).ready(function () {
                     $("#Repeater1 .msg_body").hide();
                     $("body").delegate(".msg_body", "click", function () {
                         alert('test')
                         $(this).next("#Repeater1 .msg_body").slideToggle(300);
                     });
       
                 });
</script>

I was previously using v1.41, which was throwing the error, I am now using v1.5 and it no longer throws the error as before. The div still does not get hidden or toggle but when clicking on the msg_body the alert does appear!

[motil]

this is the reason i've putted the alert there, I guessed it will happen
my guess it happens because there is no element with the ID of "Repeater1" , ASP.NET change the id while the page was rendered...

try to replace:

 $(this).next("#Repeater1 .msg_body").slideToggle(300);

with this

$(this).next().slideToggle(300);

what version of .NET do you use ? with .NET 4 you can set the Controls IDs to be static.

[FishGuy]

Same result unfortunately, I click the head div and the alert appears, but initially the body div is not hidden and the head click does not toggle the body.

<script type="text/javascript">
                 $(document).ready(function () {
                     $(".msg_body").hide();
                     $("body").delegate(".msg_head", "click", function () {
                         alert('test')

                         $(this).next().slideToggle(300);
                     });
       
                 });
</script>

[motil]

add this lines after the alert('test') and tell me the result:

alert($(this).next().html());
$(this).next().hide();

<div id="msg_head" class="msg_head">fish</div>
<div id="msg_body" class="msg_body">Gravy</div></td></tr>

[FishGuy]

I copied the code and the result was -

the text displayed in the alert was "null"
no items appeared to be hidden

[FishGuy]

Sorry I missed your markup, I have changed the HTML to as below, the alert box now displays the text "peas" , however no items still hide or toggle.

 <td></td><td><div id="msg_head" class="msg_head">fish</div><div id="msg_body" class="msg_body">peas</div></td></tr>

[motil]

do you still have the toggle line under the hide() line ?
if it display the text of the element it should also hide the element unless there is some code that quickly show the element again.

[FishGuy]

Thanks, definately making progres now.

The code is as below, initially the body is displayed but on clcicking the head it now slides to hidden and toggles to show again when clicked again.

I now need to make the body hidden initially, I tried the following but it through an error.

$("body").delegate(".msg_body").hide();

I also need it to appear like the head is inline with the rest of the table row and the body appears below the row (like a new line), currently it appears in the same column row .

<script type="text/javascript">
                 $(document).ready(function () {
                      $(".msg_body").hide();
                     $("body").delegate(".msg_head", "click", function () {
                        
                         $(this).next().slideToggle(200);

                     });
       
                 });
</script>

<ItemTemplate>
                               <tr><td class="leftcol"><asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Outlines/Outlines.aspx" oncommand="CodeClick" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Code")%>'><%# DataBinder.Eval(Container.DataItem, "Description")%></asp:LinkButton></td>
                               <td><img alt='<%# DataBinder.Eval(Container.DataItem, "Type")%> Outline' title='<%# DataBinder.Eval(Container.DataItem, "Type")%> Outline' src='../Outlines/images/<%# DataBinder.Eval(Container.DataItem, "Type")%>.jpg' /></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Code")%></td>
                               <td><%# DataBinder.Eval(Container.DataItem, "Duration")%></td>
                               <td></td><td><div id="msg_head" class="msg_head">fish</div><div id="msg_body" class="msg_body">peas</div></td></tr>
                           
                               </ItemTemplate>

[motil]

if you need ".msg_body" to be hidden when the page first loading then you don't need javascript for that.

just set it inside the css style:

.msg_body{display:none}

as for your seconds qustion i didn't 100&#37; understood what you need, screen shot maybe?

[FishGuy]

Cool, thats the initial visibility sorted.

Below I have tried to illustrate the look, you see the table has rows and the end column is the head, if you click on the head I want the body to slide out below that row i.e. ocupy width of the table.

However it seems that if the two divs are not together and there is any markup between then it fails. I.e. i was thinking I could put

date | outline |type| Button (msg_head)
---------------------------------------
date | outline |type| Button (msg_head)
---------------------------------------
date | outline |type| Button (msg_head)
Description (msg body)~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~
---------------------------------------
date | outline |type| Button (msg_head)
---------------------------------------
date | outline |type| Button (msg_head)
---------------------------------------

 <tr><td></td><td></td><td><div id="msg_head" class="msg_head">fish</div></td></tr><div id="msg_body" <td>class="msg_body">peas></td></tr></div>

[motil]

Hi,

I'm not trying to be rude or insulting but what you have there is really bad design. as you see you are struggling to get this layout working they you want, and it will be nightmare to maintain it or change it in the future.

From your description I still don't really understand what you want but i'm guessing you want some like

<-- Head -->
------------    --
|    body    | < -- toggled 
------------

If you wish to keep the design you have there you'll have to put the body in side another TableRow
and a TableCell (TD) with colspan attribute ...

but then you'll also have to change the jQuery syntax.

[motil]

Ok I made an example for you:

Javascript:

<script>
     $(function () {
         $("body").delegate(".msg_head", "click", function () {
             $(this).parent().parent().next().find('.msg_body').slideToggle(200);
         });
     });
 </script>

CSS:

<style type="text/css">
 .msg_body{display:none;}
 #MyTable {width:500px;}
 </style>

HTML:

 <table id="MyTable">
        <tr>
            <td>Data</td><td>outline</td><td>type</td><td><input type="button" id="MyButton" class="msg_head" value="click" /></td>
        </tr>
        <tr>
            <td colspan="5"  >
                <div class="msg_body">
                This is some content blah blah blah blah ...... wooooo weeeee
                </div>
            </td>
        </tr>
    </table>

Hope that helps.

[FishGuy]

I am trying to recreate this effect.

as you can see there is an image which changes from down arrow to up arrow when clicked and extra information drops down along with changing the row background and adding another row header at the bottom.

http://www.qa.com/training-courses/b...anced-features

[gep13]

Isn't what you have shown there, just an extension of this:

http://jqueryui.com/demos/accordion/

Gary