74153

Bootstrap modal stops working after I sort portfolio

Question:

I am building a sortable portfolio using quicksand.js, to display more information on click I am using bootbox.js, now this is working pretty well but I recently ran into an issue. When you sort the portfolio bootbox not longer works!

<a href="http://aliensix.com/lightningbolt/" rel="nofollow"><em>You can see this in action here</em></a>, scroll to the portfolio section and click one of the images to see it function correctly. Then sort it and try again and you will see my issue.

<strong>Update:</strong> <em>Using console I found what is causing the issue but I cant fully understand the error, I had to use jquery migrate at one point to make quicksand function and that is part of the issue. Here is the error:</em>

console.trace() jquery-migrate-1.2.1.js:43 migrateWarn jquery-migrate-1.2.1.js:43 Object.defineProperty.get jquery-migrate-1.2.1.js:58 $.fn.quicksand jquery.quicksand.js:34 (anonymous function) portfolio.js:36 jQuery.event.dispatch jquery-1.9.1.js:3074 elemData.handle jquery-1.9.1.js:2750

Here is my javascript:

function gallery(){ $('#branding1').click(function() { bootbox.alert('<h4>Beach Me</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/branding1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); $('#web1').click(function() { bootbox.alert('<h4>Cloud INC.</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/web1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); $('#print1').click(function() { bootbox.alert('<h4>steampuxk co.</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/print1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); $('#branding2').click(function() { bootbox.alert('<h4>Life is Grand</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/branding2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); $('#print2').click(function() { bootbox.alert('<h4>Snapshot</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/print2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); $('#branding3').click(function() { bootbox.alert('<h4>Cityscape</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/branding3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); $('#web2').click(function() { bootbox.alert('<h4>Details</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/web2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); $('#print3').click(function() { bootbox.alert('<h4>SunnyDay</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/print3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); $('#web3').click(function() { bootbox.alert('<h4>Train Station</h4><hr><p class="subtitle"><em>Branding</em>

<img src="img/projects/web3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.

'); }); } var $itemsHolder = $('ul.thumbnails'); var $itemsClone = $itemsHolder.clone(); var $filterClass = ""; $('ul.filter li').click(function(e) { e.preventDefault(); $filterClass = $(this).attr('data-value'); if($filterClass == 'all'){ var $filters = $itemsClone.find('li'); } else { var $filters = $itemsClone.find('li[data-type='+ $filterClass +']'); } $itemsHolder.quicksand( $filters, { duration: 1000 }, gallery ); }); $(document).ready(gallery);

and my html:

<!-- Begin Portfolio --> <section id="section2"> <div class="container portfolio"> <!-- Page Title --> <div class="row page-title"> <div class="col-lg-12"> <h3>Portfolio</h3> <hr>

We also create some other stuff.

</div> </div> <!-- Portfolio Filter --> <div class="container text-center"> <ul id="filterOptions" class="filter nav nav-pills center-pills"> <li class="active"><a href="#" class="all">all</a></li> <li><a href="#" class="print">print</a></li> <li><a href="#" class="web">web</a></li> <li><a href="#" class="branding">branding</a></li> <li><a href="#" class="apps">apps</a></li> <li><a href="#" class="graphic design">graphic design</a></li> <li><a href="#" class="illustation">illustration</a></li> </ul> </div> <!-- Portfolio Items --> <div class="row"> <ul class="ourHolder no-padding"> <li class="item col-lg-4 no-padding" data-id="id-1" data-type="branding"> <a href="javascript:void(0);" id="branding1"> <img src="img/projects/thumbs/branding1.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>Beach Me</h4> <em>Branding</em> </span> </span> </a> </li> <li class="item col-lg-4 no-padding" data-id="id-2" data-type="web"> <a href="javascript:void(0);" id="web1"> <img src="img/projects/thumbs/web1.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>Chris Harbour</h4> <em>Web Design</em> </span> </span> </a> </li> <li class="item col-lg-4 no-padding" data-id="id-3" data-type="print"> <a href="javascript:void(0);" id="print1"> <img src="img/projects/thumbs/print1.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>Bildende</h4> <em>Print</em> </span> </span> </a> </li> <li class="item col-lg-4 no-padding" data-id="id-4" data-type="branding"> <a href="javascript:void(0);" id="branding2"> <img src="img/projects/thumbs/branding2.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>SK Invitational</h4> <em>Branding</em> </span> </span> </a> </li> <li class="item col-lg-4 no-padding" data-id="id-5" data-type="print"> <a href="javascript:void(0);" id="print2"> <img src="img/projects/thumbs/print2.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>Magz Killa</h4> <em>Print</em> </span> </span> </a> </li> <li class="item col-lg-4 no-padding" data-id="id-6" data-type="branding"> <a href="javascript:void(0);" id="branding3"> <img src="img/projects/thumbs/branding3.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>Synex</h4> <em>Branding</em> </span> </span> </a> </li> <li class="item col-lg-4 no-padding" data-id="id-7" data-type="web"> <a href="javascript:void(0);" id="web2"> <img src="img/projects/thumbs/web2.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>Cow</h4> <em>Web Design</em> </span> </span> </a> </li> <li class="item col-lg-4 no-padding" data-id="id-8" data-type="print"> <a href="javascript:void(0);" id="print3"> <img src="img/projects/thumbs/print3.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>Tehc9btcxh</h4> <em>Print</em> </span> </span> </a> </li> <li class="item col-lg-4 no-padding" data-id="id-9" data-type="web"> <a href="javascript:void(0);" id="web3"> <img src="img/projects/thumbs/web3.jpg" alt="..." /> <span class="portfolio-hover"> <span> <h4>Infobook</h4> <em>Branding</em> </span> </span> </a> </li> </ul> </div> </div> </section> <!-- End Portfolio -->

I havent had any luck with this if anyone could take look.

Answer1:

UPDATED: I saw that the quicksand plugin allows for a callback function.

I believe what's happening here is the elements are losing their event handlers when they get sorted due to the elements being cloned and the gallery() function only being called on (document).ready. The elements that display after being sorted are 'new' and have not got an event listener attached.

In portfolio.js, try calling the gallery() function after sorting the items via the quicksand callback argument

... // call quicksand and assign transition parameters $holder.quicksand($filteredData, { duration: 800, easing: 'easeInOutQuad' }, gallery); ...

Also, I see that you have gallery as the callback in the code you posted here, but I don't think that's the code that is running. I think portfolio.js is what's running to do the sorting.

Recommend

  • itextsharp doesn't make new page when content is longer
  • Getting null values in student.java method “student1()” from studentDAO.java?
  • Issues-parsing data to the php and jsons
  • ASP Classic SQL Multiple parameters [duplicate]
  • Mongo: If any array position matches single query
  • JTextPane and Hanging Indent Glitch
  • Signup is unable to validated in Laravel 5
  • CSS : Centering multiple lines of text in a DIV [closed]
  • How do I make my side column extend all the way to the end?
  • Simple HTML DOM - replace all occurrences of a certain word - without affecting attributes
  • php: how to get indexed array of key values [duplicate]
  • Sticky header slides down on scrolling up
  • Xamarin.Forms.CarouselView doesn't work on iOS
  • WooCommerce get attribute thumbnail - Variation Swatches and Photos plugin
  • Regular expressions: Finding BB code in a piece of text
  • vertical align pseudo element in list navigation
  • How to crawl images in Nutch?
  • How to make jQuery animate upwards
  • Transform all Array Keys with Values from another Array
  • How to make font size adapt to character length
  • jquery get the cursor position after click
  • Tagging columns as Categorical in Spark
  • Fade in/out and pause on mouse over with jQuery
  • Android gson deserialization into list
  • How to focus on a particular portion of an another html page when click on a button or link
  • Bootstrap center align two blocks of text vertically
  • In built Elastic Search analyzer which does work of Simple Analyzer as well tokenize the number
  • Jquery - Break/Prevent each loop
  • Is a collocated join (a-la-netezza) theoretically possible in hive?
  • jquery: how to find an element which is coming 2 elements before current element
  • JavaScript Creating array in object and push data to the array
  • jQuery UI Tabs - bind tabs to links on the same page
  • Img height on auto height div
  • How to display JSON data readable way for users in laravel?
  • Upgrade to g++ 4.7 (with c++11 support): any ABI incompatibility?
  • how to show filtered JSON data from two different key values in react native
  • Is there an easy way to associate an event with a ListViewItem?
  • Why does the font in these TD elements render at different sizes?
  • How to remove gaps in flexbox?
  • Flexbox equal height doesn't work