0

I have following code in a basic page on drupal 7

<h2 id="tabs">Test Title</h2>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="content/test" data-toggle="tab"><i class="fa fa-home"></i>Test Nav</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>Content of the above internal link should display here.</p>
</div>
</div>

So, when I click "Test Nav", the content of the like which is originating from the same site should load within the div below.

EDIT: The content is from another page is part of a CRM form which gets generated automatically. So what I need to load is the “content” part of that linked page. I have managed to load the page by “object load”, but that loads the entire webpage. I do not need the menu, header, footer. Just the content part of it. Hope this clears the query.

Can anyone suggest a way to do it please?

  • 1
    Ajax. What have you tried? – Kevin Feb 15 at 13:20
  • I am just end user, no idea of ajax, But googled some things and tried to include this on top of the div, but no luck. <script> $(document).ready(function(){ $("nav nav-tabs").click(function(){ $("#tab-content").load("content/test"); }); }); </script> – Tapash Feb 15 at 13:28
  • @Tapash, give me more data, what kind of content type it is? is an entity reference in another content type? – Yusef Feb 16 at 19:30
  • @Yusef thanks for your reply. I have edited my question. – Tapash Feb 19 at 8:50
  • @Tapash could you please add your ajax code that fetch the page? another question, is that CRM Drupal? it that yours that can create custom template? – Yusef Feb 19 at 10:00
2

You can use jQuery $.load() to load a section of a page:

(function($, Drupal) {
  function loadContent(context) {
    $(context).find("#the_container_div").once("arbitrary-key", function () {
      // $(this) refers to #the_container_div
      $(this).load("http://example.com #container");
    }
  }

  Drupal.behaviors.someArbitraryButUniqueKey = {
    attach: function (context) {
      loadContent(context);
    }
  };
}(jQuery, Drupal));

The function loadContent() loads the content of the #container div at the page example.com into your local container of #the_container_div.

Not the answer you're looking for? Browse other questions tagged or ask your own question.