jQuery Tools v1.2.7
Issue:
Currently handle three tabs, which content is loaded via AJAX call to a PHP controller (MVC).
The first tab loads a simple HTML file returned by the controller.
The second tab loads two different files, called by parallel AJAX calls (left panel and right panel). Things work well here.
The third tab does pretty much the same, but the problem is that THE RIGHT PANEL DOES LOAD UNLESS THE ENTIRE PAGE IS RELOADED, THEN ALL TABS WORK FINE
Something to notice is that when I switch from tab 2 to 3, the right panel does not show up, I then go back to the previous tab 2 and now the panel which was supposed to appear on tab 3 is showing on tab 2.
I have done my research, but everything points to JQuery UI, I am using tools. I need a way to either refresh the tab on each transition or avoiding the kind of "overlap".
I have tried redesigning the site, but the issue still happens.
If any code is required let me know.
Thanks in advance.
Thanks for looking into this:
Home (where tabs are loaded):
<ul class="css-tabs">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="css-panes">
<div id="dynamic-pane"></div>
<div id="dynamic-pane"></div>
<div id="dynamic-pane"></div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div.#dynamic-pane", {
history: true,
effect: 'fade',
onBeforeClick: function(event, i) {
var pane = this.getPanes().eq(i);
pane.load(this.getTabs().eq(i).attr("href"));
}
});
});
</script>
The second tab, is loaded with content from the controller2 via JQuery tools "href" method. Then, such content is an HTML file with a JS which makes another AJAX call:
<script src="../js/secondTab.js"></script>
<script>$(document).ready(function() { showLeftPanel(); showRightPanel(); }); </script>
<div id="dynamic-content-left"> </div>
<div id="dynamic-content-right"> </div>
The JS script includes something like:
function showLeftPanel(){
$.ajax({
type: "POST",
url: "controller2/showLeftPanel",
contentType: "html",
success: function(response) {
$("#dynamic-content-left").html(response);
}
});
};
function showRightPanel(){
$.ajax({
type: "POST",
url: "controller2/showRightPanel",
contentType: "html",
success: function(response) {
$("#dynamic-content-right").html(response);
}
});
};
The reason for this, is because this project has smarty and the render() method is used to return the "piece of HTML code" to complete the page.
THINGS WORK FINE HERE, BUT WHEN I GO TO THE THIRD TAB ONLY THE LEFT PANEL IS DISPLAYED AND I HAVE TO RELOAD THE PAGE TO FIX IT, E.G, THE RIGHT PANEL SHOWS UP
I think the issue may be related to the way the tabs load the content and the fact that AJAX does not load the content in the second tab since it "$(document).ready(function({});" was already loaded in the previous tab (tab 2). Once I reload the page, the document is refreshed and then a new AJAX called is performed.
Hope it makes sense.
P.S The same process applies for third tab, same scripts structure. What changes is the content of the HTML files (web content).
I resolved the issue.
Summary:
use of unique ID's for each div.
use of unique id's for each HTML input, since AJAX was not getting the correct values.
All seems to be working fine with this implementation now.
Related
We are expecting the below things:
Would like to show the page with updated values.
Then show the session attribute.
What is happening for the below code, session message displayed first and then the page is getting reload.
$.ajax({
type: "POST",
url: "startSelectedServer",
data: { selectedJvmHostIp : selectedJvmHostIp, selectedJvmPort : selectedJvmPort },
success: function(result){
1. location.reload();
2. $("#save-message-div").show();
},
error : function(e) {
}
});
<div id="save-message-div" style="background-color: #DFF2BF; padding: 8px;display:none">
<h2 id="save-message" style="color: #4F8A10"></h2>
</div>
But we are expecting to show message after reloading the page.
In above 2 is executing first then 1 is executing.
ok it appears to me that you are trying to perform a server-side functionality and then refresh the page and have a message appear that the functionality has occurred.
This is fine as far as it goes but will not work the way you have it. To do it closest to the way you invision you will want to put in conditional logic on page load to determine if it is appropriate to show the div.
Even if your page did not show the div prior to reloading, the way it is written, when the page reloads it will not still be executing the same piece of script - it is a blank slate with only what you pass to it.
I am not sure why you want to reload the page at all actually; you can, and should [to make use of ajax], just use the information client-side that is returned from the server asynchronously.
I'm making an Ajax call to the same PHP page from a link on the page.
For the final code I'll be passing some parameters but for the sake of keeping it simple, I'm not doing that in the code below. Reason I'm using Ajax is to place a "Please Wait" message as it seemed the most effective way to do it (usually you do a call from one page to another, which works perfectly fine).
I do get to see the "Please wait" message accordingly after clicking on the link but it keeps the content of THE <BODY> section below the new content being displayed by the Ajax call. So int he example, below, I basically end up with 2 links that say "Click here". How do I make it load just the new content (which in this case is identical)?
This must be simple but I'm not sure what I'm missing here.
PWAIT.PHP
<body>
<?php sleep(3); //To allow for the message to show as I have nothing processing here ?>
Click here
<script>
function loadingAjax(div_id)
{
$("#"+div_id).html('<center><img src="http://img/ajax-loader.gif"><b>Please Wait ...
</b></font></center>');
$.ajax({
type: "POST",
url: "pwait.php",
success: function(msg){
$("#"+div_id).html(msg);
}
});
}
</script>
<div id="myDiv"></div>
</body>
After our discussions, we've discovered that your code is working exactly as it should. It is doing exactly what you ask it to do.
Load the page from the server
Click button
Loads the same page via AJAX
Duplicates the page contents into a div on the page
Display duplicate contents
That's what you've asked, that's what you've received.
I have three pages on my site.
Page 1: A simple page where the user enters the database search criteria
Page 2: An HTML5 Adobe Edge animated page
Page 3: The search results page
Page 1 loads very fast. Pages 2 and 3 load slowly (about 3 seconds each).
I want to load page 2 while the user is entering their search criteria into Page 1. Once the user presses enter on page 1, I want page 2 to display immediately. While page 2 is displaying (animating), I want to load page 3. After page 3 loads BUT not before 5 seconds I want page 3 to load.
Excellent answers from everyone: OK. Here's what might work best: Comments welcome!!!!
<script>
$(document).on('pageinit', '#first', function(){
$('#search').click(function(){ // When user submits form
$.ajax({ // Call HTML for page 2 (adobe edge animation)
url: "mypage2.html",
success: function(html){ //When receiving data :
$('#second').html(html); //puts data into second div
$('#first').hide(); //hides the first one
$('#second').show(); //shows the second one
setTimeout(showThird,5000); //pretending there's a loading, only for demo purposes
}
})
});
$.ajax({ // Call HTML for page 3 (adobe edge animation)
url: "mypage3.html",
success: function(html){ //When receiving data :
$('#third').html(html); //puts data into third div
$('#third').hide(); //hides the third one
}
})
function showThird(){ // hides second div, show third div.
$('#second').hide();
$('#third').show();
}
});
</script>
</head>
<body>
<div id="first">
<input type="button" id="search">
</div>
<div id="second">
</div>
<div id="third">
</div>
</body>
</html>
I could really use some help figuring out the best way to do this. I'm already using jQuery and jQuery Mobile.
HTML and the browsers that render it do not inherently behave like this. You cannot queue pages into a loading buffer as you suggest. HTML executes commands in a synchronous fashion, ie: when a page is called, the old page is discarded and the new one begins to load. There is no way to change this fact...there are, however, some tricks to get the illusion of the effect you are looking for.
As mentioned in another answer, AJAX (Asynchronous Javascript & XML) is a technique utilized by almost every site/application today which allows you to pull content into a pre-existing page with an asynchronous call. jQuery makes AJAX calls rather simple so I'll let you look up the code necessary.
You may want to consider loading the animated page (I am assuming it is a loading animation) when the form page is loaded. Rather than making an additional call to pull the animation page, you can simply hide the animation initially...and show it when the form is submitted...then hide it again when the new information is pulled onto the page!
You should load your pages using ajax.
For example, you would have one div containing page 1. When page 1 loads, page 2 is also loaded asynchronously and its content is loaded into another div, hidden.
When the user submits his search, div 1 is hidden, and div 2 is shown.
At the same time, page 3 is called asynchronously via ajax, loaded in a hidden div 3.
When loaded, div 2 is hidden, and div 3 is shown.
This is the ajax part :
$.ajax({
url: "page2.html",
success: function(html){ //When receiving data :
$('#second').html(html); //puts data into second div
$('#first').hide(); //hides the first one
$('#second').show(); //shows the second one
}
});
Working demo JSFiddle : http://jsfiddle.net/38DPJ/
I guess you can use an AJAX call. Try something like this:
$.ajax({
url: "page2.html",
cache: true,
success: function(html){
}
})
And for page3 you can try
$.ajax({
url: "page3.html",
cache: true,
success: function(html){
setTimeout(function(){window.location.href = "page3.html";},5000);
}
})
I am new to Jquery mobile.
I am trying to get Sliding effect when i navigate to another page say # display2 from thie below code.
but i am not able to get slide effect.
If I remove the rel="external" i am able to slide but on the #display2(page whihc i would navigate to),the query string values are returned as null.
so if i put rel="external" the parameters are passed to #display2 but slide transition not working.
if i remove re="external" slide works but the querystring parameters are returned null.
can you please let me know is there a way where both of them work together.
('#display').on('pagebeforeshow', function () {
// $(this).find('[data-role=header] .ui-title').text(json.getLOBXMLResult[currentItem].FolderName);
$.ajax("AppstoreWS.svc/getLOBXML", {
beforeSend: function (xhr) {
$.mobile.showPageLoadingMsg();
},
complete: function () {
$.mobile.hidePageLoadingMsg();
},
contentType: 'application/json',
dataType: 'json',
type: 'GET',
error: function () {
//alert('Something awful happened');
},
success: function (data) {
result1 = data.getLOBXMLResult;
$('#categoryList').children().remove('li');
$.each(result1, function (index, output) {
$('#categoryList').append('<li>' + output.FolderName + '</li>');
});
$('#categoryList').listview('refresh');
}
});
});
Part 1 - why rel=external worked & other options
The reason why rel=external works with no transition is because this expects the browser to open an external page and therefore, disable ajax. To counter-effect this, you've got numerous options :
By using Single page template
You could make your two pages into a single page. This is called a single page template and your second page's reference would be #page2 (or any name you'd give as the ID). This is how it'd look like :
<div data-role="page" id="page1">
<!--Stuff in page 1-->
</div>
<div data-role="page" id="page2">
<!--page 2 stuff-->
</div>
Advantages
The DOM can leverage the power of ajax driven navigation.
This would make partial loading, script loading easy, as you'll need to refer all this only once.
Data-transfer between pages is very simple. You'll just have to store the data in you need in a global variable or in the data property of the #page2, and retrieve it in the pageinit or pageshow (or any event) of the second page.
Transitions, etc will work.
There will be no page refresh.
Disadvantages
If the HTML content of the two pages are large, it'll be difficult for maintenance.
By using rel=external
As you might have seen, rel=external can be used only when a page refresh is absolutely needed. Its upto the user's choice. If an a tag is marked with rel=external it means the browser will treat it as an external link, and will ignore jQuery Mobile's ajax navigation system.
By referring all the scripts of page 2 in page 1
Generally, to be able to use page transitions, you must use ajax system of navigation in jQM. So the general behaviour of ajax is as follows :
page1 will request for page2 in page2.html.
The <body> of page2.html alone is taken from page2.html.
The <head> section( which might contain your scripts, which might have your query-string logic) will be ignored.
So to change this, you can refer to page2's scripts in page1.html's head so that these scripts will be loaded and ready when jQM's ajax system pulls the body of page2.html.
<script src="jqm.js"></script>
<script src="page1.js"></script>
<!--page 2 scripts-->
<script src="page2.js"></script>
Advantages
Your transitions will be working properly.
The common scripts will not be referred to multiple times, hence much faster loading times.
Query strings will also work
Disadvantages
If the two pages have very little in common, you'll end up having unwanted scripts in your first page.
What if you have more than two pages? What if you have 10 pages? Will you refer to all 10 pages' scripts in page1. I dont think thats the way.
By referring to page2 scripts inside "data-role=page" section of page2.html (recommended)
This will bring the scripts along with the page when ajax brings it in. This will also work with query strings. This will look something like this :
<div data-role="page" id="page2">
<script src="page2.js"></script>
<!--- your html-->
</div>
Advantages
The scripts pertaining to a particular page are restricted to within that page.
Transitions will work.
Query strings will also work
Part 2 - alternative to query string
The reason I'm saying this because Query strings are archaic technology, because at that time, there was no way to store to data. They're also insecure because user can see the data you send over the URL. You must consider using something like localStorage. I'm not saying you must NOT use query strings. It's just that there are better options available for mobile data storage. See this link for more info about how you can use this localStorage. Also, see this for all the options you have. Now, looking at your query string :
platform=' + output.FolderName + '&sid=test
This could easily be made into an object. So in the click function of the anchor tag inside <li>,
$(document).on("click", "li a", function(e) {
//stop default action.
e.preventDefault();
//take the href; Im assuming its page2.html?platform=outputFolder&sid=test
var params = this.href.split("?");
//now params[0] = page2.html
//param[1] = platform=outputFolder&sid=test
//set this in localStorage
localStorage["page2params"] = param[1];
//change to page2.html
$.mobile.changePage("page2.html", { transition : slide });
})
Then, in the page2.html's pageinit method, you could retrieve it for your use :
//assuming you have a page with page2 as id in page2.html
$(document).on("pageinit", "#page2", function() {
var params = localStorage["page2params"];
//do anything you want with params.
});
I am using jQuery to make a website, and I want to be able to have my navigation in a separate div from my content. Also, I want to be able to have a sort of tabbed navigation system such that I can click a link in the navigation and it will load the content into the main content div. Basically, I want to do this so that I can just maintain one page with all the content, rather than a bunch of pages for each section. I have included a picture that will hopefully make my question much more clear (right click and "viw image", it's too small on this page):
example http://img402.imageshack.us/img402/1733/examplew.jpg
$('#navlink').click(function() {
$("#maindiv").load("/url.html");
return false;
});
I would encourage you to use event delegation. For instance we can use the .on method to attach a single event to the navigation pane that will listen for clicks on links:
$("#navigation").on("click", "a", function(e){
e.preventDefault();
$("#content").load( $(this).prop("href") );
});
Which works with the following markup:
<div id="navigation">
Home
Gallery
</div>
<div id="content"><!-- content will load here --></div>
Considering that you want one page with all of the content, you could simple hide all but one main div with css, and then use javascript/jQuery to show one div when a tab is clicked, and hide all of the other (main divs).
Have your navigation links change the html of your center div
<a href="#" onclick="$('#centerDiv').html('your content');">Click me<a>
if you want it to be more dynamic use ajax to load it.
and if you want to get a bit more fancy try out the Tab widget
This calls for the jQuery load() function! Go to http://remysharp.com/jquery-api/ and search for 'load' -- you just need to target the div.
By the way, this is sort of an alternative to frames or server-side includes. The only bad thing about this approach is that Search Engines won't be able to follow your links.
Using ajax with jQuery its pretty simple and totally controllable:
$('#navlink').click(function() {
$.ajax({
type: "GET",
url: 'URL_OF_THE_RESOURCE',
//(maybe you can hold this in the href attr of the anchor tag)
//in that case you can use $(this).attr('href');
dataType: "text/html", //spectating HTML back from the server
timeout: 8000, //Wait 8 second for the response
error: function() {
alert('ERROR');//case of server error or timeout give a feedback to the user
}, //end error
success: function(html) {
$('#mainDiv').html(html); //Replace the content with the new HTML
} //end succes
}); //end ajax
return false;
}); //end click
Instead of usign an ID, you could use a dummy class (like "navlink") on all those navlinks, so instead of referencing the selector to the ID, reference it to the class like:
$('.navlink').click(function(){
...
and the url parameter will be:
url: $(this).attr('href'),
That way you just set this once and all the links will get the functionality and still give support to users that don't have JS active.