I have done a lot of research for requireJS AMD in AngularJS and found out that
the
JS files are being called by triggers either by changing url or
clicking a button
I have the home page which is divided into 5 sections with each one having its html and controller file.
The motive is to call only the first section on page load with its
controller and html file. And load the rest files one by one as we scroll to the
bottom.
Is there any way to do that? Or I will have to change the URL whenever I go to the next sections?
just simply use javascript and require(['your_controller']);
like:
document.addEventListener("scroll", function(){
if(document.body.scrollTop == 500){
require(['your_controller']);
}
});
This will add your_controller.js to your page when you scroll down 500px from the top of the page. But still it may not be work in the way you expecting. I have never done such thing to load a controller, but according to your question. This will help you load the script file of your controller.
Related
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
Example page: http://www.quora.com/Python-programming-language-1/followers
That page gives a list of 111.5k people. But requires me to scroll with my mouse for a long period of time to actually get the page to load completely. How to do it automatically in casperjs?
Basically I need all the names on that page or I need to work on the page only after it has been completely loaded.
How do I do this with casperjs + phantomjs?
Offtopic: If there is any module in python that can do this, feel free to suggest in the comments.
You can use scrollTo:
casper.start('http://yoursite.com', function() {
this.scrollTo(Xvalue, Yvalue);
});
or even scrollBottom
casper.start('http://yoursite.com', function() {
this.scrollBottom();
});
In that case you would have to wait until the javascript load the page and repeat that as many time as you need.
I have used $.mobile.changepage to do the redirect in my phonegap+jquerymobile projects. However what makes me confused is that I need to put the script of all the pages to the same file index.html. If not, the redirect page can not execute the function in its header.
for example, my index.html seem to be
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
then, my device will redirect to test.html which seem to be
$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>
However, the script will never execute in test.html. Then I put the script to index.html, what I expect to be is done. Whatever, if I put all the script to the same page, the project will become harder and harder to be preserved. Appreciated for your help.
Intro
This article can also be found HERE as a part of my blog.
How jQuery Mobile handles page changes
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. To be more precise, even BODY is not fully loaded. Only first div with an attribute data-role="page" will be loaded, everything else is going to be discarded. Even if you have more pages inside a BODY only first one is going to be loaded. This rule only applies to subsequent pages, if you have more pages in an initial HTML all of them will be loaded.
That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.
Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
Solution 1
In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
This is a quick solution but still an ugly one.
Working example can be found in my other answer here: Pageshow not triggered after changepage
Another working example: Page loaded differently with jQuery-mobile transition
Solution 2
Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
In the end I will describe why this is a part of a good solution.
Solution 3
Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application. Unfortunately this is not a good solution in your case. Phonegap should never work as a normal web app.
Next
Official documentation, look for a chapter: Linking without Ajax
Realistic solution
Realistic solution would use Solution 2. But unlike solution 2, I would use that same index.js file and initialize it inside a HEAD of every possible other page.
Now you can ask me WHY?
Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.
Final words
This problem can be easily fixed with a good page architecture. If anyone is interested I have wrote an ARTICLE about good jQuery Mobile page architecture. In a nut shell I am discussing that knowledge of how jQuery Mobile works is the most important thing you need to know before you can successfully create you first app.
Unlike normal ordinary HTML pages, jQuery Mobile uses ajax technology when navigating between pages. So make sure to import all your JS files and libraries in all your html pages.
If you notice closely you will see that JS files from previous page is taken into consideration when loading the second page. But if you force rrefresh the current page then the js files of the current page will be effective.
So as I said earlier make sure to import the js files in all the html files.
Also no need to call deviceready, use following syntax to call your page specific js functions
$(document).on('pageshow', '#YourPageID', function(){
// Your code goes here
});
Jquery Mobile uses ajax to load a "page". A "page" here is a div with data-role=page. If you load a physical page index.html, you can navigate using changePage to any "page" div inside that page.
However, if you want to load a "page" from other physical page, jQM will only load the first "page" div from that page. What actually happen is you do not change page, jQM just load that particular "page" div using ajax and inject it to your current page.
You have two possible architecture where you put all your "pages" in a html page and navigate from there. Or you can have multiple page architecture. You can always mix this.
To physically change page, you need to add rel=external to your link.
I'm using the jquery load function to switch out a div. Whenever I load a certain element via ajax that needs javascript to run -it won't work in the div. I know that this is because the element didn't exist in the dom on the initial page load.
I've googled for days and haven't found an answer that can give me an easy to understand explanation. Essentiallly, I'm told to just use .on or $getScript.
However, this doesn't seem to be the appropriate answer.
Since, each element loaded in the div has similar properties -I simply want to load the jquery library, and the same two external scripts in my index page's head section -and then make sure that those scripts stay "live" or append to the simple html content that is being externally loaded in the div via ajax.
So, for example, if page 1 has a div named bouncingcats, and page 2 has a div named bouncingdogs -that both require an external javascript named 'bounce' -I want to load the javascript file 'bounce' ONE TIME in the head section of my index page -and then dynamically swap out the div named bouncinganimals on my index page with either cats or dogs.
So far, it seems as if the only advice I'm getting is to just put the jquery library AND the bounce.js file at the end of page 1 and at the end of page 2. This, of course works -but it seems too redundant and of course slows down the ajax load.
Do you know of a way in which I could just load the jquery library and the external javascript page in my index page head once, and have them run when I load content via ajax into my div?
An issue that I have is that I didn't write the script bounce.js myself -and it is already minimized -so changing the script could prove to be extremely difficult. Is there something I can just wrap around the external javascript links themselves?
I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>