Isotope javascript js basic example not working - javascript

I am trying to get Isotope javascript ) to work on a test page.
I am trying to get their example of Filtering with Isotope working. (Stackoverflow not allowing me to post a link as I'm new to posting on here...!)
I have copied their example HTML, CSS and vanilla JS into a test page here on my domain: http://chrislydon.co.uk/testiso.php
(A php file because I want to test adding items from a MySQL DB once the basic thing is working!)
I think I have everything I need: reference to the Isotope JS in the head, their JS copied to between tags - and their exact HTML (and CSS).
I am following the example which was labelled as "Vanilla JS" (as their other examples relies on JQuery (which I will implement eventually...))
I can't see what I'm doing wrong that means this verbatim copy of their example won't work....
(Tried it on different browsers - their examples work in them, but my copied example doesn't)
I'm OK with PHP/HTML but only done basic stuff in JS so perhaps I'm missing something terribly obvious!
Thanks for any help you can offer!

There were two main problems:
1) in the <head> of the document, your <script> tag is missing a >: <script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js‌​"</script>
Change to:
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js‌​"></script>
2) If the above initializer runs in the <head> of the document, there will be no document available to query and document.querySelector('.grid') will return null.
Instead, put the script just before the </body> tag.
Working jsFiddle:
https://jsfiddle.net/dptve3s6/1
Bonus: You have a function called myFunction attached to a button's onClick event, but that function is not defined anywhere. Define it, and enjoy.

Related

how to execute js functions in inline js which is added through ng-bind-html of angular js

I am new to angularjs,so I am assuming there is something simple which I am missing about this. I am facing an issue where my back-end sends some html which includes a script tag which has some js example is as under.
<!--some html-->
<script>
//some js code
caption_class_fn = function(){
$('.jwcaptions').addClass('%s')//%s as its added from backend
}
caption_class_fn()
</script>
This html is then filled into $scope.htmlval which is bound with an html element like this ng-bind-html="htmlval". The issue I am facing is that I want to execute a js function which is present in side the script tags. I tried alert, console.log but nothing seems to work. Although once the page is loaded if I try the same fucntion from console it works.Any idea how can i achieve this with minimum code change. I also tried to this solution here but this also isn't working for me.

Using javascript on loaded html

