When i use my navigation bar and switch page, for some reason all of my php turns undefined. I know that the cause of that is my new no-refresh navigation, basically the site doesnt refresh when im going to another page. So when i use my navigation bar all of the user-based php code turns undefined (things such as username, logo, balance etc).
Heres the new navigation code
$(function(){
$("a[rel='tab']").click(function(e){
pageurl = $(this).attr('href');
$.ajax({url:pageurl+'?rel=tab',success: function(data){
$('#content').html(data);
}});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
$('#content').html(data);
}});
});
And here's a example of php code that turnes undefined
<div class="overview-h1">Welcome back <?php echo $user['name']; ?>!</div>
I dont know if im right here, but i think that the $('#content').html(data); is only saving html when u switch page, thats atleast what i think. Altough im not entirely sure how to solve it
Related
I am using a setInterval() to load one part of the page for every 1 second. Everything is working fine but, I am displaying all the messages using a table. I want scroll bar always to the bottom.we have to scroll down to view new messages. So, I want my scroll bar fix to the bottom by default.
Jquery code which is loading the messages table
setInterval(function(){
if(user.trim()!=""){
$.ajax({
type : "GET",
url : "getuserconversation",
data: {username: user},
datatype: "json",
success: function(data){
if(data.success){
$(".messages").load("conversation_of_users.jsp");
var $mydiv = $("#msgs");
$mydiv.scrollTop($mydiv.height());
}
},
error: function() {
console.log("error");
}
});
}
}, 5000);
It was working but, there is a problem. It goes to bottom of the table and within 1 second it is returning to top again. I saw this while debugging. In real time we cant even see that. I dont know why it is going to top again.
I don't know why is returning to top but you can solve your problem using return false; at end of the callback.
or you can use e.preventDefault();
Hi and thanks to everybody in advance!
I want to do a simple thing with Ajax but is not working: push the button and change the html with another one from the same folder. Is something with the javascript but I can't identify the problem. I'm quite a novice with web design.
$(".about .ajax").on("click",function(e){
var section = $(this).closest("section");
var href = $(this).attr("href");
$.ajax({
url:href,
dataType:"html",
success:function(data){
var contenido = $("#about",data);
section.html(contenido);
}
});
e.preventDefault();
});
jsfiddle
I don't think you are binding it back properly.
I think you want something like this:
success:function(data){
$("#about").html(data);
}
Passing data as the 2nd argument will restrict jquery to find the right element.
I am facing the following problem. I have got an index.php that contains a form. There are several AJAX-requests which point to different phps that dynamically load further form elements, e.g. when the option of a selectbox is changed.
The form itself contains a click-button which points to a php performing an AJAX-Request when being clicked. While waiting for the php to respond to the Ajax-Request, the preloader icon shall appear.
Everything works fine except:
When I change the select box the preloader icon appears which is wrong. But when I click the button of the form, the preloader icon does not appear but it shall appear.
This is my code at the start of the index php. As I am not a Jquery expert, does anyone have a hint for me what I'm doing wrong?
Thank yo very much in advance for your help!
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("calculate.php", $("#calculate").serialize(), function(response) {
$('#success').html(response);
});
return false;
});
});
</script>
<script>
$(document).ready(function(){
$('#showcontentonchange').change(function(){
$.post("showcontentonchange.php", $("#showcontentonchange").serialize(), function(response) {
$('#successshowcontentonchange').html(response);
});
return false;
});
});
</script>
<script>
jQuery.ajaxSetup({
beforeSend: function() {
$('#preloader').html(' <img src="preloader.gif" style="position:relative;left:50%;margin-left:-64px;margin-top:5px;z-index:1;">')
},
complete: function(){
$('#preloader').html('')
},
success: function() {
$('#preloader').html('')
}
});
</script>
<script>
$(function(){
$("a[rel='tab']").click(function(e){
e.preventDefault();
pageurl = $(this).attr('href');
$.ajax({url:pageurl+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});
</script>
I pulled this code off a demo and am modifying it to fit my particular project; however, am attempting to run it as it is to test out features. The demo worked perfectly. The only major difference is they are using jquery 1.4.4 and I am using jquery 1.9.1. I cannot seem to get the back button to work correctly. The url changes when hitting back; however, the #right_column doesn't update at all. I copied this code directly off a demo and adjusted the div id to match mine, and it still doesn't work. The below line of code is the questionable code.
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});
Also, can I use location.pathname.replace('index.php', 'view.php') ? Not sure if this is the correct way of writing that particular code to replace index.php?variables... with view.php?variables... to load that page into the right column. See my other post if this part of the question confuses you... javascript/jquery: Need to substring in jquery (modified code)
For those that this may help, this ended up fixing my code and it now responds to back button.
$(window).on('popstate', function() {
$.ajax({url:$(location).attr('href').replace('index.php', 'rightcolumn.php') +'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});
I've created a website using PHP include to get all the pieces. Then i've created a content page, this page is the only page that is refreshed. It's also the only page where the information/text is canged. I've used jQuery, PHP and Ajax to do this.
Now, this all works fine and as it should, but it has created some new problems regarding the websites navigation.
The navigation is just a set of links in a list. But whenever one of them is clicked I've made it so that it gets a new class with a new style. So that the user can see where he/she is on the website. I've done this with javascript and jQuery using the .toggleClass method. And this works, but now I'm getting to the problem at hand.
So the this is the deal:
When ever I refresh the website through the browser the .toggleClass information is lost and the button loses it's class and style. Even though the page is not changed, just refreshed. Also, when I click on the "home" button in my banner to return to the frontpage the opposite happens. The last button that had .toggleClass activated keeps it's class and style even though I'm not on that page anymore, but returned to the initial index.
I know that my code is not that impressive and it might be lots of faults in it. I'm not really that skilled at this yet, I'm still learning. Anyway is there a way to work around this? or is it's simply something I've done wrong? Or maybe there is an easier and better way to make a website like this?
Here is my code:
Index.php
<?php
include("layout/header.php");
include("content/content.php");
include("layout/footer.php");
?>
load_page.php
<?php
if(!$_GET['page']) die("0"); {
$page = (int)$_GET['page'];
if(file_exists('pages/page_'.$page.'.html')) {
echo file_get_contents('pages/page_'.$page.'.html');
} else {
echo 'There is no such page!';
}
}
?>
ajax.js
$(document).ready(function () {
checkURL();
$('ul li a').click(function (e) {
checkURL(this.hash);
});
setInterval("checkURL()", 200);
});
var lasturl = ""; // storage
function checkURL(hash) {
if (!hash) hash = window.location.hash;
if (hash != lasturl) {
lasturl = hash;
loadPage(hash);
}
}
function loadPage(url) // AJAX function
{
url = url.replace('#page', '');
$.ajax({
type: "GET",
url: "load_page.php",
data: 'page=' + url,
dataType: "html",
success: function (msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
}
}
});
}
javascript.js
$(document).ready(function(){
$('.button').click(function(){
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
});
I'm not going to post all of my HTML and CSS code, that would be too much. I already have a ton of code posted. But here are the essentials you might need.
My navigation that has the links for the dynamic content/pages that is generated through Ajax.
<nav>
<ul id="navigation">
<li> <a class="button" href="#page1"> Frontpage </a> </li>
<li> <a class="button" href="#page2"> Archive </a> </li>
<li> <a class="button" href="#page3"> Stuff </a> </li>
<li> <a class="button" href="#page4"> Portfolio </a> </li>
</ul>
</nav>
The content page where the pages is added through ajax and php.
content.php
<div id="pageContent">
<!-- content comes here -->
</div>
Lastly just some notes:
Yes, I am linking to a jQuery document.
Everything works as it should, excep for the buttons.
Let me know if you want more information about something.
Thanks for taking the time to read all this!
Solving the "home" button problem:
$(document).ready(function(){
$('.button').click(function(){
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
$('.ce').click(function(){
$('.buttonselected').removeClass('buttonselected');
$('#frontpage').toggleClass('buttonselected');
});
});
Where's the '.ce' is the class of the "home" button in the banner and the '#frontpage' is the id of the button that needs to get the new class after the link is pressed and the page returns to the index.
"Solving" the refresh problem:
Added this code to the content page.
$(document).ready(function(){
location.href = "#page1"
});
Added this code to the #page1.
<script type="text/javascript">
$(document).ready(function(){
$('.buttonselected').removeClass('buttonselected');
$('#frontpage').toggleClass('buttonselected');
});
This makes it so that whenver the page is refreshed it returns to the frontpage.
It also makes it so that whenever someone first visits the website they will see
the correct frontpage and at the same time the frontpage button will have the .toggleClass style indicating where they are on the page.
This is still not a good solution though, imo. The optimal thing would of course be to make it so that whenever the browser is refreshed it's still at the same page on the website and with it's correct button "pressed". I will post my final code when I eventuall figure it out. Just thought I'd post what I've done so far if anyone else is looking at this and haveing the same issue.