We're using the mwEmbed-player-static.js library to handle playing video on a site. This works fine for a static page where we can load the script and that's it. But if we load the video tag as part of the dynamic content via AJAX, nothing happens. We need a way to reinitialize the player or reload the script. Has anyone dealt with this before?
The source for Player_DynamicEmbed has the javascript to make this happen. You can just call the dynamic player loader after the content of the ajax request has been processed.
Related
I am working on a Hugo Static Site Generator theme, the problem is that the Javascript features don't load unless I reload the page
e.g
Before reloading the page
After reloading the page
This is the code, I used in adding the new class
$(document).ready(function() {
$('h2').addClass('hello')
});
Now, the problem is that since it is a static site generator when opening a new page, it will not refresh/reload the site, but load the page like a cached page. therefore most of the javascript features only apply once unless the page is reloaded. The problem is also experienced when I am using VueJs on the theme, Which means, I need to find a way to force load a new URL, instead of it loading like an anchor link.
UPDATE: I have been able to resolve it, The problem was from another javascript file, making an ajax get request
Thanks
Did you debug or add console.log inside your ready function to see it can reach there? I am suspecting that your h2 is rendered by js and at the time your code to add class hello that h2 is not rendered yet.
If this is the case I think you need to render html at server first or you can include your script in the same place as your components
I have problem when load external html into specific <div>. Here is the problem :
I have html files, "index.html" and "problem.html".
In problem.html I use skrollr to animate content.
When I click the "open" button in index.html, I use jquery load() method to load problem.html into specific in index.html.
The content was loading, but slowly.
When I check using firebug, I see many request skrollr.min.js. Why do I get skrollr.min.js and other file repeatedly?
When I refresh the page, load the menu and see at the firebug there are so many get skrollr.min.js and file that are called.
You could try to load the Page via iframe to see if it's faster. Just set the innerHTML of your container to
<iframe src="http://yourdomain.com/problem.html"></iframe>
when he clicked the Button.
I have an issue with dynamically loaded content.
I'm using ajax calls to load in HTML content without refresh the browser, and pages have their own JavaScript libraries that need to load in order for them to work. So I embed that JavaScript content into the HTML which I load with ajax.
The problem is, that even though the HTML that had the embeded JavaScript gets removed, the functionality of those JavaScript functions is still loaded no matter if the HTML along with the JavaScript is removed.
That means, that if a certain page is loaded more than once, actions will fire the same amount of times that the pages has been loaded.
How do I make sure that JavaScript libraries get only loaded into the browser once, retaining the functionality of loading the source of the JS libraries with the ajax call, not just having source file links and then loading them again after the ajax call along with the required HTML is loaded? (load the JS files along with/before the HTML is loaded with ajax)
Once you load a JavaScript file into your browser's memory, it remains there until you load another page.
So... it doesn't matter how do you load it (through AJAX, or just once when page load through script link, or just embedding it into your raw HTML), once it's there it will remain there until you go to another page.
If you want your client code to execute only under certain circumstances you need to control that.
From my point of view your best option is to just load once your libraries and determine by code when execution should start, end, and repeat (if needed).
Folks,
I am opening a popup through ajax in my magento site. The issue is the page which i am calling need lot of js and css files to get loaded to make that page work properly. But in turn it is increasing the load time of my popup.
I thought of loading loading all css /js on main page itself.But as you guys know that once the popup opens it doesn't know the content of main page as it is just an different entity.
And ajax approach is required because i am sending product id.
Please suggest.
You should also have a look at the content which you are requesting using AJAX.
Following things you can do -
Minify CSS and JS
Optimize your code which prepares the data for Ajax response.
Optimize Magento Collecions (if exist in response code)
It may help to decrease the load time.
Please refer the below links ,
http://developer.yahoo.com/performance/rules.html
https://developers.google.com/speed/docs/best-practices/caching
We built a website with different pages, and some of these pages have features that other pages don't have. Eg: The galleries page uses jQuery Colorbox for opening photos. So, some pages load some jQuery plugins, and some other pages don't (the 'About Us' page don't need a Colorbox plugin).
Now, the client asked us to put a persistent audio player at the top of the page. We have two alternatives: using frames (too bad!) or using ajax calls to update content and the History API to update the url/browser history.
Ok, we attached the click event to links. The event requests the new page using ajax, and then the page content is replaced. The problem is: and the js files/jQuery plugins? When the requested page's js files are loaded, the $(document).ready(); event was already fired.
Also, some pages may contain non-external javascript, like
<script type="text/javascript">
...some code here...
</script>
Any hints on how to do it the best way?
Thanks!
The external JS files should be loaded once in the parent file, so that all the dependencies are satisfied when the ajax success callback fires.
Ex:
$.get('/someUrl',function(newHtml){
//process the newly fetched html
$("#someParent").html(newHtml);
//apply whatever JQuery plugins you need at this point.
});