DMXzone App Connect Support Product Page

Answered

Can't get it to work with Javascript Isotope

Asked 30 Mar 2017 15:04:24
1
has this question
30 Mar 2017 15:04:24 Bruce Wilkie posted:
Whenever I use Isotope with App Connect, the dynamic data vanishes from the screen. Can see it in the HTML code, but not visible on the page. Is there a Javascript conflict or something? I'm not very experienced with Javascript so no idea what's causing it.

Code below:

##############

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DMX Test 1</title>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
.isotopeItem { border:solid 1px red; background-color: aliceblue; }
body { background-color:antiquewhite; }
</style>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
</head>

<body is="dmx-app">

<!-- COURSES FROM DATABASE -->
<h2>Courses (Dynamic)</h2>
<div class="portfolio-items isotopeWrapper clearfix imgHover neko-hover-1 tools-list">

<div class="isotopeItem col-sm-6 mb30" dmx-repeat:repeat1="showcourses.data.query1">

<article class="post clearfix">
<div class="row course-list-item">
<section class="col-md-8">
<h3><a href="course-fork-servicing.htm">{{course_name}}</a></h3>
<div dmx-html="course_intro"></div>
<p><a href="course-fork-servicing.htm" title="Click here to read about our course: Fork Servicing" class="btn btn-primary btn-sm">More details</a></p>
</section>
<section class="col-md-4">
<a href="course-fork-servicing.htm" title="{{course_name}}">
<img alt="{{course_name}}" class="img-responsive" title="{{course_name}}" dmx-bind:src="images/courses/{{course_thumbnail}}"/> </a>
</section>
</div>
</article>

</div>

</div>

<h2>FAQs (Static HTML)</h2>
<div class="row">
<div class="isotopeWrapper">
<article class="col-sm-6 isotopeItem"> <i class="icon-quote-left iconRounded"></i>
<h2>How much experience do I need to take an MCSS course?</h2>
<p>The only course that requires prior experience is the fork and shock theory course, however the relevant experience can be gained by taking the fork service and shock service courses. The courses are designed for beginners and professionals alike.</p>
</article>
<article class="col-sm-6 isotopeItem">
<h2>Can I do the courses if I’m under 18?</h2>
<p>Unfortunately, due to insurance restrictions we can’t currently accept students below the age of 18.</p>
</article>
<article class="col-sm-6 isotopeItem">
<h2>I service forks in a dealership, will I gain anything from the fork servicing course?</h2>
<p>Yes, more than likely you will. The approach to servicing forks as a suspension specialist is completely different to that of a working in dealership. Many people who have attended the courses have had prior experience but still found the course eye opening and informative. They are also a good way to refresh your memory if you have taken some time out from the industry.</p>
</article>
<article class="col-sm-6 isotopeItem">
<h2>How much experience do I need to take an MCSS course?</h2>
<p>The only course that requires prior experience is the fork and shock theory course, however the relevant experience can be gained by taking the fork service and shock service courses. The courses are designed for beginners and professionals alike.</p>
</article>
<article class="col-sm-6 isotopeItem">
<h2>Do I need to bring lunch?</h2>
<p>NO! Lunch will be provided. Please let us know if you have any dietary requirements.</p>
</article>
</div>
</div>
<!-- ################### JAVASCRIPT ###################### -->
<!-- jQuery -->
<script type="text/javascript" src="js-plugin/jquery/jquery-1.10.2.min.js"></script>
<!-- isotope -->
<script type="text/javascript" src="js-plugin/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js-plugin/isotope/jquery.isotope.sloppy-masonry.min.js"></script>
<!-- Custom -->
<script type="text/javascript" src="js/custom.js"></script>
<script src="js/modernizr-2.6.1.min.js"></script>
<dmx-serverconnect id="showcourses" url="dmxConnect/api/DMX Zone test Courses/View Courses.php" dmx-show=""></dmx-serverconnect>
</body>
</html>

################

Replies

Replied 11 Jul 2017 12:47:11
11 Jul 2017 12:47:11 Bruce Wilkie replied:
Hi Teodor

I've come back to this after a break and I'm going to try again.

When I click through to your demo at www.dmxzone.com/demo/php/AppConnectFormatter/CompanyPortfolio/index.html I can't see the products on the page anymore, but when I look at the source I can see what should be displayed on the page. Is this demo still working properly, as this is the exact same issue that I get when I try to get isotope to work with DMX Zone Server Connect and App Connect?

Bruce
Replied 20 Sep 2017 14:10:06
20 Sep 2017 14:10:06 Teodor Kuduschiev replied:
Hello Bruce,
Please check the following extension: www.dmxzone.com/go/33032/app-connect-masonry
It will solve the issues you are having, trying to call custom masonry js code.

Reply to this topic