CODEWITHSUNDEEP
javascriptjqueryhtml
user2317954
user2317954

Reputation: 85

Loading content in a target div using jquery

So the first part of the code works fine as it should be, the two grid and list view loads in the views-div when clicked, however, I want a default view shown in the views-div using jquery, I tried loading using clone and prependto but it doesn't work. any suggestion on how to do this?

note: the content I'm loading from the backend has tags and ID's so if I use the html markup to show a default content in the views-div the content repeats. So I'm hoping if use jquery to load content, the repeating will not occur.

here's a demo http://jsfiddle.net/soulsurfer/eta0uyye/

$(document).ready(function() {

$('.iw-grid-select, .iw-list-select').on('click', function() {
    var aID = $(this).attr('href');
    var elem = $('' + aID).html();
    $('#iw-grid-view').fadeOut("slow", 1000);
    $('#iw-listview').fadeOut("slow", 1000);
    $('#iw-views-div').html(elem);

});

$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
});

Upvotes: 0

Views: 202

Answers (2)

Jason
Jason

Reputation: 2743

I know that this has been resolved, but just in case anyone was wondering where OP went wrong, I have a theory.

This:

$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");

Should be changed to this:

$( "#iw-grid-view" ).find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");

If the .iw-grid-list-col element was an immediate child of #iw-grid-view, then find() wouldn't have found it when called on the return value of contents(). This is because find() searches through descendants of elements. The return value of contents(), in this case, would have included the .iw-grid-list-col element and find() would not have found it since it was a member of the array that find() was called on, rather than a descendant of a member of the array.

Removing contents() from that chain of function calls allows find() to search all of the descendants of #iw-grid-view instead of just the descendants of its immediate children.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The simplest solution could be is to trigger a click event

$(document).ready(function() {

  $('.iw-grid-select, .iw-list-select').on('click.view', function() {
    var aID = $(this).attr('href');
    var elem = $('' + aID).html();
    $('#iw-grid-view').fadeOut("slow", 1000);
    $('#iw-listview').fadeOut("slow", 1000);
    $('#iw-views-div').html(elem);
  }).first().trigger('click.view');


});
.iw-listview,
.iw-grid-view {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iw-filter-col ">
  <a href="#iw-grid-view " class="iw-grid-select ">grid view link</a>&nbsp;
  <a href="#iw-listview " class="iw-list-select ">list view link</a>
</div>
<div class="row iw-listing-view-row">
  <div class="iw-grid-view" id="iw-grid-view">Grid view content</div>
  <div id="iw-listview" class="iw-listview">list view content</div>
  <div class="iw-views-div" id="iw-views-div">Content loading column</div>
  <div id="loading"></div>
</div>

Upvotes: 1

Related Questions