when i click on this menu links i get it on my div, but how can i also set a URL variable so if i click <a href="admin.php"> i get my new url www.foo.com/admin.php i just see the load. if i access directly www.foo.com/admin.php i should get the index.php loading this admin.php and doing the process again, so my admin should also redirect when coming direct at it, someone help me with the way to set the URL with AJAX
var pathname = window.location.pathname;
$("#page-inner").load(pathname+'dashboard.php');
$('#main-menu a').on("click", function (e) {
if (this.href .indexOf('#') == -1) {
e.preventDefault();
$("#page-inner").load(this.href, function () {
}).hide().fadeIn('fast');
return false;
}
});
Related
I want that whenever my twilio call disconnects, the page should refresh itself automatically and a div that exists in different file should open. Here is my code
Twilio.Device.disconnect(function (conn) {
window.location.reload();
$('.dhxwin_active').show();
});
I think it is possible using querystring URL Like:
Twilio.Device.disconnect(function (conn) {
window.location = window.location.href + "?r=refresh"; // Get the URL Paramerter "r" according your requirement.
window.location.reload();
});
When page refresh you have got "r" value for URL
var refresh = '<?php echo $_REQUEST['r'] ;?>';
if(refresh == 'refresh') {
$('.dhxwin_active').show();
}
Please correct me if i am wrong
On my homepage I'm using the maximage fullscreen image plugin. When someone clicks on a
specific link (product page), I must find out what the current image in the slideshow is
and set it as the background-image in the product index page.
I'm making an ajax call the moment someone clicks the '/producten' link on the homepage and store it as a session variable.
The problem is, it's not making an ajax call, I can't see the POST request in my apache logfile, only the GET request for the '/producten' page. Is it going to fast? Can't I do a POST request just before I make the GET request? I can't pinpoint it. Here's my code:
homepage index:
jQuery(document).ready(function($)
{
$("a[href='/producten']").click(function() {
var best;
var maxz;
$('.mc-image').each(function() {
var z = parseInt($(this).css('z-index'), 10);
if (!best || maxz<z) {
best = this;
maxz = z;
}
});
var bg_image = $(best).css('background-image');
bg_image = bg_image.replace('url(','').replace(')','');
$.post('/producten', {bg_image:bg_image});
});
});
bg_image is set correctly, I tested it with a console.log(), and I get output.
/producten index:
<?php
session_start();
$_SESSION['bg_image'] = $_POST['bg_image'];
?>
In javascript:
/* $.post('/producten', {bg_image:bg_image}); */
this.href = this.href + '?bg_image=' + escape(bg_image)
In php:
if(isset($_GET['bg_image'])) {
$_SESSION['bg_image'] = $_GET['bg_image'];
header('Location: /producten');
exit;
}
I've created a php template with variables library and what not all pulled into an index page I've created a basic script with fades the page in and out on load and have got that working the next thing I wanted to do is to use my navbar links to pull formatted content into the page (as I'm using foundation 4 framework) now the code I tried is as follows
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
the idea is that onclick it removes the content with the wrapper displays a loading gif and then loads the page content which is stored in the link referred to in the
but its not working is just reloading the whole page . . . . i have tried reading up and it says that you can use
You can extract from another page using the load method thus >$('#targetElement').load('page.htm #container') syntax.
and using the get function but im not to good at all this jquery is there a way I can do it in php or where am I going wrong with what I've done.
Try this....You were calling the load, and functions inside improperly...
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
//window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show('normal',hideLoader);
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
When a user clicks a link the browser by default unloads the current page and loads the page indicated by that link.
You need to prevent the default behavior of the browser, in order to do this you need to call the .preventDefault() method on the click event that was triggered for that link.
$('#your-context').click(function(event) {
event.preventDefault();
/**
* the rest of your code here
*/
});
Pages loaded via AJAX methods. index.php is the base page, profile.php is the page loaded
jQuery: ("post" nothing to do with HTML request)
$('<a/>', {href: '?userID='+post['userID']+'#profile'}).text(post['firstName']+' '+post['lastName'])
HTML:
Firstname Lastname
Raw URL (after click)
http://########/#####/index.php?userID=1#home
$_GET print_r on profile.php:
Array ()
By request; the ajax load javascript (index.php):
//AJAX page loading
$(document).ready(function(){
//Default page
if(!window.location.hash)
window.location.hash = '#home';
//Check page reference
checkURL();
//Update nav
$('#main-nav li').on("click", function (){
$('#main-nav li').removeClass('active');
$(this).addClass('active');
//Assign each link a new onclick event, using their own hash as a parameter
checkURL(this.hash);
});
//check for a change in the URL every 250 ms to detect if the history buttons have been used
setInterval("checkURL()",250);
});
//Store the current URL hash
var lasturl="";
function checkURL(hash){
if(!hash)
//if no parameter is provided, use the hash value from the current address
hash=window.location.hash;
if(hash != lasturl) {
//If hash changed, update current hash and load new one
lasturl=hash;
loadPage(hash);
}
}
function loadPage(url) {
//Adjust page name
url=url.replace('#','');
url=url+'.php';
//AJAX load page contents in to main content div
$('#content').load(url);
}
Solution:
Create global storage on root page (index.php).
Set vars in storage instead of using $_GET.
Access vars from child pages.
Example:
index.php (Javascript)
if (typeof(window.storage) === 'undefined') {
window.storagePV = {};
}
$('#nav-profile').click(function() {
window.storage.userID = <?php echo "$_SESSION[userID]"; ?>;
});
accessing userID to view the user's profile page
var userID = window.storage.userID
In my website authors (users) can mark posts as favorite.
It works this way:
if ($favinfo == NULL || $favinfo == "") {
$favicon = "ADD"; .
}
else {
$favicon = "REMOVE";
}
Its suposed to look dynamic, it works, when user click ADD, it adds the post to his favorites and reload the page with the REMOVE link.
The problem is its not really dynamic it reloads all the page.
How can i only reload that link (wich is inside a div)?
I know i have to use ajax, jquery, etc, but i tried some examples found here in S.O. but no success.
$('a').on('click', function(e){
// the default for a link is to post a page..
// So you can stop the propagation
e.stopPropagation();
});
Including this stop you page from reloading your entire page
If you want it to be dynamic, you will need to use AJAX. jQuery has ajax support which makes this really easy. If you are not familiar with ajax or javascript you should read up on it first.
PHP
if ($favinfo == NULL || $favinfo == "") {
$favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"add\" href=\"".$siteurl."/author/favorites.php"\">ADD</a>"; .
}
else {
$favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"remove\" href=\"".$siteurl."/author/favorites.php"\">REMOVE</a>";
}
JavaScript
$('a.fav-btn').on('click', function(e){
var $this = $(this), // equates to the clicked $('a.fav-btn')
url = $this.attr('href'), // get the url to submit via ajax
id = $this.attr('data-id'), // id of post
action = $this.attr('data-action'); // action to take on server
$.ajax({
url: url+'?'+action+'='+id
}).done(function(){ // once favorites.php?[action]= is done...
// because this is in .done(), the button will update once the server has finished
// if you want the link to change instantly and not wait for server, move this outside of the done function
if(action === 'add'){
$this.attr('data-action', 'remove').html('REMOVE'); // update the button/link
}else{
$this.attr('data-action', 'add').html('ADD');
}
})
return false; // prevent link from working so the page doesn't reload
}
If you are okay with using JQuery, you have some tools to accomplish this.
Have a structure / method of identifying your links.
You can have a click() listener on your add button that will call a JQuery $.post(url, callback) function.
In that callback function, you can have it update the corresponding DIV (that you defined in #1) with a 'remove' link. i.e if you identify the DIV by ID, you can retrieve it via $('#id') and then update that object.
The same idea can apply with the 'remove' link that you add.
So, generally...
<button id="add">Add</button>
<div id="links"> ...</div>
<script>
$('#add').click(function() {
$.post('your url',
function(data) {
var links = $('#links');
// update your links with 'remove' button, etc
}
);
});
</script>