I'm having a weird bug where load() is breaking my carousel.
I have a Slick Slider with 3 slides. You can click the NEXT button to move to the next slide. You can also click the slide itself and it loads content into the div of a cat and some text using:
$('.frame').load(url);
The bug is that after you view the loaded content and click BACK, the NEXT button no longer works. Somehow it breaks the nav. I've tried show() and hide() but that doesn't help.
Please see my codepen demo
And this is the url I'm loading into that demo if you find that useful.
Thanks for taking the time to help me :)
As I stated in a comment to your question, the reason your Slick Slider plugin stops working after you load the other document is because the other document is re-including the jQuery library into your top-level browsing context.
jQuery plugins make themselves accessible by defining a new method and then attaching it to the jQuery.prototype (aliased as jQuery.fn) object.
When you include the jQuery library into your document via a script tag, you can call console.log(jQuery.fn); and you will see an object with all of the convenient methods that make up the jQuery library.
After you have similarly included the Slick Slider library, you can again call console.log(jQuery.fn); and you can find that it has a method property named slick.
The problem is that when you load the document that resides at url that document is inserting a fresh script tag into your parent document whose src is jQuery. This causes a fresh loading of the jQuery library which obliterates your initial instance. If you call console.log(jQuery.fn.slick); at this point, you will find that it is undefined.
I have never before seen an entire HTML document (as opposed to a snippet of HTML) loaded into a div of another document. This is inserting elements into the body of your top-level document that should not be there, like <head> and <body>. I am actually surprised that this is causing so few issues for you.
The way documents are normally nested within other documents is by the use of an iframe. The document within the iframe will be its own sandbox, and its styles and scripts will not be in conflict with those in the parent frame.
You could implement an iframe into your project by replacing $('.frame').load(url); with something like the following:
var $iframe = $('<iframe />', {
src: url,
style: 'height:100%; width:100%;'
});
$('.frame').html($iframe);
Related
I have jQuery on my main page and would like to clone/copy the main page version of it inside my iframe, so that I can extend that version with specific plugins that are not relevant on the main page.
How can accomplish do this?
No. That's is not cloning process. You require to put the code for your iframe elements separately or in combined logics.
You cannot clone the function for another scope.
Just insert a <script> tag for jquery in the head of the iframe's document. That will provoke the iframe into loading jQuery.
Don't forget that you have to use the jQuery constructor that takes a 2nd parameter specifying the htmlDocument when you create an element in a different document and when you do element queries in a different document.
Here is an example jsfiddle that puts the main document jquery into an iframe.
CORS applies here, if the iframe is not in the same document, it will not let you "reach into" the iframe. If you control the page, you can use postMessage to get around the security barrier.
I am creating an application with Symfony2, where I have a main menu of options depending on the option selected dynamically opens a tab at a lower div with the content for that option. Content is loaded with load() of Jquery in the container div.You can see in the picture below:
The first problem was that in the HTML loaded in each tab could not use the js file initially loaded in the index.html, as you can see in this example you should check out a notice when we click the content of each tab, but does nothing .
The solution to this problem was included in each HTML code to load the appropriate script, and it worked properly. But to do it this way, if two HTML carry the same js, when one of the contents some event runs is repetite many times as tabs we have created, that is, if I open two different options (each in its own tab both charge the same js) by clicking on the first event associated performed twice, whereas if I do it in the second only done once. In short, whenever a function of a js used, is repeated as many times as there are dynamically loaded on the tabs.
And I tried event.preventDefault();orevent.stopPropagation(); and it does not solve the problem.
Would it be okay that it js is included twice in the overall structure of HTML? (Included in the initial head and then the container div)
Dynamically loading HTML + JavaScript is not the best approach for this case. I suggest that you use some JavaScript SPA framework, like AngularJS or ReactJS. Both are very big and well supported projects, so you can find tons of documentation and tutorials. You'll most likely end up using Symfony only as a RESTful service and Angular/React taking care of the rest (template loading, sending request to server, etc). Also, js frameworks will take care of deep linking and in the end you'll have a better working, easier to maintain application.
It is a bit more work initially, especially until you bootstrap the application, but then it gets easier to maintain and implement new functionality, so it pays off in the end. With your current approach you soon will find yourself in a big mess full of 100s of templates, js callbacks, inclusions, etc. I'm saying this from a personal experience!
Well...
Jquery works like this: when you attach an event to html, if the html does not exist, the event is attached to nothing. If the element exists then the event is correctly attached. It attaches only to existing elements when the on function is execute. That is a correct behaviour. In the past it used to exist a .live method that did exactly what you want: you attached an event and if you create the element after the attachment, the new element also contained the event.
Adding the js twice is not the solution. As you said after a click the button will be executed twice.
Why do not attach the events after loading the content? If you load it in the page start you can do in the main file:
$(function(){ // will force to execute the on method after all the page is loaded.
$('.submenu .button').on ('click', function (){
...
});
});
If you load the menu by ajax, in the callback and after adding the html menu to the main you must use the code I wrote above.
I am trying to perform a jquery load of a html page into the main body of a page.
Using a div named sidebar_menu that is in the middle of the page,
i am performing a jquery load at the end(bottom) of the page.
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
This kinda works... the content is displayed, but the menu does not have the javascript functionality (expand, collapse, etc) applied to it. The styles have been applied, but the functionality of the menu is not there.
I can copy the contents of the html in place of the div, and the menu operations work.
Am i loading the included file too late in the stack? currently using the
jQuery(document).ready(function(){
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
});
but is there better area to load the html file into the DOM, as the .ready seems to be too late in the page assembly stack to be operational.
thank you
There are many JQuery methods that strip Javascript. I learned it the hard way. Look into that. It may not be the problem you are guessing. The way around it is to not get the JS generated on the server side but to have it on the client side with parameter, config, etc. values passed as some DATA- element values from the server side for some HTML elements. That string that you assign to DATA- can be a JSON string too.
You should use jQuery .on() method see http://api.jquery.com/on/
I am not sure how your code looks like. But here is the idea. Take the closest container (that exists in DOM) of the element that will be loaded (not in DOM at that moment) and on that asign selector and action for elements to be loaded.
I'm using the slidedeck jquery plugin which basically puts slides on my page. Everything works fine, but the problem is with the css loading part. Below these slides i have an import statement for another page. This page which i'm importing fetches quite a bit of data from the database before being completely displayed.
So whenever i open my page for a second or two the display for my page goes hay wire. The probable cause of this may be that i'm putting most of my jquery including the one for these slides in the document.onready function. So since the document is not loaded completely for that period of time slides are also not displayed. (as in they are displayed but in a weird manner......they are all over the page!!!!)
Is there some way i can make sure that my css and jquery get loaded first and then a call is made to this page which i'm importing or something like that. i just want that my display comes fine right in the beginning.
this is the slidedeck jquery plugin i'm using
slidedeck : http://www.slidedeck.com/
ahh i actually found a solution for my problem. Now what i'm doing is that i'm keeping the div (say id="slideDeckContainer") containing this slidedeck initially as hidden (using css style=display:none). Only after the page is done loading inside the $(document).ready(function(){....}); i call $('#slideDeckContainer).show(); on the div. (since the $(document).ready(function(){...}) is callled only after the page is loaded)
Definitely not the best solution but for now it works :).
instead of $(document).ready(function() { //code here }); you can use $(document).load(function() { //code here}); The load function fires after everything in the selector has loaded. In this case, we are selecting the document, so this function will run only after the CSS, javascript, and DOM have finished loading. Another suggestion is to give the DOM elements that you are loading content into a defined width and a height. This way, before the loading finishes, there will be space reserved for the loading content and it won't mess up your page layout.
Twitter generates me box code to insert on page: http://pastebin.com/5TgkL5vP but on slow connection it prevent page from loading. Is there any way to add "Loading..." and make it async? (I know about iframe but its awful way)
There is a solution in here;
http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/
$(window).load(function(){
$.getScript('http://widgets.twimg.com/j/2/widget.js', function(){
$.getScript('/media/js/twitter.js', function(){
$('#twtr-widget-1').appendTo('#twitter_p')
})
})
})
To delay the loading of the twitter widget you could load it after your whole page is loaded. You could use the window's onload event handler to start loading the twitter widget once your page has been downloaded.
Or you could use a javascript library (like jquery) to run that code once you HTML is loaded but images and CSS and other assets are still loading: jquery's .ready() method does just that.
In case you don't want to use bare javascript (although recommended for learning) jquery (like others) does provide a .load() event that behaves just like the onload example on W3c.
In any case, with any of those two methods you could place a "loading..." text in a placeholder and then replace it with the widget once it's loaded.
You should try experimenting with both and see which one produces the best perceived results. Sometimes you want the page's content to load blazingly fast, in that case you should hold all external content from being loaded until the content is loaded (using onload or .load()), while sometimes you want everything to be loaded more or less at the same time (using .ready()).
I hope it didn't come out backwards :D.
The solution explain by od-eon.com is OK but for IE the CSS is not correctly added because it tries to add CSS in a window onload event. This event is fired asynchronously so no CSS is added.
The line $('#twtr-widget-1').appendTo('#twitter_p') is not useful.
You must not add a CSS position attribute to the div which will contain the box because nothing is displayed in this case. If you want to add this box in an absolute div you must add an empty div in it and pass the div's id in parameter.