Sign in Register
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
    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?

    Copy Link
  • Ibrahim Nada 22 posts 168 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

    Copy Link
  • kyle 49 posts 240 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!

    Copy Link
  • Ibrahim Nada 22 posts 168 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

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies