JQuery Mobile page does not load getJSON content until page is refreshed - javascript

I have a list of "patients" that is queried and linked like so:
list.append($(document.createElement('li')).html("<a href='./patient.html?id="+data[i].UnitNumber+"'><img src='http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+data[i].UnitNumber+"&type='/><h3>"+data[i].LastName+", "+data[i].FirstName+" "+data[i].MiddleName+"</h3><p>Age: "+data[i].Age+"</br>SSN: "+data[i].SSN+"</p></a><a href='./patient.html?id="+data[i].UnitNumber+"' data-transition='slideup'>info</a>"));
Upon clicking that page I arrive at a patient profile page that should load in some of this data using the query in the URL (i.e. patient.html?id=100002). That ID is used in a getJSON call to populate the various fields. I want this to happen as soon as the page is loaded.
Problem: When one of the list elements above is clicked, it leads to the patient profile page but none of the fields have been populated. If I Refresh that same page, all of the data loads fine. Here's some code:
function login() {
var query = window.location.search;
if (query.substring(0, 1) == '?') {
query = query.substring(4);
}
$.getJSON("http://URLGOESHERE/wcf/PatientSearch.svc/byunitnumber?unitnumber="+query+"", function(data) {
var head1 = document.getElementById("name");
var newtitle=""+data.LastName+", "+data.FirstName+" "+data.MiddleName+"";
head1.firstChild.nodeValue=newtitle;
document.frmLogin.email.value=" "+data.BirthDateText+" ("+data.Age+")";
document.frmLogin.password.value=" "+data.SSN;
document["profpic"].src = "http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+query+"&type=pic";
});
}
I call the function "login()" at document.ready. I even tried calling it "onLoad" of the body. No idea why this doesn't work when linked, but does if I just go to the URL directly or I refresh..

Linking within a multi-page document
A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a data-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.
If a link in a multi-page document points to an anchor (#foo), the framework will look for a page wrapper with that ID (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking.
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would look like this:
href="multipage.html" rel="external">Multi-page link

Related

Editing HTML elements using JS in other pages

How can I have a control on HTML elements using a JS code from another page, like, I have an HTML page called "index" and it contain a <p> element, and I have a another page called "controlPanel", how can I Edit the <p> element in "Index" from the "controlPanel" page.
JavaScript runs in the context of the current page and is completely removed from memory along with HTML and CSS when the browser navigates from one page to another. So you cannot control one page using JavaScript from another page.
The only exceptions are:
If the first page opens the second page using the window.open() method.
If the second page is loaded in an iframe inside the first page.
What you can do is persist the state to some storage (e.g. the database, or the local storage in the browser) in the first page, and read it in the second page to change the behavior accordingly.
Of course, you can always send parameters from the first page to the second (e.g. in the URL query string), and the second page will behave differently according to the value of the parameters.

Design and SEO for a single page dynamic website with AJAX

I designed a website in which the whole site is contained within one page (index.php).
Within the page, <section> tags define different parts of the site (home, contact, blog etc.)
Navigation is achieved by buttons that are always visible, and when clicked use javascript to change the visibility of the sections, so that only one is shown at any time.
More specifically, this is done by using the hash in the url, and handling the hashchange event. This results in urls such as www.site.com/#home (the default if no other hash is present) and www.site.com/#contact.
I want to know if this is a good design. It works, but I get the feeling there must be a better way to achieve the same thing? To clarify, I was aiming for site that loaded all the main content once, so that there were no more page loads after the initial load, and moving between sections would be smoother.
On top of this, another problem is introduced concerning SEO. The site shows up in google, but if for example, a search query contains a term in a specific section, it still loads the default #home page when clicked, not the specific section the term was found in. How can I rectify this?
Finally, one of the sections is a blog section, which is the only section that does not load all at once, since by default it loads the latest post from a database. When a user selects a different post from a list (which in itself is loaded using AJAX), AJAX is used to fetch and display the new post, and pushState changes the history. Again, to give each post a unique url that can be referenced externally, the menu changes the url which is handled by javascript, resulting in urls such as www.site.com/?blogPost=2#blog and www.site.com/?blogPost=1#blog.
These posts aren't seen by google at all. Using the Googlebot tool shows that the crawler sees the blog section as always empty, so none of the blog posts are indexed.
What can I change?
(I don't know if this should be on the webmasters stackexchange, so sorry if its in the wrong place)
Build a normal site. Give each page a normal URL. Let Google index those URLs. If you don't have pages for Google to index, that it can't index your content.
Progressively enhance the site with JS/Ajax.
When a link is followed (or other action that, without JS, would load a new page is performed) use JavaScript to transform the current page into the target page.
Use pushState to change the URL to the URL that would have been loaded if you were not using JavaScript. (Do this instead of using the fragment identifer (#) hack).
Make sure you listen for history events so you can transform the page back when the back button is clicked.
This results in situations such as:
User arrives at /foo from Google
/foo contains all the content for the /foo page
User clicks link to /bar
JavaScript changes the content of the page to match what the user would have got from going to /bar directly and sets URL to /bar with pushState
Note that there is also the (not recommended) hashbang technique which hacks a one-page site into a form that Google can index, but which is not robust, doesn't work for any other non-JS client and is almost as much work as doing things properly.

How to parse URL for page navigation when clicking the back button on single page site using ajax?

I am working on this website http://techxpertschico.com which uses ajax and .htaccess to update a single index.php page, the problem is that I can't get the back button to work. For example if you click two separate top header links and then click back it will not change the content you are looking at even though the url will be updated. This is because my logic to direct the user to the proper web page happens using php but when a user clicks the back button they receive a cached copy of the page therefore no server request. In fact, you'll notice if you click refresh on my site after clicking the back button it will load the correct content because it will send out the server request. My first thought to fix this was to force a refresh when a user clicks the back button, but I couldn't get this to solve the problem. I tried using header files, I tried using javascript, and I failed, so I'm asking for help once more. I just need to be able to parse the URL and direct them to the appropriate page but normally I do this using php and since the back button uses caching I am not sure if I need a javascript solution or if I need to try harder to figure out the forced refresh approach.... What would you do, or what do other sites that use a single index.php file do?
P.S. I'll post any code if you need to see it. Looking at my question from yesterday might help. How to refresh page on back button click?
Your problem is not related to the cache mechanism.
I've just checked your website using firebug and I have noticed that after loading the home page (without ajax), you use ajax to load requested page asynchronously and change URL in the address, the URL altering is done by your code which is ignored by firefox.
The URLs altered with code are not kept in the browser's history, this is why the Back button doesn't work in your case
EDITED, added own working Code example
If you are still working on this:
I do suggest you take a look into this article
change-browser-url-without-page-reload
I think it explains a good method which is not too complicated to make use of the HTML5 history possibilities.
Here's the code I finally implemented on my site, and the only issues I have is with my expandable menu states when going back in history..
HTML just uses a DIV with #content-main on your index.html, for all the external html-file contents will be loading into it.
The links(anchor) which should direct to that DIV get a class assigned: ajaxLink
In your referenced html-files, just write the content, no head or body.
You may include scripts, though, if it makes sense to not put them on your index page.
$(function () {
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support
/*unnecessary? I don't use the next 3 lines of code
//To override the default action for the link(anchor tag), use the following jQuery code snippet.
$("a.ajaxLink").on('click', function (e) {
//code for the link action
return false;
});
*/
//Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
$("a.ajaxLink").on('click', function (e) {
e.preventDefault();
/*
- if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
- if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div #content-main
$('#content-main').load(pageurl);
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
//the below code is to override back button to get the ajax content without page reload
//added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
$(window).on('popstate', function(e) {
if (e.originalEvent.state !== null) {
$('#content-main').load(location.pathname);
}
else {
$('body').load(location.pathname);
}
});
});

Onclick refresh only div content, Not all aspx page

I have two pages that inherit from one master page, First.aspx or second.aspx. Navigation is on master page. If I am on first.aspx page & want to go to second.aspx onClick. I just want to load My contentplaceholder, not refresh all of the page. Is this possible or not?How do I do this if it is possible?
I have tried using:
$(function() { $("#btn").click(function() {
$("#Content").load("Second.aspx");
});
});
I have also tried using this:
function SelectRol() {
window.location = 'Second.aspx';
return false;
}
Unfortunately, that is not going to work. You could use ASP.Net UpdatePanel for partial page refreshing, or better use JQuery Ajax methods to load HTML content you want to show.
See http://www.dotnetfunda.com/articles/article1123-partial-page-refresh-using-jquery.aspx for more information about this solution.
Its better to use ajax call if you don't want whole page to get refreshed . or you can use AHAH as the one facebook use for the chat box
There is no such thing as Partial Loading / Partial postback. We can only do Partial Rendering. If you need to load a second page that page's entire page event life cycle would happen which will include the Master page's events.
If you need a true Ajax mechanism. Render your scripts initially which will construct your UI and subsequent communication will be transmitting only the data using RESTful / JSON service.

including form by user action

i have a page containing a form and directs to another page (page2) asusual. Page 2 have a edit button that must include the entire previous page into a div in page2(initially it has none).How to do this with javascript?
You can use the
load
function in jQuery. It loads HTML from a remote file and inject it into the DOM.
$("#yourdivid").load("page1.html");
With jQuery you can get the html of the page using the following...
var x = $("body").html();
You can then add that to your form.
If you don't require the entire page (the page will include the form again after all), you can change the selector in the code example to limit it to any part of the page.

Categories

Resources