I'm trying to renew my company intranet using jquery, ajax and php. General aspect of the site is a drop down menu at the top loaded into a div and a content div where i load pages clicked on drop-down menu. The problem come out when inside content i load a page which inside have a tab menu, what i do when a tab is clicked is to load a html structure page with form and fill it by POST call.
The question is it correct load data when requested instead of pre-load it and show them when called as seen in a lot of example in the web? Working in my way I get a lot of data cached so when i click for confirm some data I send request several data instead of one..
what is the best way to work with this languages?
I find my goal solution suggested by Nathan I pre-load all data in one time for all forms, here is the code:
$("#div_0").show();
$("#scheda_eti > div").css({"background-color": "white", "color": "black","cursor":"hand"}); //tabs div
$("#"+schemi[0]).css({"background-color": "red", "color": "white","cursor":"default"});
for (var x=0; x<schemi.length; x++)
{
$("#div_"+x).load("./schemi/sch_"+schemi[x]+".php", {azione: "vedi"});
}
$.post("./php/global.php",
{azione:"vedi", contratto: $("#suggest_hidden").val() },
function(xml)
{
if ($("status", xml).text()=="1")
{
$(xml).find("form").each(function()
{
var id_form=$(this).attr("id");
scorriDati(xml, "form_"+id_form);
});
}
else
{
$("#scheda_ris").html("<img src='./img/validno.png' alt='errore'> <span style='color:red'><p>Attenzione!<br>codice non trovato!</p></span>");
}
$(xml).find("errore").each(function()
{
$("#scheda_ris").append("<img src='./img/validno.png' alt='errore'> <span style='color:red'>"+$(this).text()+"<br></span>\n");
});
},'xml'
);
To see some code you ca watch to my previous posts linked here:
question1
question2
thanks in advance
ciao
h
I think jQuery UI Tabs is what you're looking for. You need to include jQuery UI in your code, certainly after jQuery.
Order:
<link rel='stylesheet' href='http://jquery-ui.googlecode.com/svn/tags/latest/themes/ui-lightness/jquery-ui.css' />
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js'></script>
If you don't like the UI lightness theme, you can choose any from the Theme Gallery. For example, if you want the UI darkness theme, just replace ui-lightness with the theme's name in lowercase, and with hyphens instead of spaces.
I guess the answer to "is it correct load data when requested instead of pre-load it and show them when called?" is "which will the user prefer when switching to a different tab?"
no delay (all content loaded during initial page load)
short delay (ajax lookup of the new tab's content)
a full page load (a full round trip, no ajax needed)
In many cases you can get good results with the first or the third approach. Don't overuse Ajax.
Here's a blog rant about overuse/correct use of Ajax... I haven't honestly read it and don't necessarily endorse the whole thing, but it might help.
Related
I thought this would be really simple but obviously after a couple of days trial and no success I have to ask the people to help, looked everywhere.
right im basically creating a php template without much guidance on the foundation 4 framework with is a responsive framework. Now this framework is rather basic and so to add page transitions ive had to use jquery to do what i believe is an ajax call to take "content" from another page and display it on the template page index.html
for which I am currently using the following
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide(1000,loadContent);
$('#load').remove();
$('#main_wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show(1000,hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
</script>
NOW before i changed over to using ajax and jquery i was operating the menu "active" class and the page name with a simple variable set on each page in the first line listed as $page='' and then the page name
now that im loading the content with ajax even if i include this variable in the content of the new page it will not update in either the or the menu title
im very sorry i dont write things correctly im new to this forum thing
thank you for the help in advance
:) I prefer someone to explain what i need to do and how to do it rather than just copy and pasting code as im a learner :)
You probably want to load the page and parse the result in jQuery to get the new page’s <title> tag and set the requesting page’s <title> tag.
The only thing I’d ask is: why are you doing this? Are you just wanting AJAX page navigation in your website instead of the traditional propagating navigation?
I am only able to answer one part of your question due to extreme confusion, so:
First off, here's why your url changes:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
You are modifying it with that line. That line, however, has an interesting little quirk:
attr('href').length-0
at the end. Why the -0? That would make no difference. I'd clean it up.
Outside of that, I'm incredibly confused with what you're asking so let me try rephrasing it and you can tell me what I'm missing.
You want to have a user click on a navigation link, and load that link's content via an AJAX call using jQuery, and then replace the content on the page with the newly loaded page, correct?
When you say "right on top main page i have variable $page = then the page name", what do you mean by "main page"? Do you mean it's a line of text in HTML? Part of a script that you haven't included here? Part of your PHP code?
And then you say "ive tried including the tag in a div that changes along with the above content"- what is "the tag"?
By reading this 4 or 5 times I could barely discern the above understanding of what you're trying to do.
Please make heavy edits to you question- it's incredibly hard to understand.
Lastly, why are you trying to replace the browser's functionality of a user clicking a link and loading content? That's what the browser is for. The browser also, conveniently, has a loading indicator in the url bar usually (or some form thereof), letting the user know the content is still loading.
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
So first off, look at the jQuery doc for the load method:
http://api.jquery.com/load/
Your issue is that it is calling for three arguments, and you are passing two. If there are multiple arguments listed and you only want to pass SOME of them, you still need to supply a null value for the ones you want to "skip". Try changing your call to this:
function loadContent() {
$('#content').load(toLoad, null, showNewContent);
}
You'll notice that I'm passing "null". If that doesn't work, pass an empty string, like this:
function loadContent() {
$('#content').load(toLoad, "", showNewContent);
}
That second argument is data to be passed with the request. It's the THIRD argument that you list as your callback, which as far as I can tell is where you're making the mistake.
I am trying to load a specific portion of an article with using of jquery load() function when a tab is clicked. The tab is inside an article and trying to show another article within the first article from where the tab is being clicked. The jquery code I have put inside the template.php of choosen template. The main problem is that when I click nothing is comming inside the first article under the tab. I am using joomla2.5.11 version. Please give some suggestion.The jquery code what I am trying is shown below:
$(function(){
$("h3.menuheader").click(function(){
$(".active-tab").removeClass("active-tab");
$(this).addClass("active-tab");
$(".tabcontent-ul").slideUp();
$(".tabcontent").load("http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1",function(){
$(".tabcontent").slideToggle();
});
});
});
Unfortunately I don't think you've provided enough to diagnose this issue. But perhaps I can help with how I would diagnose.
To start with, try this instead:
// http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1
$(".tabcontent").load("http://www.google.co.uk",function(){
$(".tabcontent").slideToggle();
});
Then open up your developer tools and see if a call is being made to load that data.
If it is, then you need to consider that it might be loading the data and putting it in another element you can't see.
So to test, create a new container on the page near your footer, which you know will be visible with a specific #ID like <div id="testID"></div> and load into that. Once that is working, look to confirm your .tabcontent element is the one you want using something like console.log().
I am trying to use the jquery to Prevent page realoading. I have the whole code php done... and is functional. if you can please go to http://www.jonathansconstruction.com/gallery3.php and click on the different gallery SUbmenus for category View All, Kitchen etc... i'm using get for variables. However, I would like to use a jquery to process the php so i dont have to include it into the gallery.php and also, to prevent page reloading because it brings the page back up and that could be confusing. Any hlep willl be greatly appreciated THanks
UPDATE, Thanks for everyone that helped:
SO far i made an advance on the website, Corrected URL was edited on top of the post
Everything is working smoothly on the effects of quicksand.. HOwever, Lytebox Doesn't Load when a quicksand effect is placed. , at the beginning it loads just fine, but right after pressing one of the menus for the quicksand effect. It stops working. Also, I want to style my menu buttons as is in http://www.jonathansconstruction.com/gallery.php. I see jquery doesnt add and witht the sample I downloaded. and also the that says "gallery Pictures" dissapears ont he quicksand demo.
Any Help is appreciated. Below is the script.js code I have modified so far
$(document).ready(function(){
var items = $('.photo_show figure'),
itemsByTags = {};
// Looping though all the li items:
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);
$.each(tags,function(key,value){
// Removing extra whitespace:
value = $.trim(value);
if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
// Creating the "Everything" option in the menu:
createList('View All',items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#gallery_menu nav a').live('click',function(e){
var link = $(this);
link.addClass('current').siblings().removeClass('current');
// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:
$('.photo_show').quicksand(link.data('list').find('figure'), {adjustHeight: 'dynamic'} );
e.preventDefault();
});
$('#gallery_menu nav a:first').click();
function createList(text,items){
// This is a helper function that takes the
// text of a menu button and array of li items
// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:
$(this).clone().appendTo(ul);
});
ul.appendTo('.photo_show');
// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list'):
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#gallery_menu nav');
}
});
ANOTHER EDIT :
All Looking good So far Fixed Lot of problems, However, for some reason, the span I had on teh static html dissapears from display and even html code when loading jquery quicksand code..?? Here is the code i have on the html part of the website that Does Not appear on the live website for some reason.
<div id="portfolio">
<div class="photo_show"><span>Gallery Pictures</span>
the span part doesnt appear, dont know why
I had the TOp Part Resolvd. just moved the on top of photo_show div and edited positioning... HOPEFULLY Last Edit
the jquery for quicksand made my calendar dissapear, checked and yes it was some jquery conflict but dont know what can be causing it.. also the form validation not working as well ... any help is appreciated!
I visited your webpage link after correcting a typo in the URL for word construction.
I also see the problem that the page reloads when clicking on a sorting filter such as View All, Kitchen, and Miscellaneous which is what you want to prevent.
Unfortunately, those buttons are using URL Links asking to reload the webpage with a filtered option via query string. Nothing can be done for that method of filtering, your just going to reload the webpage since filtering is done on page load.
Perhaps this DEMO shows what you want to accomplish since it does not reload the webpage. That demo has markup that is easy to create and maintain which is build using the Quicksand jQuery Plugin. The tutorial for that demo is accessed using the link at the bottom right, but looking at the source HTML file shows how simple it is.
I made a downloadable demo using both Quicksand and Shadowbox, a lightbox alternative HERE, which might interest you since your webpage is linking the filtered icon results to a lightbox alternative named Lytebox.
Since your edit reflects your interest in Lytebox, the following markup will reinitialize that lightbox alternative after a filtering event has occurred with Quicksand. Update your script.js file accordingly.
$('.photo_show').quicksand(link.data('list').find('figure'), function(){
adjustHeight = 'dynamic';
initLytebox();
});
I also made a correction to your existing adjustHeight since it was using a semicolon instead of an equal sign, but the correct location and use of that is for something unrelated.
The reason that you are not seeing the bullets is because your not using ul/li tags that the demo is using.
I have a list of links which when clicked opens a link's corresponding DIV. These div's are hidden by default using both jquery .hide() and css display:none.
These divs all contain a php include to a file with a jquery product zoomer in, and because of the way I've made it, only the first one works and the div's below in the source order fail to work (they are included, but the jquery doesnt work) as I'm assuming it conflicts.
I'd love to be able to fix this apparant conflict, but haven't a clue what the issue may be, and as the site is "secret" I can't show the source here without giving away what it is.
So, i was thinking - instead of including these files via php, have them load in when the link is clicked, so only one of these includes is in the page at any one time!
Is this possible using jquery and some php?
--- edit ---
On further investigation - thanks to some of your comments below, it looks like jQuery's .load() looks suitable, but won't work for me. Here is my jQuery:
`
$('.urbaneCarousel li.dowrImg').click(function(){
$('ul.urbaneCarousel').hide();
$('.dowrDiv, .dowrDiv div').show();
$('.dowrDiv .insert').load('path/to/dowr.php');
return false;
});
`
Any advice? I'm 100% certain the path/to/ part is correct.
JQuery .load http://api.jquery.com/load/ | I guess you have to try to play with .load =)
It sounds like you might have some conflicts between those php files. it shouldn't be an issue to include different php's into your hidden divs at all. In any case, couple ways you can do this:
Include all your content via php upfront and simply show the divs on the browser (sounds like what you're doing)
< div id='mydiv1' style='display:none'>
< ?php include('myfile1'); ?>
< /div>
< div id='mydiv2' style='display:none'>
< ?php include('myfile2'); ?>
< /div>
etc.
Then, on some click event, you would do $("#div1").show(), etc.
or
2) simply create your divs empty and bind click events to the .load or .get calls for specific divs
so let's say you have two buttons btn1 and btn2 for those divs.
$('#btn1').bind('click', function() {
$("#div1").get('myfile1');
$("#div1").show();
});
The only problem with the second solution that it will go to the server to fetch data every time button is clicked.
UPDATE
try specifying full path in your .load or .get just to be safe. That might be giving you problems too. Here's a quick example (I am using codeIgniter, thus base_url() reference)
$('#btn_trigger').live('click', function(){
$("#dowrInsert").load("<?php echo base_url();?>auth/index");
});
<input type='button' value='Trigger' id='btn_trigger'/>
<div id="dowrInsert">
My text
</div>
This works fine
Well, I managed to resolve the conflict which was leading to me needing to use the .load() method.
I'm sure there was something within my wordpress theme which was causing this to mess up, so thanks to all those who helped me looking for ways round this, but I managed to accidentally fix my initial conflict in any case, so no longer need the .load() method as a workaround.
Basically, I want the same effect as the oldschool html 'frameset' I think.
Take a look at this page please:
http://onomadesign.com/wordpress/identity-design/alteon-a-boeing-company/
If a user selects a project from industry -> transportation for example, I would like that the right scrollmenu keeps its initial state when the new project page comes up. So they won't get lost and have to click again to be in the same submenu section.
So, the right thumbnail navigation should stay in the same way, I don't want it to reload.
Do I have to do it with frames or iframes? Or can I make some kind of jQuery call to 'not reload' that div? Maybe PHP? I'm sorry, I am not a programmer from origin.
Update:
Guys, I managed to put the whole thumbnail navigation code into a seperate php file, called sidebar.php. Now this gets called in my single.php (Wordpress) by <?php get_sidebar(); ?>.
Should it now be easier to make this sidebar.php NOT refresh on page reload? I've been looking at cookies, php sessions, iframes.. but I can't get it to work.
Any more help would be greatly appreciated!
Facebook kinda does this without frames for optimization's sake. They take every single link and, if supported, using AJAX to load the page content without reloading the layout.
Obviously, this sort of thing may require significant restructuring of the internals of your app. Another option is to simply store the menu's state as a cookie on link click (see the jQuery Cookie plugin) and, on every reload, either have Javascript look at the cookie and dynamically restore the menu to its correct state, or use your internal PHP to read the cookie and decide what menu to display.
But if you get really desperate, you may end up falling back on frames. Sometimes that can be okay - but try everything else first :)
You also can detect what menu item was activated (you got the page request due to clicking on the corresponding link) and use this information to restore/select this menu item.
At least that is what I do and... No cookies or AJAX required!
You can use a technique known as "AHAH" Asynchronous HTML and HTTP. Essentially you're doing a jQuery
$.post("whatever.html",function(data) {
$("contentdivelement").html(data);
}
You can wrap this in a function like:
updateContent(sPage) {
$.post(sPage,function(data) {
$("contentdivelement").html(data);
}
}
This will load the content from your "frame" page into the div without reloading the page.
You can also bind to each of the navigation links and use their HREF as your path to load in your content div such as:
$(".menuLink").click(function() {
var menuLink = $(this).attr('href');
updateContent(menuLink);
/* prevents the browser from taking the parent to that link */
return false;
});
ADDITION:
Your menu may look like this:
<ul class="myMenu">
<li>Frame 1</li>
<li>Frame 2</li>
</ul>
Also,
If you want it to remember the page you're on you can use cookies or #anchors. There are many ways to add "tab" or "menu" anchors but one way would just be to use a jQuery plugin.
The most COMMON and TRENDY way to do it is to use #anchors. Your browser address bar ass #frame1 to the end so when the page is refreshed or reloaded it will load up "frame1" automatically with some additional code.
You can even called the anchor #/frame1.html and read the anchor in
$(document).ready(function() {
/* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
updateContent(anchorContentVar);
});
Instead of updating your content using click-handlers I suggest a slightly different approach. Just replace your hyperlinks with this kind of link:
#info_page
Now set up a simple interval that reads out the current URL and updates the DIV accordingly:
__LOC = document.location.href;
setInterval(function(){
if (__LOC!=document.location.href) __LOC=document.location.href;
var fetchURL = __LOC.split("#")[1];
$.get( "/getcontent/"+fetchURL, function(d){ $("#mydiv").html( d ); } )
} 1000);
This allows visitors to use bookmarks as well.