I've briefly looked to find any similar questions and found non that are alike or that I understand, so first I apologise if this is a duplicate.
My problem is that I cannot use javascript on loaded (.load) html.
I call a navbar into a div by use of:
$(document).ready(function() {
$('.nav').load("navbar.html");
});
This works perfectly and I have no problems with this.
Problems arise when I want to, for example, add a class to my loaded html code.
The script I currently use (saved in a separate .js file and called at the end of my html code):
$(document).ready(function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
Here is what I intended to happen to the loaded html code:
This is part of the navbar and is loaded through the first code snippet ^.
<li id="profile">Profile</li>
After page is loaded: (Added: 'class="active")
<li class="active" id="profile">Profile</li>
(This is part of an unordered list using bootstrap nav-tabs.)
Anyway, when I directly put this code into my html page and remove the import through javascript, I can add class's such as the 'active' class.
Additionally, I have a slider on my page which uses arrows through the use of javascript to 'slide' through the pictures and I experience exactly the same problem:
When the code is imported I cannot edit through use of javascript, but when the code is present in the actual raw html code, I can.
I don't understand why this is as I am fairly new to javascript and its syntax.
Thanks in advance, I'd be happy to answer any questions as I'm sure this isn't exactly clear because I am not entirely sure where the problem lies.
What's likely happening is that your code is trying to operate on the loaded html before it has actually loaded. Try putting it in the complete callback:
$('.nav').load("navbar.html", function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
This will make sure that the code runs after the load has completed.

How to include an external javascript file when using ExtJs?

I'm using ExtJs 4.2.2 and included all necessary js and css files, and my codes work just fine, ONLY IF I write my code into script tags within my html file. When I try to put these code into another file with .js extension and include it between head tags properly, it returns nothing. I'm sure I've included my js file properly because when I fill it with standard js codes, I get results. But with ExtJS syntax, the same code which return results within script tags, returns nothing. How? Do I miss something?
The following two are equivalent. If one works, the others work, too, regardless of what js code you use:
(Ex 1.)
<html><head>
<script>//your js code here</script>
</head><body>
</body></html>
and
(Ex 2.)
<html><head>
<script src="jscode.js"></script>
</head><body>
</body></html>
where jscode.js contains
// your js code here
Furthermore, the following two are equivalent:
(Ex 3.)
<html><head>
</head><body>
<script>//your js code here</script>
</body></html>
and
(Ex 4.)
<html><head>
</head><body>
<script src="jscode.js"></script>
</body></html>
NOTHING will change in behaviour.
I think (but you didnt post ANY code at all, so it's jsut guessing) that you had Example 3 working, but changed to Example 2. But only 3 and 4 are equivalent! And now you call that ExtJS fault!
You are executing code in an onLoad event or a Load event, perhaps like:
$(window).load(function() {
$('p').css('');
})
Remove this section and use only this in the javascript file and include it in a <Head> section:
$('p').css('');
When you are coding in html, then it execute steps one by one. But when we use a separate file then it executes it slower than HTML code.
I think I can use those technique mentioned on the top.
I am sure it will work.

How to run scripts loaded dynamically with javascript

I was wondering if there is a way to execute script within a ajax dynamically loaded content.
I've searched the web and this forum also an find a lot of answers, like
[Running scripts in an ajax-loaded page fragment
[1]: Running scripts in an ajax-loaded page fragment [1]
But none of this seems to work fine for me.
I'm not experienced as the author of the quoted post, so maybe we can find a solution more simple and quite for everyone.
For now i've implemented a tricky turnaround that smell to much of an hard-coded solution that is:
//EXECUTE AJAX REQUEST LET'S SAY SUCCESSFULLY,
$ajax([..]) //THEN
.ajaxSuccess(function(){
// LOCATE ANY OBJECT PRE-MARKED WITH A SPECIFIC CLASS
$(".script_target").each(function()
{
//DO SOMETHING BASED ON A PRESET ATTRIBUTE OF THIS SPECIFIC ELEMENT
//EXAMPLE: <div class=".script_target" transition="drop_down">...</div>
//WILL FIRE A SCRIPT RELATED TO drop_down CASE.
});
});
I know this is an ugly solution but i didn't came up with nothing better than this.
Can you help to improve this method?
Maybe there's a way to let the browser fire script within the loaded page automatically?
PS. I'm not going to use the eval() method if it's not the last solution, cause both security leak and global slowdown, AND be aware that the script launched need to modify objects loaded in the same fragment of the script.
Thanks in advance.
If I understand you correctly :
you use "load" to retrieve html content from the server, and you add it to the page.
later, you do an ajax call, and on the return of the ajax call, you want to act on the markup you added earlier
but, depending on the markup retrieved, you want to do something different in the ajax callback
So another question : before you load the markup, do you know what logic will be behind it, or do you actually need to "read" the returned HTML to understand what it will be used for ?
Otherwise maybe something like this would work :
In the callback of the "$.load" function, use $.data() to attach more information to created dom object
In the ajax callback, you should be able to access the "added" markup (with a class like you did, or with an id if possible), and read to "data" to known which behavior you should have ?
Hopefully I got your problem right, it could help if you were able to create a jsfiddle or something, just to make sure we understand it.
Hoping this helps.
EDIT : After your comment, it might be related to the selector you use when calling $.load().
There is a "Script Execution" section in the $.load documentation : http://api.jquery.com/load/ , that explains that the scripts are not executed if you add a selector in the url, like this :
$('#b').load('article.html #target');
Could this be your issue ?
Also, if possible, you could try and change your site so that instead of having the js code of each "page" of the gallery inside the page, you put it inside a separate javascript file, that you load at runtime (for example with require js).
This way, "loading" a page would be something along the lines of :
$.load("url_of_a_page_markup.html", function () {
require(["url_of_the_javascript_module.js"], function (TheJsModuleForThePage) {
TheJsModuleForThePage.doSomething();
});
});
If you structure your JS modules in a consistent way, and you define a convention for the name of markup and js files, you can generalize things so that a "gallery" manager deals with all this code loading, and you'll end up with well isolated js modules for each page.
Hoping this helps.
If you want to run a script in a ajax loaded page fragment you can use try to use jQuery.load function.
Have you considered a module loader like require.js or Lab.js?
There are many other people asking similar questions:
does anyone knows good ajax script loader
Where are scripts loaded after an ajax call?
getting jQuery scripts and content through ajax dynamically
dynamic script loader in JS
Edit: I think I misread your question. Will try and come up with a better answer. Sorry!
Best of luck to you!
I came across this same issue when I dynamically loaded some HTML to use inside a JQuery UI dialog (a help function for my application).
$('#helpMessage')
.load('./help/' + helpFile, function () {...do stuff after loading});
To make things simple I wanted to combine the unique script related to the help page within the HTML fragment that I load. Using the examples on the JQuery UI page I created a dialog with a Jquery UI button element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
(function() {
$('#myButton') // My button element
.button() // Initialize it as a JQuery UI button object
.click(function (){ // Hook up the button click event
$('#correct')[0].play(); // to play a sound in an <audio> tag
});
});
</script>
</head>
<body>
This is my help file, this is my code. This is for reading, this is for fun.
<button id="myButton">Button Text</button>
</body>
</html>
The dialog would load and the HTML displayed, but the embedded script did not execute.
I realized that one simple change would fix it. The script is embedded in an anonymous function (a best practice and part of the JQuery UI demo code). By immediately invoking the anonymous function the script executed when I loaded the HTML fragment into my main page.
This:
<script>
(function() {
...
});
</script>
Became:
<script>
(function() {
...
})(); // Immediately invoke
</script>
Niceness.

asp.net 2.0 site and location of <script/> tags causing problems/conflicting

I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.
I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.
If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):
<head>
<script jquery.js/>
<script jquery-ui.js/>
</head>
<body>
... html ...
<script type="text/javascript">
$(document).ready(function () {
$(".slider").slider( { .. options .. } );
} )
</script>
... more html *including* the .slider elements
</body>
However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.
Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)
Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).
Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.
It looks like jQuery 1.3.2 is being loaded by ASP.NET (see your second WebResource.axd). The two library versions are overwriting each other. Thus the reason it works when you load 1.6.2 at the end of the page.

Categories