foreach click jquery issue - Razor

Paul Stewart 50 posts 71 karma points

Dec 12, 2011 @ 16:00

foreach "click()" jquery issue

Hey everyone I have a interesting issue here. The code I am working on is working! but! to a certain extent...

I created 3 media items to be displayed, what its suppose to do is you click on the company logo you show the text and hide the siblings within the "testimonials" div. 2 of which work fine, but the latest media item that is added does not function at all. I even tested using alert boxes to proof that the latest item isnt working.

ClickAction Macro

@using umbraco; @using umbraco.cms.businesslogic.media; @{ int mediaId = int.Parse(Parameter.mediaId.ToString()); //1115; Media gallery = new Media(mediaId); <script type="text/javascript"> $(document).ready(function () { $("#testimonials div.hide").hide(); @foreach (dynamic banner in gallery.Children) { string id = "click" + Model.MediaById(mediaId).Id; string linkId = "show" + Model.MediaById(mediaId).Id; mediaId = banner.Id; @: $("#@id").click(function(){ @: $("#testimonials div.@linkId").show().siblings().hide(); @: }); } }); </script> }

I have 3 Items in my media section which it feeds in the company logo, client name and client testimonial, which works fine, but its the actual jQuery, the actual issue is that latest item does not function at all, but it writes no problem..

Rendered HTML& Scripts

<script type="text/javascript">
    $(document).ready(function () {
        $("#testimonials div.hide").hide();

             $("#click1115").click(function(){ 
               $("#testimonials div.show1115").show().siblings().hide();
             });
             $("#click1122").click(function(){ 
               $("#testimonials div.show1122").show().siblings().hide();
             });
             $("#click1123").click(function(){ 
               $("#testimonials div.show1123").show().siblings().hide();
             });
    });
    </script>

<div id="testimonials">
            <div class="show1122 hide">
            <div class="testimonials_top">
                <div class="testmonials_bottom">
                        <div>
                           <p>Some text insert here of item 2..  </p>
                            <span>
                                B&amp;Q - Britains biggest DIY retailer
                            </span>
                        </div>
                </div>
            </div>
            </div>
           <div class="show1123 hide">
            <div class="testimonials_top">
                <div class="testmonials_bottom">
                        <div>
                            <p>Some text insert here. item 3</p>
                            <span>
                                B&amp;Q - Britains biggest DIY retailer 2
                            </span>
                       </div>
                </div>
            </div>
            </div>
            <div class="show1130 hide">
            <div class="testimonials_top">
                <div class="testmonials_bottom">
                        <div>
                            <p>Some text insert here. item 3</p>
                            <span>
                                Mr someone from B&amp;Q
                            </span>
                        </div>
                </div>
            </div>
            </div>
    </div>

Copy Link

Paul Stewart 50 posts 71 karma points

Dec 12, 2011 @ 16:05

Sorry I posted old rendered HTML in the post from a different window.. all the classes and rendered should all be the exact same. "show1130"

Copy Link

gilad 185 posts 425 karma points

Dec 12, 2011 @ 16:08

the classes in the script and the classes in the html is not the same...

$("#click1115").click(function(){ 
    $("#testimonials div.show1115").show().siblings().hide();
});

<divclass="show1130 hide">

maybe this is the problem?

Copy Link

gilad 185 posts 425 karma points

Dec 12, 2011 @ 16:12

anyway... it will be batter if you do something like this :

give all the buttons same class and use this :

$(".yourClass").click(function(){
  $("#testimonials div."+$(this).attr("id")).show().siblings().hide(); 
});

Copy Link

Paul Stewart 50 posts 71 karma points

Dec 12, 2011 @ 16:24

@using umbraco; @using umbraco.cms.businesslogic.media; @{ int mediaId = int.Parse(Parameter.mediaId.ToString()); //1115; Media gallery = new Media(mediaId); <script type="text/javascript"> $(document).ready(function () { $("#testimonials div.hide").hide(); @foreach (dynamic banner in gallery.Children) { string id = "click" + Model.MediaById(mediaId).Id; string linkId = "show" + Model.MediaById(mediaId).Id; mediaId = banner.Id; @: $("#@id").click(function(){ @: $("#testimonials div.@linkId").show().siblings().hide(); @: }); } }); </script> }

This is what am using the now.. I tried testing your code, the divs wont function hide / show what am i missing?.

Copy Link

Sebastiaan Janssen 5057 posts 15514 karma points MVP admin hq

Dec 12, 2011 @ 16:33

I would advise you not to render dynamic javascript from Razor, it gets really messy really fast.

In general, what you want to do is find all divs with the same class and for each of them, on click, show/hide the siblings. You shouldn't need to generate any javascript in razor for that. Unfortunately, I'm not so fast at javascript, so I can't give you an example, but fiddle a bit and you should be able to figure it out.

Update: Maybe something like this will work for your needs: http://jsfiddle.net/UkRNL/1/

Copy Link

gilad 185 posts 425 karma points

Dec 12, 2011 @ 16:40

hii paul...

where are you bulding the buttons for show/hide?

you should set them all same class.

each button should have an ID as same as the DIV to show class...

then you dont need all the razor javascript part and you can use the example :

$(".yourClass").click(function(){
  $("#testimonials div."+$(this).attr("id")).show().siblings().hide(); 
});

hope it is understood

Copy Link

Paul Stewart 50 posts 71 karma points

Dec 12, 2011 @ 16:58

Hey Sebastian, the example is good, but cause its in different areas of a website its causing more issues.. Gilad, am trying to understand how it picks up the id of the div of which i like to display.. Am still at the beginner stages of jQuery

Copy Link

Sebastiaan Janssen 5057 posts 15514 karma points MVP admin hq

Dec 12, 2011 @ 17:22

Paul: well, just make it the same for the other areas, or use a unique classname for this area, whatever you need to do.. :-)

Copy Link

Paul Stewart 50 posts 71 karma points

Dec 12, 2011 @ 17:25

Mean am trying to both on 2 files now.. Seem to getting closer with yours now Sebastian.. This is what i have done.. but Its making 2 of the last items as display block and adding the class open and the first item is not showing what so ever at all?

$(document).ready(function () {
    $('#testimonials > div.itemTest').hide();
    $('.clientImage > img').click(function () {
        $('.open').hide();
        $('#testimonials > div.itemTest').next().fadeIn('slow').addClass('open');
        return false;
    });
});

Copy Link

Paul Stewart 50 posts 71 karma points

Dec 12, 2011 @ 17:30

Sebastian : http://jsfiddle.net/UkRNL/26/

Copy Link

is working on a reply...

Flag this post as spam?

foreach "click()" jquery issue