Hi all I am navigating from one html page to another as:
window.location = "test.html";
In test.html I have header as:
<script type="application/javascript">
function redirect()
{
alert("inside redirect:");
//window.location = url;
//history.back();
history.go(-1);
return false;
}
</script>
<div data-role="navbar">
<ul>
<li> Go Back</li>
<li> <a onclick="redirect()" data-icon="back" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Back1</a></li>
</ul>
</div>
But here both back buttons (Go Back and Back1) are not working. If I use $.mobile.changePage('test.html') to navigate between pages then both Back buttons work. Why they are not with windows.location?
I want to develop this application for B-Grade browser which are not support ajax. Therefore I cant use $.mobile.changePage('test.html').
Any help will be appreciated. Thanks.
This Blackberry OS 5 browser has lots of issue. Initially i also tried to do what you are doing right now. But later i think so you will have to think of some other approach which is better. Here is how i solved it
First of all add these lines before loading the jquery-mobile script like this
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
Then i used the Single Html concept. In this concept i had to load my script just once and i could make use of jquery-mobile's changePage. When i had many html pages then i has to wait for some seconds as loading and unloading of scripts took place. Avoid that, Its unnecessarry.
Have all the pages with in the same Html like this
<div data-role="page" id="page1">
<div data-role="page" id="page2">
.
.
.
Then after that you can easily do a changePage like this
$.mobile.changePage("#page1", {
transition : "slide"
});
I hope you take the right approach.
Why not use window.location.replace("test.html");
try:
window.location.href = "test.html";
OR:
window.location.assign("test.html");
SEE REFERENCE
In jQuery mobile you can turn of ajax by setting some initiation variables. You need to load this script before you load jQuery mobile
$(document).bind("mobileinit", function(){
//apply overrides here
$.mobile.ajaxEnabled = false;
});
With ajax turned off you can now still use your $.mobile.changePage().
Now to create a back button all you have to do is give the link an attribute of data-rel="back"
<li>Go Back</li>
Related
I see many websites such as gitHub changing it's html content and URL without refreshing pages.
I find one possible way to do this in HTML Histroy API.
Here is the code.
HTML
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
home.html
This is home page
about.html
This is about page
contact.html
That one is content page
JAVASCRIPT
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) {
// Get State value using e.state
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url)
.done(function( data ) {
// Updating Content on Page
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script>
This code is working fine even you go back or forward in browser.
But the problem is that when you refresh page it only shows the file which is being refreshed. For example, if you refresh the about.html then only the following will show: This is the about page.
Unlike the gitHub it can't show the complete page. As you see in gitHub, even you refresh a page it will show the page same as how it was before refreshing.
How can I do that?
Thanks...
You may use Routie or Director to do the routing. And within their callback functions write the code to update the part of your HTML page, for this you may use Fragment.js.
You can change DOM anytime you want without loading the page.
Use fundamental XMLHTTPRequest or Ajax to contact the server without refreshing the browser.
There are many frameworks which offer convenient url routing which can change content automatically without page refreshes. Angular JS is my favorite such framework which offers great routing capability among many other things.
You have to check/set the value of your variable on the event onload of the page.
Your code does not work - when you click on a particular link the page does refresh. correct me if i am wrong.
I am trying to on the click of a link display a different page inside a box using jquery (.load). I'm new to programming and web design so please make answers as simple as possible.
Here is my index.html code
<nav id="navBar">
Home
About
Contact
Shop
</nav>
<div id="loadZone"></div>
and my JavaScript
$(document).ready(function(){
$("#loadZone").load("homeLoad.html");
});
function homeLoad() {
$('#loadZone').load('homeLoad.html');
}
function aboutLoad() {
$('#loadZone').load('aboutLoad.html');
}
loading the home page (homeLoad.html) works fine
when I repeatedly spam the link for about you can occasionally see the content of aboutLoad.html
Any help appreciated
Thanks
A simpler method might be to store the urls as data attributes on the links, then when the user clicks a link get the stored url and load it. To load the initial content, trigger a click on it's link on load. Something like this would work:
Here is a working Demo
<nav id="navBar">
Home
About
Contact
Shop
</nav>
<div id="loadZone"></div>
<script>
$(document).ready(function(){
$('.navLink').click(function(e){
e.preventDefault;
$('#loadZone').load($(this).data('url'));
});
$('.navLink:eq(0)').click();
});
</script>
I have a website that uses google maps plus my own javascript. I am using the addThis javascript for social buttons. The site isnt really usable until my javascript plus the google javascript loads and runs (on $(document).ready...) so I want to minimise delay in getting things going. So I was looking at postponing the AddThis module until everything else has finished as its not that important.
Other question on stackoverflow suggest placing the link to the javascript that I want to delay at the bottom of the page. But am i right in thinking this is not relevant to me as $(document).ready... will not fire until all linked javascript has loaded no matter where its placed?
If so, should I somehow load in the addThis javascript after on $(document).ready... ?
Though I'd really prefer not to run addThis until all google maps images etc are all loaded (I believe .ready() does not wait for this). Is there a recomended way to handle this kind of thing?
For reference, typical addThis usage...
<script type="text/javascript">
var addthis_config = {
"data_track_addressbar":false,
"ui_click":true,
"data_use_cookies": false
};
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#"></script>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact" title="Share"></a>
</div>
I came up with this (please let me know if there is a better way).
<script type="text/javascript">
var addthis_config = {
"data_track_addressbar":false,
"ui_click":true,
"data_use_cookies": false
};
$(window).on("load", function(){
$('head')
.append($('<script>')
.attr('type', 'text/javascript')
.attr('src', "http://s7.addthis.com/js/250/addthis_widget.js#"));
});
</script>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact" title="Share"></a>
</div>
Take a look at loading AddThis asynchronously:
http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance#.UZFNACtAR7Q
At the very least, this will minimize load times (but luckily AddThis is already cached on most computers, so there's really very little load time).
Just in case somebody is still looking for solution. AddThis has already released that many people are annoyed by page delays and they now offer several options which you can control in your script to load when you (dom) are ready:
Although you can also use dynamic loading or appending #async=1 to load asynchronously, I think the other good option is just put in this way - which will not run until dom is ready:
<script type="text/javascript">
/*
//if you have a pub_id, add it here and uncomment these two lines
var addthis_config = addthis_config||{};
addthis_config.pubid = 'YOUR PUBID';
*/
var addthisScript = document.createElement('script');
addthisScript.setAttribute('src', 'http://s7.addthis.com/js/300/addthis_widget.js#domready=1')
document.body.appendChild(addthisScript)
</script>
You can read more here
We have a single page application with two views (essentially, a list of items and a details page for the selected item). Both views are in separate html files, and we’re using sammy.js to transition/navigate between the pages. Everything was working great until we tried to add jQuery Mobile to the mix. Now, when we navigate to the second page (the details page), jQuery Mobile is not styling the page.
Our working app is not set up as described by jQuery Mobile’s multi-page template (i.e., having all page divs in the same html file and use their navigation system to load linked pages into the DOM via AJAX). But, is it possible to have separate pages, use something other than jQuery Mobile’s navigation, and still have jQuery Mobile style the second page? Or, is there a way to force jQuery Mobile to style the second page?
Here’s some code snippets that’ll hopefully help show what we’re doing. (Note: We’re also using ASP.NET razor views.)
index.cshtml
<body>
#RenderPage("Views/items.cshtml")
#RenderPage("Views/item.cshtml")
#Scripts.Render("~/bundles/jquery")
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.loader.prototype.options.text = "loading. please wait...";
$.mobile.loader.prototype.options.textVisible = true;
});
</script>
#Scripts.Render("~/bundles/jquerymobile", ...)
</body>
items.cshtml (this page gets loaded and rendered correctly)
<section id="items-view" class="view" data-role="page">
<section data-role="header">
....
</section>
<section data-role="content">
(navbars, ULs, LIs, etc. are here, with each LI a link to go to the details page)
</section>
<section data-role="footer">
....
</section>
</section>
item.cshtml (this page gets loaded but NOT rendered correctly, there is no jQuery Mobile styling)
<section id="item-view" class="view" data-role="page">
<section data-role="header">
....
</section>
<section data-role="content">
(ULs, LIs, listboxes, textboxes, etc. are here)
</section>
<section data-role="footer">
....
</section>
</section>
router.js (used to route between pages)
....
navigateTo = function (url) {
sammy.setLocation(url); // url = #/items or #/item/1234
},
....
In the js file for the item page, we’ve tried:
var $page = $("#item-view");
//$page.trigger("create");
//$page.listview("refresh");
//$page.page(); (this one kind of work but doesn’t style every object)
//$page.page("refresh", true);
but haven’t got any thing to work correctly and completely.
So, again, given our situation, is there a way to have a jQuery Mobile multi-page app with actual separate physical files and have all pages get style correctly? Or is there a programmatic way to force jQuery Mobile to style all pages correctly?
Thanks.
jquery mobile does NOT load everything from your second page.
when you require a new page with JQM (or it's ajax method), it loads parts of your page's DOMs and get all things under
<div data-role="page" id="yourPageID"></div>
so your could simply try put your stylesheet under "data-role", like this:
<div data-role="page" id="yourPageID">
<link rel="stylesheet" href="yourStyleSheetLink.css" />
</div>
then, when JQM requires a new page, your stylesheets will be loaded.
as a non-English speaker, i hope you can understand my words :)
I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.
<div id="toolbox"></div>
<script type="text/javascript">
addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>
Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');
If you have a typical toolbox like this...
<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
Once your ajax content has finished loading into the dom you could do the following...
addthis.toolbox('#myToolbox');
However, watch out for this!
Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.
In the case of multiple toolboxes
you should probably use a class instead. See the following code for the final example.
html
<div class="toolbox">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a>
</div>
<div class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
javascript:
//on complete of ajax load
addthis.toolbox('.toolbox');
var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false
};
var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}
addthis.method("#Button2", addthis_config, addthis_share);
Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.
method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.
You are never really calling anything as you aren't waiting for the DOM to ready:
<script type="text/javascript">
$().ready(function () {
addthis.method('#toolbox', [configurationObject], [sharingObject]);
});
</script>