Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Paul Stewart 50 posts 71 karma points
    Dec 12, 2011 @ 16:00
    Paul Stewart
    0

    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>
  • Paul Stewart 50 posts 71 karma points
    Dec 12, 2011 @ 16:05
    Paul Stewart
    0

    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"

  • gilad 185 posts 425 karma points
    Dec 12, 2011 @ 16:08
    gilad
    0

    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?

  • gilad 185 posts 425 karma points
    Dec 12, 2011 @ 16:12
    gilad
    0

    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(); 
    }); 

     

  • Paul Stewart 50 posts 71 karma points
    Dec 12, 2011 @ 16:24
    Paul Stewart
    0

    @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?.

  • Sebastiaan Janssen 5053 posts 15507 karma points MVP admin hq
    Dec 12, 2011 @ 16:33
    Sebastiaan Janssen
    0

    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/

  • gilad 185 posts 425 karma points
    Dec 12, 2011 @ 16:40
    gilad
    0

    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

  • Paul Stewart 50 posts 71 karma points
    Dec 12, 2011 @ 16:58
    Paul Stewart
    0

    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




     



     

  • Sebastiaan Janssen 5053 posts 15507 karma points MVP admin hq
    Dec 12, 2011 @ 17:22
    Sebastiaan Janssen
    0

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

  • Paul Stewart 50 posts 71 karma points
    Dec 12, 2011 @ 17:25
    Paul Stewart
    0

    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;
        });
    });
  • Paul Stewart 50 posts 71 karma points
    Dec 12, 2011 @ 17:30
Please Sign in or register to post replies

Write your reply to:

Draft