I just cannot get my ajax request working on my redirected site input-city.php. Here is the entry for the mod-rewrite in my .htaccess:
RewriteRule ^test-(bonn)/$ /input-city.php?city=$1 [NC,L]
I already copied and tested the ajax request on other pages and it worked like a charm, but here it just reloads the page, I just cannot get my head wrapped around it. The ajax request should just load in some content into the div when the link is being clicked.
The ajax request on my input-city.php (with the script link below):
<div id="addsubject5">test</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
The entry for that ajax request in my global.js:
$(function() {
var trigger = $('#addsubjectlink5'),
container = $('#addsubject5');
trigger.on('click', function() {
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
return false;
});
});
And to make it complete, my addchoosesubject5.php:
<p>test</p>
Or is it just not possible to do ajax requests on redirected pages? When I search for it I only get results for "redirect page after ajax request", so this didn't help much :/.
Any help is greatly appreciated!
Thanks to #CBroe: The problem was the relative path from the script <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>. Since the page is redirected to a folder path /test-bonn/ in the .htaccess I needed to adapt the path, because the relative path led to /test-bonn/js/global.js compared to all other pages that are not redirected. I simply inserted an absolute path and the problem got solved.
Related
I found the asnwer to my question in another thread: How to load PHP file into DIV by jQuery?
the only problem i have is: i cant send someone a link with a certain file loaded into the did. its always just the home url. is there any way to include that into the url?
i used the following code:
$(document).ready(function(){
$("#artists").click(function(){
$("#content").load('urltocontent.php');
});
});
in my index.php i have a #content and everything works smoothly.
i plan on opening every content in php in that div. but when i open the page, of course the div is empty, because no link was clicked that opens content in the div. is there a way to generate an url that opens the content? so i could spread links
Assuming you are calling your page like this : http://example.com?url=page_to_include.com
You can use this code :
$(document).ready(function(){
$("#contents").load('<?php echo $_GET['url']; ?>');
});
You can use the # .. thats how its usually done in javascript. so by adding #artists behind the url.. Example:
$(function(){
$("#button1").click(function(){
$("#content").html("content of button 1. can load with ajax like you did");
});
$("#button2").click(function(){
$("#content").html("content of button 2. can load with ajax like you did");
});
$(document.URL.substr(document.URL.indexOf('#')) ).click();
})
Now go to yoururl.php#button1
My goal: I have a form that is in parts, 1-4, when the user clicks on the "Next" button I would like the content to animate out then part 2 slides, and so on until the form is complete. The tricky part is I would am trying to use a different php page in a different subfolder to insert as the other 3 parts. This would also change the URL subfolder the user sees.
The working example is actually WordPress. When you click through the multi-part form you will see the content and the URL act as I have described.
I did a bit of digging and it seems like they used React.js on the content but I couldn't really find any documentation on how to do this with React.js so it made me think that maybe it was custom Ajax/jQuery or what.
My Trees of Folders -
Main
Subfolder-1
index.php
Subfolder-2
index.php
And so on. The only thing I could think of would to use jQuery:
$(document).ready(function() {
$('#form-container').on('click', '.insert', function() {
var directory = $(this).attr('name');
$('#form-container').load('../' + directory);
return false;
});
});
I add the class of "insert" on the "Next" button and give it a name="Subfolder-2" $('#form-container').load('../Subfolder-2);' will actually load the content into the div without the page refreshing BUT it does not change the subfolder in the URL.
Am I on the wrong track? Maybe I am just not searching for the right thing?
Ok, so I ended up figuring out how to get the content to act like I wanted with the information John S. provided me. After doing some research and a few hours of trial and error I came up with the JavaScript below:
var data = 'start',
url = '../' + data + '/';
history.pushState(data, null, url);
Above I set the variables and immediately run a history.pushState on page load to capture the first div that is loaded into the content div. This is important because it is the only way I could load the content that happens on initial load back into the page when hitting the browsers back button.
$('body').on('click', '.insert', function(e) {
data = $(this).attr('data-name'),
url = '../' + data + '/';
history.pushState(data, null, url);
request_content(data);
return false;
});
Then I add a click listener to the button with the class .insert reset the variables so instead of grabbing the page that initially loaded it grabs the page that will be loaded, then use history.pushState again to change the url that is determined by the variables.
The request_content function is a simple .load function. So when the button is clicked the variables are set, the url changes and the new content get loaded into the page while the old content disappears.
The final piece to the puzzle which took me the longest to figure out is actually the popstate function. I am still not 100% sure why it works but after hours of messing with it and finally getting it to work I am not going to question it.
window.addEventListener('popstate', function(e){
var data = e.state;
if(data === null) {
} else {
request_content(data);
}
});
This popstate function is what allows the content to come back when hitting the browsers back or forward navigation.
CSSTricks < this article at CSSTricks helped a TON when learning this method.
Thanks again to John S. for pointing me in the right direction!
I have an html mail form that is at the bottom of the page. My php redirects back to the bottom of the page like so:
header('Location: index.html#social');
It redirects fine and puts me back at the bottom of the screen but the url then becomes
/index.html#social
I want to remove the #social (and the index.html if possible, but not a big deal) from the url.
Currently I use this function in jquery:
$(window).on('hashchange', function(e) {
history.replaceState("", document.title, e.originalEvent.oldURL);
});
which works for all of my other hashchanges in the html, but that doesn't seem to work on php hash redirects. Any suggestions? I can't seem to find anything else with the same issue.
After some experimentation I figured it out.
I added this to my jquery after my hashchange function:
history.replaceState("", document.title, "/");
I am new to jQuery AJAX function. I want to redirect my user to a webpage when he clicks a button. Please do not tell me to target the button to the webpage as I have to do some working in the php file... My current code is :-
TEST.html file :-
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test2.php");
});
});
</script>
</head>
<button>Get External Content</button>
<div id="div1"></div>
</html>
Now my test2.php file is the following :-
<?php header("Location:http://google.com"); ?>
I am a beginner in AJAX jQuery. So, please do not downvote my post although it may sound silly. My code, for obvious reasons is not working. Please help me. Thanks in advance. Any help will be appreciated.
You cant redirect with an AJAX call. You can either create a simple link or link to a PHP page which then redirects the user on. Using AJAX will only let you manipulate this page you are on.
Of course, you can always redirect with simple Javascript as well.
window.location = '/my_url.php';
EDIT: In response to your comment question, what I would do is use the .get() function with the data parameter, check what has been returned from the PHP page if server side validation is required and then if I am happy with the result, redirect.
If no server side validation is needed, there is no need for AJAX.
Look at it this way: AJAX is requesting and reading the .php file. When AJAX sees the header("Location: ...") line, it redirects the AJAX request. Put simply, AJAX can't be used for redirects.
You can use the complete callback to redirect the user after the AJAX query has completed like so:
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test2.php",
complete: function(){
window.location = 'http://new_url';
}
);
});
});
That being said if you just want to redirect a user on a button click there are better ways to do that.
$("#div1").load("test2.php");
appends the contents which are
returned from test2.php , it will not redirect. The test2.php should return a link and populate the div with the link. Then write a callback on ajax success which will
redirect using window.location = target , the target being the link which was dynamically loaded in the div1
I'm working on an ajax loading function on a Wordpress single page portfolio.
The principle is that when you click a thumbnail in the gallery, it opens a container (#DrawerContainer) and fetch the ajax content of this article into it. With a lot of help, I'm already able to open the drawer and load the post content when I click a thumbnail.
Here is a fiddle if you want to see it working (the ajax will not load but it works locally). http://jsfiddle.net/RF6df/24/
The part I'm working on now: I need my site to be crawlable and the urls to be shareable. If I give http://mywebsite.com/#!project5 to someone, I need project5 content to be opened when he loads the page.
I thought the hash-bang (#!) urls was the way to go to make this work. With the code below (commented on the jsfiddle), I can update the url and add the hash of the clicked thumbnail.
var pathname = $(this).find('a')[0].href.split('/'),
l = pathname.length;
pathname = pathname[l-1] || pathname[l-2];
window.location.hash = "#!" + pathname;
But when I load a page, the ajax state isn't remembered. I assumed it was because my ajax container was only loaded on click event, but there is no change when I add a persistant container in the php.
Is there a way to load the page with a post content already displayed, or to open the #DrawerContainer when the page is loading a hash-bang url?
Please keep in mind that I'm just learning jquery and ajax. So I'd really appreciate if you explain or comment a little bit what you do, I'll for sure learn at the same time... :)
on onload you should check the window.location.hash and trigger a click on the particular link/div.
$(document).ready(function() {
var hash = window.location.hash;
if ( hash.length > 0 ) {
hash = hash.replace('#' , '' , hash );
$('a[rel="'+hash+'"]').trigger('click');
}
});
I have used the following on sites where I want to trigger via hash changes.
First I bind a hashchange event to get the hash value
$(window).bind('hashchange', function(o){
url = window.location.hash.substring(1);
o.preventDefault();
if (!url) {
return;
}
}
Then I trigger the hashchange when I want - in your case when the page loads i.e. on document ready.
jQuery(document).ready(function($) {
$(window).trigger('hashchange');
});
You can then use the hash value in your function that loads the correct content