I have a mako file included into a HTML template that takes time to load.
I want to load it only when the rest of the page is fully loaded.
Let's consider this html template fragment:
...
<section>
<%include file="widget.html"/>
</section>
...
I want the line <%include file..., to be read by the browser only when all the rest of page is loaded.
Any idea?
The browser doesn't read the <%include...—it's interpreted by the server before being sent to the browser.
You could have an onload JavaScript call that makes an AJAX request for "widget.html" and puts it in your page.
Related
I´m loading one off my pinterest boards in a page loaded with ajax, and the first time I load the page it works and displays my board as it should.
But when I load the page again then it does´t work?
I have tried to set setTimeOut and some other things but I can´t get it to load the board the second time I load the page.
This is the test code I have now:
<a data-pin-do="embedBoard" href="http://www.pinterest.com/pinterest/pin-pets/"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
Solved
Instead off linking to pinit.js in the code I changed it to pinit_main.js and it starts to work.
is there any reason for something to work in page inspector and not in real debug mode?
In particular I'm using fullcalendar.min.js (JQuery plugin) in some tab content and I see it very well in page inspector but when debug the calander is not shown..
in header:
<link rel="stylesheet" href="./../../Content/fullcalendar.css" type="text/css" media="all" />
<script src="./../../Scripts/js/fullcalendar.min.js"></script>
in body:
<section class="tab events-tab">
<section class="events-tab-inner">
<div id="calendar"></div>
</section>
</section>
in console of the web page loading I have the below errors (I'm not sure they are directly related to my calendar thing):
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.min.js:3
FB.getLoginStatus() called before calling FB.init(). all.js:56
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Based on your console output that you've included above, it seems that there are a few errors. Not sure why they would work in page inspector and not debug though. It seems like it should be breaking everywhere. Let's approach each error one by one:
1. Invalid Image Paths
It appears that you may be using jQuery UI for some features within your code. The jQuery UI suite contains images located in the /images directory when you download the .zip file that the CSS references as background-images. These images are expected to be nested on directory in from the location of the CSS file. For example,
[CSS Directory]
-> jquery-ui.min.css
[images]
-> star-off.png
-> ...
-> etc.
The only way to change this structure is to modify the relative urls within the minified jQuery UI CSS file.
2. Facebook JavaScript SDK error
I have never personally used the Facebook JavaScript SDK. However, that is what it appears you are using. From the error it sounds like you never initialize the Facebook object via FB.init() before you call FB.getLoginStatus(). Try this:
<script type="text/javascript">
/* Locate your FB.getLoginStatus() call and place FB.init() before it */
FB.init();
FB.getLoginStatus();
</script>
Other than that, you may need to refer to their documentation for how to properly initialize the FB object for use.
Hope this helps. Good luck and happy coding! :)
i have a Wordpress site that has a "home" and a "photos" page. On the "photos" page, there are specific CSS and JS files that load only on that page.
I am using the Advanced Ajax Page Loader plugin to load the content into a div via AJAX.
So, when I click on the "photos" link on the menu, the new content loads into the div but the CSS and JS files that were supposed to load are not being loaded, because the <head> of the document remains the same.
I need to load those CSS and JS files after the content is loaded via AJAX.
Is it possible?
Yes,
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
this function has a parameter for the footer.
For styles it doeSn't matter where they are loaded, i think.
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
I use JSF Ajax on my menu links to load the content of the page.
content is loaded with ui:insert and ui:composition with template attribute.
ajax is work and load the content with no reloadin the all page but I have a problem with my java scripts.
when I click menu Items the script reload with every new ajax request.
what should I do to prevent script reloading?
I'm not sure I understood your problem clearly, but maybe you should try to play with the rendered attribute of the h:outputScript component, for instance:
<h:outputScript library="js" name="ajax-util.js"
rendered="#{myBean.renderAjaxFunctions}" />
I have an aspx page that has an iFrame in it, I set the src attribute of this iFrame in the page load event.
The page that gets loaded into the iFrame has its own references to its own stylesheets and javascript files, but when the page loads, it tries to locate these files with a path from the parent page.
Example structure:
/application/example/parentpage.aspx
/application/iframepages/iframepage.html
/application/iframepages/css/iframepagecss.css
/application/iframepages/scripts/iframepagescript.js
With the iframepage.html containing the following lines:
link rel="stylesheet" href="css/iframepage.css" type="text/css"
script type="text/javascript" language="javascript" src="scripts/iframepagescript.js"
The problem seems to be when iframepage.html loads in the iframe on parentpage.aspx, it tries to load the css file from the path application/example/css/iframepagecss.css and likewise for the javascript it tries to load it from application/example/scripts/iframepagescript.js.
This only happens in Firefox, it works fine in IE, Chrome and Safari. Thoughts?
Thanks in advance.
Looking at AJAX and Relative Path Scope you can try to use the BASE HREF tag, or otherwise use absolute paths instead.