CODEWITHSUNDEEP
phpjqueryhtmltwigoctobercms
Ayus Salleh
Ayus Salleh

Reputation: 153

Display data from Twig without reload the page

First of all i want to ask about how can i make my code to be able for the user when clicked the a href then it will display {{media.content}} by hiding other result of looping.

Right now, user of cms need to create a new pages just to call the component for viewing specific pages and it involved some coding that they dont know. 

{% set medias = __SELF__.medias %}
<div class="post-list">
    {% for media in medias %}
    <script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById("demo").innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "/about/media-room/media-coverage", true);
      xhttp.send();
    }
    </script>

    <div class="post-item">
        <h3 class="oc-text-title"><a id="demo" class="link_orange" onclick="loadDoc()">{{ media.title }}</a></h3>
        <p class="oc-text-paragraph">{{ media.published_at|date('j F Y') }}</p>

        {% if media.introductory %}
        <!--<p class="introductory">{{ media.introductory|raw }}</p>-->
        {% else %}
        <!--<div class="content">{{ media.content|raw }}</div>-->
        {% endif %}
    </div>
    {% else %}
    <span class="no-data">{{ noMediasMessage }}</span>
    {% endfor %}
</div>

{{ medias.render|raw }}

So how can i make this happen without need to create a new pages by clicking an a href then it will goes to its respected content?

See pictures below

Here is the all looping result

Looping

And i want to make the a href view the content like this without need to load pages. just hide the looping and view its content

Content view

Upvotes: 0

Views: 971

Answers (1)

DarkBee
DarkBee

Reputation: 15614

This is how you could solve this. Instead of fetching the content by ajax, place it already inside the html and use some javascript to toggle it's container.

	$(function() {
		$('.post-item h3 a.link_orange').on('click', function(e) {
			$(this).parent().next().next().slideToggle();
		});
	});
	.hidden {
		display : none;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="post-list">
    {% for media in medias %}
		<div class="post-item">
			<h3 class="oc-text-title">
				<a class="link_orange">{{ media.title }}</a>
			</h3>
			<p class="oc-text-paragraph">{{ media.published_at|date('j F Y') }}</p>

			{% if media.introductory %}
				<p class="hidden introductory">{{ media.introductory|raw }}</p
			{% else %}
				<div class="hidden content">{{ media.content|raw }}</div>
			{% endif %}
		</div>
    {% else %}
		<span class="no-data">{{ noMediasMessage }}</span>
    {% endfor %}
</div>

Upvotes: 1

Related Questions