rendering specific view based on clicked link

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

kyle 49 posts 240 karma points

Dec 06, 2021 @ 09:07

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?

Copy Link

Ibrahim Nada 22 posts 168 karma points c-trib

Dec 06, 2021 @ 09:47

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

Copy Link

kyle 49 posts 240 karma points

Dec 06, 2021 @ 12:10

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!

Copy Link
Ibrahim Nada 22 posts 168 karma points c-trib

Dec 06, 2021 @ 12:26

1

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

@IbrahiimNda

Copy Link
is working on a reply...

Please Sign in or register to post replies