pjax not working on website - javascript

So I've been trying to make pjax work on my website but with little luck.
What I want to do is very basic and simple. I just want to create two links on my home page which both load a common page. But one link would load it using pjax, thus only change the contents of the div, and the other one would not use pjax and thus load the whole page.
This is the code of my main page (main.html) -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
<script src='main.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">Index page!</div>
</body>
</html>
and this is the code of the common page both links refer to (first.html) -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
<script src='main.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">This is the first page! If you came here from the first link, then you can notice that the page didn't load but only the URL and the contents of this div were changed. Yay! If you came here from the second link then you can notice that the page actually loaded and each and everything was re-executed(JS) and re-applied(CSS) again. Boo!</div>
</body>
</html>
and this is the javascript that I'm using (main.js) -
var a = new Pjax({
elements: "a.js-Pjax",
selectors: ["#first-div"]
});
What it should do is if I click on first link, it should just replace the content of div and change the URL of the page whereas if I click on second link, it should load the page instead of just changing the div and URL.
I've written identical code in play framework (MVC) and it's working perfectly but according to me I should not be needing an MVC to run only this much of code.
I have got the Pjax from here: https://github.com/MoOx/pjax . Installed it through npm.
I've run Pjax.isSupported() command and that returned true.
Any help is appreciated!

Well two things to notice here, combination of which solved my problem.
First, The call to main.js or the javascript file I have written has to be done at the end of the body tag. Something like this -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">Index page!</div>
<script src='main.js' type="text/javascript"></script>
</body>
</html>
And second, I do need a server running to make pjax work. It's working with both play framework and npm. Doesn't work without a server.
Hope this helps somebody.

Related

Starting an Angular Application

This is my first post and I am really new to computer programming so I apologize ahead of my time if my question is super simplistic. So I am trying to start an angular application and I currently have this:
<!DOCTYPE html>
<html>
<head ng-app>
<title>Hello World</title>
<body>
</head>
<h1>{{2+2}}</h1>
</body>
<script type="<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
What is supposed to happen is that when I click the html page there should be the number 4 pop up but instead this pops up: {{2+2}}. I am assuming that my angular code is not correctly linked but I am not sure. Do you have any ideas?
Please find below the corrected html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body ng-app>
<h1>{{2+2}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>
Place the <body> tag in correct place. Moved the ng-app to body tag. Place the corrected script tag within <body>
Working sample: http://plnkr.co/edit/T15fetn913Fwn2uJ5pcj?p=preview
Explanation:
The body of an html page is where the components that display on a page will be declared.
- Overlying declaration of html
-where you put meta data, scrip imports, css imports, and title. Basically things the page will use
- all other tags from anchors to spans, things the user sees
Note*** nothing can go in between these tags
Visit w3schools for a great tutorial on this...
http://www.w3schools.com/html/default.asp

Building a basic Addthis page

Im trying to build a basic page with the Addthis code inside.
The code I am using is :
<html>
<HEAD>
<TITLE>test </TITLE>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'> </script>
<script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"> </script>
</HEAD>
<body>
<div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"> </a>
<a class="addthis_button_tweet"> </a>
<a class="addthis_button_pinterest_pinit"> </a>
<a class="addthis_counter addthis_pill_style"> </a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true}; </script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=felix001"> </script>
<!-- AddThis Button END -->
</div>
</body>
</html>
However when I run the page in a browser I get a blank screen. Am I missing anything obvious ?
Thanks,
It won't work locally because the src tag is using "//s7..." and trying to determine the protocol based on the parent page. In your case, while running locally, the parent page probably looks like:
file://c:\blahblah\index.html
and therefore the protocol is file:// which doesn't work (it needs to be http or https). This is done to make it easy for users to copy the code into a site that is either http or https without having to make changes to the code.
To fix this locally, just prepend http so it looks like:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=felix001"></script>

2-3 second delay loading page when using JQueryMobile

