jQuery Mobile load second page from new html - javascript

Say I wanna load a new html file, with some jQuery pages, like this:
$.mobile.changePage("some_page.html");
If this html file has two pages inside, how do I load not the first, but the second page?
I Tried
$.mobile.changePage("some_page.html#second_page_id");
But it doesn't work.
Thanks

Dude try to make your second page element data-url as <div data-url="page.html&subpageidentifier">
in the target html page. and let me know is that really worked for you.

The $.mobile.changePage() function takes the first div with data-role="page" and loads it into the dom with an AJAX call. The best solution is to move the second page to the top of the html code.
Otherwise, if you want to decide to load the first or second page, you could put them in different files.
Maybe there's a way of calling the second page, but i have no idea of how to accomplish this.

You can manually grab the element you want:
//delegate the event binding for some link(s)
$(document).delegate('a.my-link', 'click', function () {
//show the loading spinner
$.mobile.showPageLoadingMsg();
//make the AJAX request for the link's href attribute
$.ajax({
url : this.href,
success : function (serverResponse) {
//get the data-role="page" elements out of the server response
var $elements = $(serverResponse).find('[data-role="page"]');
//you can now access each `data-role="page` element in the `$elements` object
$elements.filter('#page-id').appendTo('body');
//now use changePage to navigate to the newly added page
$.mobile.changePage($('#page-id'), { /*options*/ });
//hide the loading spinner
$.mobile.hidePageLoadingMsg();
},
error : function (jqXHR, textStatus, errorThrown) { /*Don't forget to handler errors*/ }
});
//stop the default behavior of the link, also stop the event from bubbling
return false;
});
But I have to say, with the way jQuery Mobile currently works, you're better off putting each data-role="page" elements in a separate document.

ทำแบบนี้ครับ
ออก
สำคัญคือให้ใส่ data-ajax="false"
คุณก็จะ changepage ได้จากต่างหน้า

Related

How to do a partial page refresh with Javascript/jQuery

I have two separate navigable areas on my site. The lefthand column has its own navigation, and the righthand column (the main content area) has its own set of links:
I'd like to be able to press on a link on the left-hand side (like "Resume", "Email", etc.) and only load the new page within that lefthand sidebar (without refreshing the entire browser window).
I am using divs to load the right side's (main content) navigation, and the entire sidebar's content:
<script>
$.get("navigation.html", function(data){
$(".nav-placeholder").replaceWith(data);
});
$.get("sidebar-content1.html", function(data){
$(".sidebar").replaceWith(data);
});
I'm doing basically the same thing for the lefthand sidebar to load its three links:
<script>
$.get("sidebar-navigation.html", function(data){
$(".sidebar-nav").replaceWith(data);
});
</script>
When I press on a link that's inside the left sidebar, how do I just refresh that pink area?
Thanks for any help!
If I understand your question correctly, then you might find JQuery's .on() and .load() functions useful here.
The .on() method allows you to bind event handlers to DOM elements that are not currently present in the page, which is useful in your case seeing that the contents of navigation.html are dynamically added to the page.
The .load() method is a helper that basically achieves what you're doing with $.get() and $.replaceWith() via a single method call.
For details on how these can work together, see the comments below:
/*
Use $.on() to associate a click handler with any link nested under .sidebar-nav,
even if the links are dynamically added to the page in the future (ie after a
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {
/*
Get the href for the link being clicked
*/
var href = $(this).attr('href');
/*
Issue a request for the html document
or resource at href and load the contents
directly into .sidebar if successful
*/
$('.sidebar').load(href);
/*
Return false to prevent the link's default
navigation behavior
*/
return false;
})
Hope that helps!
First of all you don't need to use replaceWith method of jQuery, that is for returning the replaced elements which you don't have any in this example. You can use $(".sidebar").html(data)
For the links to load in another div, you could do something like this right after you load navigation links.
// this will interfere all the links would load inside sidebar-nav div
$("div.sidebar-nav a").click(function(event) {
var urlToGet = $(this).attr("href"); // gets the url of the link
$.get(urlToGet, function(data) { // loads the url
$("div.main-content").html(data); // puts the loaded url content to main-content
});
event.preventDefault();
});
You can use like below example.(JQUERY)
<div id="div3" class="left">
<button onclick="refresh()" id="refresh">
Refresh
</button>
</div>
<div id="div4" class="right"></div>
var content="<h1>refreshed</h1>"
$(document).ready(function(){
$('#refresh').click(function(){
$('#div3').html(content); //it will just overrides the previous html
});
});

Duplicate javascripts are getting loaded ajax

