I wanted to use ajax to make my website open links without refreshing whole webside (only content in 1 div is changing, header/footer/navigation is always the same).
In header I added js:
<script type="text/javascript" src="js/general.js"></script>
Index.php looks like this:
<?php
include '/gui/header.php';
include '/gui/nawigacja.php';
?>
<div id="content"></div>
<?php include '/gui/footer.php'; ?>
And the general.js looks like this:
$(document).ready(function(e) {
$('#content').load('content/main.php');
$('ul#slider li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/'+ page + '.php');
return false;
});
$('ul#menu li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/'+ page + '.php');
return false;
});
});
It worked well on localhost (xampp), but when I wanted to move it to remote free server to tests, the load function didn't work (website didn't won't to load at all, but when I deleted "$('#content').load('content/main.php');" it started to load, but then my ajax didn't load content, because there were no ajax).
Is there any way to solve this problem?
Would be gratefull for any kind of help.
Your JS looks fine, I guess that the URL path is not proper. Make it relative to the root directory by adding / in front of content.
$(document).ready(function(e) {
$('#content').load('/content/main.php');
$('ul#slider li a').click(function() {
var page = $(this).attr('href');
$('#content').load('/content/'+ page + '.php');
return false;
});
$('ul#menu li a').click(function() {
var page = $(this).attr('href');
$('#content').load('/content/'+ page + '.php');
return false;
});
});
Maybe the problem is with cache. ?
Try it:
var d1 = new Date();
var cache = d1.getTime();
$('#content').load('/content/main.php?cache=' + cache);
Related
I wrote the toggle-accordion. It works good if links and accordion there are on one page, url links works. But how make open my toggle-accordion to url from another page?
https://codepen.io/malinosky/pen/wxKzEo
$(function(){
var accordionFaqHead = $('.i-accordionFaq-head');
accordionFaqHead.on('click', function() {
$(this).next().slideToggle();
});
function accHash() {
var hash = $(this).attr('href');
if (hash) {
var accordionItem = $(hash);
if (accordionItem.length) {
accordionItem.find('.i-accordionFaq-body').show();
}
}
}
$('.i-link-hash').on('click', accHash);
});
You can check if there is hash in the url and call your function with it:
JS:
if (window.location.hash) {
var $hashedElement = $(window.location.hash);
accHash.apply($hashedElement);
}
Use apply to call your function while setting this to be equal to $hashedElement
To add hash while going from page to page you need to add it to your anchor tag first:
HTML:
I would like to execute a function after a redirection on my site. Here is my code:
$('a.filter-redirect').on('click', function(){
window.location.replace('/technos/');
filter();
});
And here is my function "filter":
$('a.filter-tech').on('click', function filter(){
var tag = $(this).attr('rel');
var val_input = $('#tag').val();
if(tag === val_input){
$('#tag').val('');
$('#form').submit();
}
if(val_input){
$('#tag').val(val_input + ',' + tag)
}
$('#tag').val(tag);
$('#form').submit();
return false;
});
I am not an expert in JS and jQuery and the code may be wrong. My function works, but not after the redirection.
when you redirect to a new page the scripts on the previous page are no more executed. So you have to call this function as soon as the new page is loaded e.g. on $(window).load() or $(document).ready() not on an click in previous page.
$(document).ready(function(){
var tag = $(this).attr('rel');
var val_input = $('#tag').val();
if(tag === val_input){
$('#tag').val('');
$('#form').submit();
}
if(val_input){
$('#tag').val(val_input + ',' + tag)
}
$('#tag').val(tag);
$('#form').submit();
return false;
})
When you redirect your page location changes, which means that a new page is loaded and the old is gone.
To do some action in the new page you have to add it in that page (for example in the body on load or in a script tag)
When you go to the new page, keep all your required code inside $(document).ready() or window.load()
Somthing like this
function runOnPageLoad() {
alert('Hey There');
}
window.onload = runOnPageLoad;
Or in jquery as
$(document).ready ( function(){
alert('Hey There');
});
Hope it helps
I have simple content loader, where I load content of html file into element. That is working fine. But when I load content, then JS in content is not loaded because it is defined in main (index.html) document ready function.
Question:
How to load content where after page refresh it will remain in div?
Note: Prefer JS solution.
HTML:
index.html
<ul id="debug_menu">
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
<div id="zone"></div>
JS:
/* Content loader */
jQuery(document).ready(function() {
jQuery("#debug_menu li").click(function() {
$content = jQuery(this).text();
jQuery('#zone').load('content/' + $content + '.html');
});
});
//Edit:
jQuery(".dial").knob();
content1.html:
<input value="90" class="dial">
Note: using http://anthonyterrien.com/knob/ plugin
try something like this
jQuery(document).ready(function() {
jQuery("#debug_menu li").click(function() {
$content = jQuery(this).text();
jQuery('#zone').load('content/' + $content + '.html', function() {
jQuery(".dial").knob();//initialize new one
});
});
});
jQuery(".dial").knob();
EDITED CODE
jQuery(document).ready(function() {
jQuery("#debug_menu li").click(function() {
$content = jQuery(this).text();
jQuery('#zone').load('content/' + $content + '.html', function() {
initial_loader();//initialize new one
});
});
initial_loader();
});
function initial_loader(){
jQuery(".dial").knob();
}
When you load content, you should also manipulate the current page URL in a way that does not cause a reload. This basically means changing the hash part (#something). On page load, you only have to check the current hash and load the right content.
You can also use the history API with the same logic, it gives you more options to manipulate any part of the URL without a reload. Browser support is not the best yet though, but you can use history.js as a wrapper.
Advantages: both methods will make your content linkable and make the browser history usable (back, forward buttons will work) other than fixing your reload problem.
Not possible. You have to store which div is loaded etc.
Solutions where you can store something:
Cookie
Localstorage
Hashtag
I use this plugin: https://github.com/AlexChittock/JQuery-Session-Plugin
to store content variable into session.
/* Content loader */
jQuery(document).ready(function() {
jQuery("#debug_menu li").click(function() {
$content = jQuery(this).text();
jQuery.session.set('content', $content);
jQuery('#zone').load('content/' + $content + '.html',
function() {
initial_loader();
}
);
});
$s = jQuery.session.get('content');
jQuery('#zone').load('content/' + $s + '.html',
function() {
initial_loader();
}
);
});
function initial_loader() {
jQuery(".dial").knob();
}
I'm trying to use jQuery to load external pages into the current page without the user seeing the page load.
When I call the page 'info.php' it is loaded into the #content div. That's what the script is supposed to do. The problem is that in the main page, which contains the script and the #content div, I already have some code that I want it to be executed when someone visits the page and not to be called from any external page. This is working but when I click on one of the links in the menu, I can't go back to the initial content.
Here is an except of my code:
<script>
$(function() {
$('#nav a').click(function() {
var page = $(this).attr('href');
$('#content').load(page + '.php');
return false;
});
});
</script>
<ul id="nav">
<li>Page1</li>
<li>About</li>
<li>Contact</li>
<li>Info</li>
</ul>
<div id="content">
Here I have some code that I wanted to be attributed to the "Page1"
</div>
I'm not very familiar with load(), but in this case, I think you should be using ajax to load the page without refresh.
var page = $(this).attr('href');
$.ajax({
url: page + '.php',
success: function(data)
{
$('#content').html(data);
}
})
EDIT: with you said "when I click on one of the links in the menu, I can't go back to the initial content", did you mean you have some code within the div #content and onclick you've overwritten its contents?
Here is example:
$(function()
{
var content = $('#content');
$('#nav a').click(function(e) {
e.preventDefault();
var page = $(this).attr('href');
content.children().hide();
var pageContent = content.find("#" + page);
if(pageContent.length > 0)
{
pageContent.show();
}
else // put ajax here
{
content.append($('<div>').attr('id', page).text('New page ' + page));
}
});
});
Demo: jsfiddle.net/3jLjw/
I have a script that will reload the page (content) to a random DIV
How do I implement this so that the script loads after the div is loaded?
I have the following code ready:
<script>
$(document).ready(function() {
$("#getAssignment").click(function() {
var $divs = $(".assignment");
if ($divs.length > 0) {
window.location.hash = "#" + $divs[ Math.floor(Math.random() *
$divs.length) ].id;
}
});
});
</script>
$("div").load(function(){
blah();
});
This will do what you wanted, but it does not make sense though, since div is not like an image or <script> or a page. (You can't really "load" a <div> anyway.)