I've found that if I load a web page in iOS, then if that page uses JQueryMobile it takes about 2 to 3 seconds longer to initially load. For example, the following page loads almost instantaneously:
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
However this one takes a few seconds to load:
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Is there anything I can do to try to get rid of this delay?
Thanks
If it’s the scripts that are taking too long, you can move them to the bottom of the page:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</body>
</html>
Then again, doing so will make it harder to predict exactly what happens and when it will happen. But the DOM should load and render before the blocking script tags load.
Now you just need to figure out how to deal with that.
jQueryMobile is not that famous for its responsiveness. Even after you have tried every optimization.
You could try loading the scripts via document.createElement() though. (Ideally, even this should go at the bottom)
function createScript(src){
var script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
What this effectively does is to start loading and executing the scripts only after the page has rendered. i.e. kind-of asynchronously.
If you have many like these.
var files = ['1.js', '2.js', '3.js'];
files.map(createScript);
Also, I would vouch for SenchaTouch(if that's an option you're willing to consider)
Try putting the JS at the bottom
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</body>
</html>
You Can Try and Put The Script Tag in The Bottom of The Page
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</html>
and Everything Should Load Faster But The Scripts Gonna Take a 2-3 Seconds
JavaScript blocks the rendering of the page because the script may do document.write or do other modification that will invalidate the rendered page, so best practice is to put script tags at the bottom of the page. The drawback to this is that you won't be able to use jquery in the middle of the page, not even $(document).ready(). Instead you'll have to put all your scripts after jquery is loaded or you'd have to use native window.onload or write a lightweight handler to register your callbacks after jquery is loaded.

Noob attempting js and html coding...and failing miserably

Html:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="JavaScript" src="mapbody.js"></SCRIPT>
</head>
<body>
Click for a message..
</body>
</html>
mapbody.js:
function a_message()
{
alert('I came from an external script! Ha, Ha, Ha!!!!');
}
When I pull up the web page and click the link nothing happens. Both files are in the same folder. What am I missing?
Several things:
HTML-elements should all be lower-case.
The language-attribute in the script-tag is obsolete. Use type="text/javascript" instead.
A JavaScript-function call should go into the onclick-attribute, not the href.
A proper implementation might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Is required!</title>
<script type="text/javascript" src="mapbody.js"></script>
</head>
<body>
<a onclick="a_message();" href="#">Click for a message..</a>
</body>
</html>
Also, binding function-calls to an HTML-Element using the onclick (or any other onXX-attribute) is old-school. Library's like jQuery enable you to use CSS-selectors to bind actions on certain HTML-elements, which allows a full separation of HTML and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
Click for a message..
<script type="text/javascript" src="mapbody.js"></script>
</body>
</html>
Lukas Knuth was faster than me. :)
Works for me (Firefox 8) : http://jsfiddle.net/FCXxU/
Is the URL to your script good?
A simple way to check that is to add an alert('test'); at the beginning of mapbody.js (before the function).

Call - Javascript Function

Any one help me. I have described the problem in the following lines.
I want to call the second.html with in one.html.
Inside the second.html ,I have included the second.js using script tag.
When I call the second.html in the browser(safari,chorme,firefox) directly,It works FINE.
But If I call the second.html inside the one.html then the second.js(cannot call by second.html) does not work.
Please Help me. I have attached the code.
one.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script src="Scripts/one.js"></script>
</head>
<body>
<div data-role="page">
One
</div>
</body>
</html>
Second.html
<!DOCTYPE html>
<html>
<head>
<title>Sample </title>
<link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
<script src="../jquery-1.4.4.min.js"></script>
<script src="../jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript" src="../Scripts/second.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="button" id="link" >Second</div>
</div><!-- /page -->
</body>
</html>
one.js
$(document).ready(function()
{
alert('one.js');
});
second.js
$(document).ready(function()
{
alert('second.js');
});
THanks
From what I have read, jQuery mobile Ajax pages do not fire the ready event when the new content is displayed. You will most likely need to bind to the pagecreate event for all 'data-role="page"' elements, and check whether an id of an element on second.html is there.
The comments section of this documentation page has some potential fixes for this:
http://forum.jquery.com/topic/mobile-events-documentation
A link is just a reference to another page; the browser doesn't actually load it before you click it (as far as the scripts on the first page are concerned, anyway).
If you want to access scripts on another page, two conditions must be met:
The two pages must come from the same domain (for security reasons).
The two pages must be loaded in the same window (for example using an iframe).
Please post a new question asking what you want to achieve, maybe there is a different solution.

Categories

Resources