I'm developing a web based document management for my final year project. The user interacts with only one page and the respective pages will be called using AJAX when the user click the respective tabs (Used tabs for navigation).
Due to multiple user levels (admin, managers, etc.) I've put the javascripts into the correspondent web pages.
When user requests the user request everythings work perfectly except some situations where some functions are triggered multiple times. I found the problem. It is each time the user clicks a tab it loads same scripts as new instance and both of them will be triggered when I call a function.
to load the content I tired
.load and $.ajax(); non of them address the issue.
I tried to put all into the main page at that time my jQueryUI does not work. I tired
$(document).load('click', $('#tab_root li'), function(){});
Same issue remain.
Can anyone help me out this issue?
--Edit--
$(function){
$(document).on('click','#tabs',function(e){
getAjax($(this))
});
}
//method to load via AJAX
function getAjax(lst){
var cont = $(lst).text();
$.ajax({
url:'../MainPageAjaxSupport',
data: {
"cont":cont
},
error: function(request, status, error){
if(status==404){
$('#ajax_body').html("The requested page is not found. Please try again shortly");
}
},
success: function(data){
$('#ajax_body').html(data);
},
});
}
You can't undo JavaScript after it has been executed by simply unloading the file or removing the script element.
The best solution would probably be to set a variable in each JavaScript file you include in your ajax data and include them from an online inline JavaScript inside the ajax data along with a conditional like such:
<script>
if(!tab1Var) $.getScript("filename");
<script>
Older Solutions
You can manually unbind each event before setting them with off.
$(function){
$('#tabs').off('click');
$('#tabs').on('click',function(e){
getAjax($(this));
});
}
Alternatively you can initialize a global variable (eventsBound1=false) for each tab in the main html:
$(function){
if(!eventsBound1){
$('#tabs').on('click', function(e){
getAjax($(this));
});
eventsBound1 = true;
}
}
The tabs click event is only an example you have to do this for each time you bind an event in the scripts that are being reloaded.
if all the events are bound to things inside ajax_body, a final thing you can try is:
success: function(data){
$('#ajax_body').empty();
$('#ajax_body').html(data);
},
You have bind an event click on 'document' so getAjax() only replace the '#ajax_body' not the 'document'.
This means old event is still attached to the 'document' all you need is to unbind event by using $(document).off('click'); or change 'document' to other elements.

Jquery Ajax loading the whole page except a certain div

I am writing an app that has an audio player at the footer. each Time i click on a link whole page itself loads thus the audio player is being restarted, my question How would you reload the whole page except a certain div?
I believe that is not possible. Maybe change your approach. Reload only specific areas you want to refresh. In fact, these areas may be included in a single (and possibly big) div tag. Then you can just update that div using jQuery ajax. For that, load is the way to go:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
Edit:
Here is a more specific example using links (just wrote it off of my head):
<script type="text/javascript">
$(function(){
$("#myLink").click(function(event){
$("#updateThisDiv").load($this.attr('href'), function(){
alert('div updated!');
});
return false; // or event.preventDefault();
});
});
</script>
And your link would look like this:
<a href='pathTo/Page' id='myLink'>Link text</a>
...
<div id="updateThisDiv"></div>
So you are using jQuery ajax. Even you reload whole div by ajax, the audio object remains same. So you can again generate your audio progress with the help of the object.
EDIT:
Just suggestion if you are reloading your page.
First save the currentTime of your audio object on your session or even database using ajax. And when user load that audio, start with that currentTime.
you can do this something like this:
yourAudioObject.addEventListener(
'timeupdate',
function() {
$.ajax ({
type:'get',
url:'your/path/?currenttime='+yourAudioObject.currentTime,
......

jQuery replace all HTML

I'm trying to replace all the HTML (including the HTML tags) with another page. What I'm trying to do is having a website acting as an app even when navigating the another page.
Here is the code :
(function($) {
Drupal.behaviors.loadingPage = {
attach: function(context,settings) {
$('a').click(function(event) {
event.preventDefault();
// Create the loading icon
// ...
$.ajax({
url: $(this).attr('href'),
success: function(data) {
$('html').replaceWith(data);
}
});
});
}
};
})(jQuery);
I've tried several things. replaceWith() causes a jQuery error in jquery.js after deleting the HTML tag, I guess it is because it can't find the parent anymore to add the replacement.
The best result I got was with document.write(data). The problem is, the javascript code on the loaded page is not executed.
Anyone got a better idea ?
A better idea? Yeah, just load the new page normally by setting window.location instead of using AJAX. Or submit a form.
Otherwise, if you want to load something to replace all of the visible content of the current page but keep the current page's script going, put all the visible content in a frame sized to fill the browser window - which, again, you wouldn't populate using AJAX.
(I like AJAX, but I don't see why you'd use it to replace a whole page.)

Execute JavaScript function with externally loaded link

I'll admit the title is a bit confusing but it was hard to come up with a better one.
Ok, so What I have is 3 pages, first is the main page that the user loads up and the other 2 are ones that are going to be loaded into the main page with jQuery.
Here is the JavaScript code on the first page:
$(document).ready(function(){
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php");
$('[name=loadRegisterForm]').click(function() {
$("#mainWrap").load("modules/web/registerForm.php");
});
});
First of all it loads the login form into the page and then it listens for a link to be pressed which will then load up the register form in its place if it is pressed.
The link is in the login form that gets loaded, but unfortunately it doesn't work. What am I doing wrong?
I've tried placing the link on the main page with the JavaScript code and it does work, so is it just the fact that loading the link after the JavaScript has all ready been loaded going to leave it not working?
You need to have a callback function for the first load call. In side that call back is where you would set the click handler for the $('[name=loadRegisterForm]') element. Basically,
you are binding a handler to an element that does not exist until the first load is complete.
$(document).ready(function(){
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php", null, onLoadComplete);
});
function onLoadComplete()
{
$('[name=loadRegisterForm]').click(function() {
$("#mainWrap").load("modules/web/registerForm.php");
});
}

Categories