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 31 Mar 2017 07:35:34
31 Mar 2017 07:35:34 Teodor Kuduschiev replied:
Hi Bruce,
The issue is that the plugin you are using, is loading before the data is rendered on your page.
You should check the plugin documentation, and see how to initialize this, when the app connect repeat children region is rendered - using Static Events > Data > Updated.
The issue is that the plugin you are using, is loading before the data is rendered on your page.
You should check the plugin documentation, and see how to initialize this, when the app connect repeat children region is rendered - using Static Events > Data > Updated.
Replied 04 Apr 2017 08:50:47
04 Apr 2017 08:50:47 Bruce Wilkie replied:
Hi Teodor
Is it the DMX App Server plugin that’s loading before the data, or is it the Isotope plugin? I’m guessing it must be the DMX App Server, since Isotope appears to be working ok, but it’s the repeated region from App Server that isn’t showing?
I can’t see a Static Events > Data > Updated menu option in Dreamweaver. Could you let me know where to find this, and what to do with it?
Thanks
Bruce
Is it the DMX App Server plugin that’s loading before the data, or is it the Isotope plugin? I’m guessing it must be the DMX App Server, since Isotope appears to be working ok, but it’s the repeated region from App Server that isn’t showing?
I can’t see a Static Events > Data > Updated menu option in Dreamweaver. Could you let me know where to find this, and what to do with it?
Thanks
Bruce
Replied 07 Apr 2017 09:18:29
07 Apr 2017 09:18:29 Bruce Wilkie replied:
Can I get a refund now?
I've spent over a month trying to get this software to work in Dreamweaver. There's no manual, just some flashy videos showing a very limited selection of options. And it's taking too long to get replies to quick questions when I have clients waiting for results.
I've spent over a month trying to get this software to work in Dreamweaver. There's no manual, just some flashy videos showing a very limited selection of options. And it's taking too long to get replies to quick questions when I have clients waiting for results.
Replied 07 Apr 2017 09:19:35
07 Apr 2017 09:19:35 Bruce Wilkie replied:
And I know this extension was free, but I bought supporting DMXZone extensions which rely on it and the Server App, which also doesn't seem to work with other javascript
Replied 07 Apr 2017 09:57:22
07 Apr 2017 09:57:22 Teodor Kuduschiev replied:
Hello Bruce,
According to our refund conditions: www.dmxzone.com/72/refund-conditions/ i cannot process this refund request.
Our product comes with extensive video tutorials explaining every feature available.
We do not provide support for any 3rd party scripts ... i already explained you what needs to be done to run such a script along with app connect:
According to our refund conditions: www.dmxzone.com/72/refund-conditions/ i cannot process this refund request.
Our product comes with extensive video tutorials explaining every feature available.
We do not provide support for any 3rd party scripts ... i already explained you what needs to be done to run such a script along with app connect:
Replied 07 Apr 2017 11:22:43
07 Apr 2017 11:22:43 Bruce Wilkie replied:
But I don't understand what you mean Teodor. When I click on Static Events, I usually don't see any option to click on Data as it seems to depend on what I've selected elsewhere. When I click on 'Server Connect:' in the 'App Structure' box first, then I can see 'Data' when I click on 'Static Events', but then there's no 'Updated' option that appears, just 'Invalid' in the next menu. I daren't click on 'Invalid' as I don't know what that will do. I can't find it in any of the videos, nor any mention of initializing anything. Please help. I'm totally stuck 
Replied 07 Apr 2017 11:23:42
07 Apr 2017 11:23:42 Teodor Kuduschiev replied:
In your app structure click your repeat children component, not the server connect. Then you will see Static Events > Data > Updated.
Replied 10 Apr 2017 09:18:56
10 Apr 2017 09:18:56 Bruce Wilkie replied:
Hi Teodor
I've just tried that and there is no 'Data' option when I click on the 'Repeat' component (there is no 'Repeat Children' component as far as I can see). So when I click on the 'Repeat' component, the three options when I then click on 'Static Events' that I can see are 'Input', 'Keyboard' and 'Mouse'.
I've taken a screenshot. How do I send it to you or upload it here?
I've just tried that and there is no 'Data' option when I click on the 'Repeat' component (there is no 'Repeat Children' component as far as I can see). So when I click on the 'Repeat' component, the three options when I then click on 'Static Events' that I can see are 'Input', 'Keyboard' and 'Mouse'.
I've taken a screenshot. How do I send it to you or upload it here?
Replied 10 Apr 2017 09:24:53
10 Apr 2017 09:24:53 Bruce Wilkie replied:
Replied 10 Apr 2017 09:33:03
10 Apr 2017 09:33:03 Teodor Kuduschiev replied:
You should add repeat children instead of repeat in order to see it .... Just apply it on the isotope wrapper, so it repeats the items inside it.
Replied 10 Apr 2017 09:50:31
10 Apr 2017 09:50:31 Bruce Wilkie replied:
So should we never use repeat? Just repeat children?
Replied 10 Apr 2017 10:04:34
10 Apr 2017 10:04:34 Bruce Wilkie replied:
Hi Teodor. I don't have the option to Repeat Children when I select the parent div, I can only select Repeat. I'm following the DMX video guide on 'Working With Repeating Regions' and it seems to confirm that when selecting an existing element on the page, such as the parent Div in this case, then I can only Repeat the selected element. I can only repeat children if I'm starting from blank page by the looks of the manual. Can you confirm? And if so, how do I proceed?
thanks
Bruce
thanks
Bruce
Replied 10 Apr 2017 10:10:39
10 Apr 2017 10:10:39 Teodor Kuduschiev replied:
No, it is just in your case that you need to use repeat children as you need the on updated event, which is only available for repeat children. Not to mention it is more suitable in your case as you have a parent item and children items inside ...
And when you select an existing element on your page, in the app connect panel you will see "repeat children":
And when you select an existing element on your page, in the app connect panel you will see "repeat children":
Replied 10 Apr 2017 10:14:18
10 Apr 2017 10:14:18 Bruce Wilkie replied:
You mean using that button rather then going down the 'Dynamic Attributes' > 'Repeaters' > 'Repeat' route? OK, will try that. Thanks
Replied 10 Apr 2017 10:18:19
10 Apr 2017 10:18:19 Bruce Wilkie replied:
Hi Teodor
I clicked on the button, but then when I clicked on the lightning icon for 'Expression' I got an error message saying the following:
Do you know what this means? I've not heard of the 'root App node' before.
thanks
Bruce
I clicked on the button, but then when I clicked on the lightning icon for 'Expression' I got an error message saying the following:
Do you know what this means? I've not heard of the 'root App node' before.
thanks
Bruce
Replied 10 Apr 2017 10:18:20
10 Apr 2017 10:18:20 Bruce Wilkie replied:
Hi Teodor
I clicked on the button, but then when I clicked on the lightning icon for 'Expression' I got an error message saying the following:
Do you know what this means? I've not heard of the 'root App node' before.
thanks
Bruce
I clicked on the button, but then when I clicked on the lightning icon for 'Expression' I got an error message saying the following:
Do you know what this means? I've not heard of the 'root App node' before.
thanks
Bruce
Replied 10 Apr 2017 10:18:53
10 Apr 2017 10:18:53 Bruce Wilkie replied:
Replied 10 Apr 2017 10:20:23
10 Apr 2017 10:20:23 Teodor Kuduschiev replied:
The popup explains what you need to do. Click on App, in the app connect tree and enter some ID to it.
Replied 10 Apr 2017 10:25:33
10 Apr 2017 10:25:33 Bruce Wilkie replied:
Oh right, I see now. Thanks 
Replied 10 Apr 2017 10:40:17
10 Apr 2017 10:40:17 Bruce Wilkie replied:
Ok, Can now access 'Static Events' > 'Data' > 'Updated'
Looks like it adds ' onupdated="" ' to the parent div that the child div is repeating inside. I'm assuming that this is where I initialise the 'Isotope' plugin.
I've checked out their documentation at isotope.metafizzy.co/#getting-started
There appears to be three ways to initialise it as follows:
########################
Initialize with jQuery
You can use Isotope as a jQuery plugin: $('selector').isotope().
$('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
--------------------------------------
Initialize with Vanilla JavaScript
You can use Isotope with vanilla JS: new Isotope( elem, options ). The Isotope() constructor accepts two arguments: the container element and an options object.
var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
// element argument can be a selector string
// for an individual element
var iso = new Isotope( '.grid', {
// options
});
---------------------------------------------------
Initialize in HTML
You can initialize Isotope in HTML, without writing any JavaScript. Add data-isotope attribute to the container element. Options can be set in its value.
<div class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>
#############################
I'm guessing that I'll be initialising with HTML, or maybe Javascript. But I'm not sure what to type into onupdated=""
Doesn't look like any of the initialising methods can be done in one line but I could be wrong. I'm way out of my depth here as I don't know javascript.
If you're able to suggest something from the documentation that I could try I'd be really grateful
thanks
Bruce
Looks like it adds ' onupdated="" ' to the parent div that the child div is repeating inside. I'm assuming that this is where I initialise the 'Isotope' plugin.
I've checked out their documentation at isotope.metafizzy.co/#getting-started
There appears to be three ways to initialise it as follows:
########################
Initialize with jQuery
You can use Isotope as a jQuery plugin: $('selector').isotope().
$('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
--------------------------------------
Initialize with Vanilla JavaScript
You can use Isotope with vanilla JS: new Isotope( elem, options ). The Isotope() constructor accepts two arguments: the container element and an options object.
var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
// element argument can be a selector string
// for an individual element
var iso = new Isotope( '.grid', {
// options
});
---------------------------------------------------
Initialize in HTML
You can initialize Isotope in HTML, without writing any JavaScript. Add data-isotope attribute to the container element. Options can be set in its value.
<div class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>
#############################
I'm guessing that I'll be initialising with HTML, or maybe Javascript. But I'm not sure what to type into onupdated=""
Doesn't look like any of the initialising methods can be done in one line but I could be wrong. I'm way out of my depth here as I don't know javascript.
If you're able to suggest something from the documentation that I could try I'd be really grateful
thanks
Bruce
Replied 10 Apr 2017 10:46:43
10 Apr 2017 10:46:43 Teodor Kuduschiev replied:
You must initialize this with javascript/jquery, not with HTML. In the onupdated="" you should enter the function which initializes your script ...
Example:
Unfortunately we do not provide for 3rd party tools. It is up to you to adjust the initialize function which has to be used in the onupdated event.
Example:
onupdated="$('selector').isotope();"Unfortunately we do not provide for 3rd party tools. It is up to you to adjust the initialize function which has to be used in the onupdated event.
Replied 10 Apr 2017 10:57:10
10 Apr 2017 10:57:10 Bruce Wilkie replied:
OK, thanks Teodor
Tried initialising as above, but hasn't fixed the problem sadly. I guess it just doesn't work with Isotope.
Thanks for you help anyway
Bruce
Tried initialising as above, but hasn't fixed the problem sadly. I guess it just doesn't work with Isotope.
Thanks for you help anyway
Bruce
Replied 10 Apr 2017 11:03:57
10 Apr 2017 11:03:57 Teodor Kuduschiev replied:
Well, actually if it doesn't fix the issue, then you are not initializing it properly. I have used app connect with isotope and it works perfectly: www.dmxzone.com/demo/php/AppConnectFormatter/CompanyPortfolio/index.html
Replied 10 Apr 2017 11:10:58
10 Apr 2017 11:10:58 Bruce Wilkie replied:
Oh, that's encouraging. Thanks Teodor.
I'll keep trying and post up here if I find a solution to this particular instance.
cheers
Bruce
I'll keep trying and post up here if I find a solution to this particular instance.
cheers
Bruce
Replied 25 Apr 2017 11:25:39
25 Apr 2017 11:25:39 Bruce Wilkie replied:
Unfortunately after a couple more weeks of trying to get it to work, I've not been able to. Tried replicating your example, but couldn't get isotope to work even statically using the resources your page linked to.
Are you able to offer one-to-one training on how to use DMX Zone App with other jquery or javascript tools? Or do you know anybody who can?
Are you able to offer one-to-one training on how to use DMX Zone App with other jquery or javascript tools? Or do you know anybody who can?