Copied to clipboard

Flag this post as spam?

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


  • kyle 36 posts 196 karma points
    Dec 06, 2021 @ 09:07
    kyle
    0

    rendering specific view based on clicked link

    Hello,

    I'm creating a timeline page for a website and have the following structure:

    <!--main content-->
    <div class="timeline-main">
    
        <h1>@Model.Value("historyAndAwardsHeader")</h1>
        <p>@Model.Value("historyAndAwardsPrompt")</p>
    
    
        <!-- timeline links-->
       <a href="">@Model.Value("timelineLinkOne")</a>
    
       <a href="">@Model.Value("timelineLinkTwo")</a>
    
       <a href="">@Model.Value("timelineLinkThree")</a>
    
       <a href="">@Model.Value("timelineLinkFour")</a>
    
       <a href="">@Model.Value("timelineLinkFive")</a>
    
    
    </div>
    
    <!--timeline item section-->
    <div>
    
        (render view here based on the clicked link...)
    
    
    </div>
    

    I want to know how a can render a view based on the clicked link? So let's say the first link is the year 2000, I want to render a view according to that timeline and so forth, I would have a different view for each link respectively...

    How can I achieve this? is my structure logical for this problem?

  • Ibrahim Nada 16 posts 137 karma points c-trib
    Dec 06, 2021 @ 09:47
    Ibrahim Nada
    100

    Hello there , you can make that happen using java script/jQuery :

    lets take the first button as example :

        <!-- timeline links-->
       <div class="timeline-item" data-url="@Model.Value("timelineLinkOne")">@Model.Value("timelineLinkOne")</div>
    
    <div id="render-div">
    
        (render view here based on the clicked link...)
    
    
    </div>
    

    then we add a click event like this:

        $(".timeline-item").click(function(){
    $('#render-div').empty();
          $.get($(this).data('url'), function(data, status){
           $('#render-div').html(data);
          });
        });
    

    This way you make a http get request to the page you want and render the ajax inside of the div u want , without even needing to reload the page.

    hope that helps

  • kyle 36 posts 196 karma points
    Dec 06, 2021 @ 12:10
    kyle
    0

    thanks a lot that worked for me! I really appreciate it

    Can you maybe have a look at my previous question? https://our.umbraco.com/forum/using-umbraco-and-getting-started/107752-how-to-create-dynamic-master-template-content

    I posted it a few days ago but have not received any responses...

    Thank you gain!

  • Ibrahim Nada 16 posts 137 karma points c-trib
    Dec 06, 2021 @ 12:26
    Ibrahim Nada
    1

    i answered it , hope it will help you , if not you can reach me on twitter to explain it further more...

    @IbrahiimNda

Please Sign in or register to post replies

Write your reply to:

Draft