This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 9 years ago.
Ok, so lets say that I have navbar eg.
<ul>
<li class="selected">home</li>
<li>about me</li>
<li>contact</li>
<ul>
and I have a content on a page that I want to change depending on which <li> is selected without reloading the whole page. It seems a bit pointless to reload the whole page just to update 2 divs.
eg. when home is selected I want to load home.php included in <div class='content'> + change class of <li> home</li> to selected etc.
should I use AJAX for this? or should I use $_GET -> altering the URL?
I am a beginner -> sorry for basic questions.
Thx for any kind of help!
You can use Ajax.
But if you're total beginner, another solution without Ajax :
• put all your content in a single file
• put IDs on your div, related to the content (div containing "about" content = div#about)
• just toggle the div on click, related to the content
Like this (JS with jQuery) :
$(document).ready(function(){
$('nav a').click(function(){
var dest = $(this).attr('href');
$('div.content').fadeOut(); // Hide all content divs
$(dest).fadeIn(); // Show the requested part
// You can do all of this using addClass / removeClass and use CSS transition (smoother, cleaner);
return false;
});
});
HTML updated:
<ul> <li class="selected">home</li> <li>about me</li> <li>contact</li> <ul>
If you had no idea of what is Ajax, I guess this solution is better for you.
To change part of your page from a new request, use Ajax. You can find a lot about it online.
That said, using ajax for basic navigation of a simple website is bad taste. Just do a normal navigation.
Related
I'm building a website while also trying to keep changing code an easy task.
For that, I include the navbar with <?php require_once('./includes/navbar.php'); ?> so that I only need to change the navbar.php to see changes site-wide.
I also use Bootstrap 5 and let it take care of styling the currently active page by using <a class="active"> (and also using the recommended aria-current="page" attribute).
Now my problem is that I need to somehow dynamically apply the above mentioned class and tag to only the active page. I have no idea how to do that in an elegant way but thought that this might be possible in PHP?
Does somebody know how to do it?
Click here to see code of the navbar
I did some research and managed to fix my problem with a little bit of javascript code which you can just add with <script></script> tags anywhere in the html code:
Give every link in the navbar html a unique id (e.g. id="pricing").
Add class="active" to active page and Bootstrap.css will style that element accordingly.
Remove class="active" from the other pages/links which are not active.
Set aria-current="page" to active page and set aria-current="none" to inactive pages.
in navbar.php:
<a id="home" class="nav-link active" href="index.php">Home</a> <!-- 1. -->
<a id="pricing" class="nav-link" href="pricing.php">Pricing</a> <!-- 1. -->
in pricing.php:
<script>
var pricing = document.getElementById("pricing");
pricing.classList.add('active'); //2.
pricing.setAttribute("aria-current", "page"); //4.
var home = document.getElementById("home");
home.classList.remove('active'); //3.
home.setAttribute("aria-current","none"); //4.
</script>
Hope this may help someone else too.
I'm working on a scrollable one-page website, in which each div represents a different section. For example, url is dynaone.com/index.php, and when I click on the menu's different buttons, it changes to /index.php#s1, #s2, #s3, and so on. In section nº 2 I added another menu that works with php GET, in a way that when you click on one of the buttons, it redirects you to index.php?id=1 and so on. Of course when I first tried it, it scrolled me back to the top of the page, 'home', as I wasn't specifying the section. But when I did, assigning "index.php?id=1#s2" to the first element in the inner menu, it redirected me to section 1. It doesn't matter which number I write after "#s", it will keep putting section nº 1 on top of the page.
I'm using SMINT's demo as a base, adjusting it to my website's needs, but I couldn't find anything related to GET method issues on the plugin's page.
I would really appreciate some help with this, as it's very annoying having to go back everytime I click to correctly view section nº 2.
This is part of my inner menu:
<div id="botonera_productos"><ul>
<li> Quemadores </li>
<li> BCAAs</li> </ul> </div>
This is my php section:
if(#$_GET['id']==1) {
?>
<figure><img src="imagenes/quemadores/1.jpg"><figcaption> ULTIMATE L-CARNITINA 500 60 TABS - <b>$330</b> </figcaption></figure>
<?php } ?>
And this is the site's main menu:
<nav class="subMenu" >
<div class="inner">
Home
Nosotros
Productos
Local
Envíos
Consultas
Facebook
</div>
</nav>
Thank you.
The question isn't very clear but basically:
The anchor is an HTML construct. So once the page is already loaded, you can use #whatever to take you to wherever on that page that the anchor has been defined; ala <a id="whatever">
The PHP arguments, like ?id=1 - a new page will be loaded depending on what you use here.
You can use anchors in conjunction with a PHP page (ie. a PHP page may have multiple anchors) but you cannot load a new page with anchors alone.
Maybe Javascript will help you achieve what you want to do. With AJAX calls and the like then there are far less restrictions on how you load data.
So I am using Twitter Bootstrap 3 to build my front-end, in this case simple tabbed menu. I was struggling a lot to make it work, because menu links didn't want to highlight properly when you click on them. By that I mean, if you for example click on the page about.php that link should be marked as active and therefore have some CSS styling applied on it. I saw many posts here on stackowerflow but they only partially worked for me. For example some jQuery code that people posted would do proper highlighting but would prevent links from working.
Finally I have found a solution that is working great except when I use pagination. Let me explain:
Here is the bootstrap html code of my menu:
<nav class="row">
<ul class="nav nav-tabs nav-justified">
<li> Home </li>
<li> About Us </li>
<li> Contact Us </li>
<li> Our Services</li>
<li> Portfolio </li>
</ul>
<nav>
In order to make menu highlighting working I am using this javaScrpt code:
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
So when I start the app index.php is marked as active and that is great, if I click on about.php I will go to that page and it is also marked as active, that is great too. But since I have pagination on index.php, and I click on Pagination link 2 url will change to: index.php?page=2, and highlighting will break, index.php will not be marked as active anymore.
Do anyone know what is going on here, and what can we do to fix this ? I'm not that good with JS.
Rather than just using window.location for your url, try using:
var url = window.location.pathname;
If your current url is www.mywebsite.com/index.php?page=2 the above should output /index.php.
You can use url.replace('/', '') to get rid of that first slash.
EDIT:
Since your pathname may have multiple parts, such as /something/index.php we need to deal with that. Another way of doing it is:
var urlpath = window.location.pathname;
In your code you have:
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
You can change the selector to:
$('ul.nav a[href="' + urlpath.split('/').pop() + '"]').parent().//...etc
This is doing the splitting and isolating the index.php portion in one go. index.php will of course be contact.php or whatever.php on other pages.
Try this JSFiddle I just created, showing the above line in action: http://jsfiddle.net/N9SHq/
Currently for my projects I create the navigation for each page manually and it looks something similar to:
<nav>
<ul id="mainMenu"><!--Main Menu-->
<li><a class="active" href="index.php">Home</a></li>
<li>Contact</li>
</ul>
</nav>
This works fine, however for projects that has many many pages it is not a really good practice or even efficient to do it manually. So I was wondering if there is anyone who can direct me to the right path and advice me on how to make my navigation dynamic? I know about PHP include and the .inc files - they are good. BUT I want to add class .active to the <a> of the page that is currently open. How can I do that?
BTW: I don't know if this s the right place to post this sort of questions here, but the moderator told me to post it here.
Use include to add a central php file, that contains a function which can take the current page as a parameter:
nav.inc:
function renderNavigation($current_page) {
//render you navigation
}
main.php:
require_once("nav.inc");
renderNavigation("Subpage 1")
I wish to be able to open page on a specific tab by sending a message via GET variable. I was thinking something like:
http://mydomain/mytimecards.php?tab=vte
Here is the code for the jQuery tabs:
<div id="tabs">
<ul>
<li>Submit Time Cards</li>
<li>View Time Entries</li>
</ul>
<div id="mytimecards">
etc ....
Is it possible to force the page to display the 2nd tab (#timecardReports) instead of the first ONLY IF ?tab=vte is received as a GET (or better yet POST) variable?
Assuming the plugin you are using allows you to set an active tab on load, you could do something like:
<li><a href="#timecardReports" id="vte" <? if(isset($_GET['tab']) && $_GET['tab'] == 'vte'){ echo 'class="active"'; } ?>>View Time Entries</a></li>
Replacing class="active" with whatever the plugin requires you to set.
Thanks, guys, Ben and itachi were onto the right solution. This worked:
http://mydomain.com/mytimecards.php?tab=vte#timecardReports
I found this by using firebug and watching what changed as the tabs were clicked. Thanks itachi.
Ben's suggestion enabled me to test for this condition and set it on page load.
Credit to them both.