Ajax not working with .htaccess`rewrite url - php

I create the basic project and use htaccess rewrite url and jquery ajax
.htaccess:
Options +FollowSymLinks
RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^(.*)$ index.php?param=$1
gallery.php :
<script type="text/javascript">
window.onload = function() {
$.ajax({
type: "POST",
url: "/test1/controller.php",
data: {brand:"<?php echo $id;?>"},
dataType: "json",
success: function (data) {
alert(data.response)
}
});
}
controller.php :
$brand=$_REQUEST['brand'];
$arr = array ('response'=>$brand.'___jason','comment'=>'test comment here');
echo json_encode($arr);
but when write url in address bar of browser like:
http://localhost/test1/gallery/gucci
jquery ajax not working but when write :
http://localhost/test1/gallery
jquery ajax is working well.
I must use end of url (gucci) for id , but when I write it, jquery isn't working

First of all... You are not telling us what framework or what software you're running there.
Use firebug or other console addons depending on your browser, open it up, go to the console tab, refresh the page... you should see an ajax call over there and then you can click it, and view exactly what's wrong, or what errors you get, even what you send.
See this: http://screencast.com/t/5TQhLOzKq5
Example in case your jQuery isn't loaded properly you will be getting a $ is undefined, in the console or js error console

When using relative paths for your ajax calls with url rewriting keep in mind that the directory is changing relatively to your url.
To avoid this behavior use absolute paths or set in your html the base tag like this:
<base href='http://your-server-address.com'/>

Related

Ajax calls are being misinterpreted by URL rewrite rule

I have a rule in my htaccess file as follows:
RewriteRule ^Story/([^/\.]+)/?$ http://www.Example.com/Story.php?slug=$1 [P,L]
Basically it lets a user identify the article they want to read by use of a human readable slug (e.g. "https://Example.com/Story/story-about-lasers") instead of (e.g. "https://Example.com/Story.php?slug=story-about-lasers"). Up until today this has been working fine.
However, today I added an ajax call on the Story.php page:
var pag = $('#pagination').simplePaginator({
totalPages: totalPage,
maxButtonsVisible: 5,
currentPage: 1,
nextLabel: 'Next',
prevLabel: 'Prev',
firstLabel: 'First',
lastLabel: 'Last',
clickCurrentPage: true,
pageChange: function(page) {
$("#content").html('<tr><td colspan="6"><strong>loading...</strong></td></tr>');
$.ajax({
url:"get_data.php",
method:"GET",
dataType: "json",
data:{page: page},
success:function(responseData){
$('#content').html(responseData.html);
}
});
}
});
I get multiple errors of this type:
GET https://www.Example.com/Story/plugins/js/all.min.js net::ERR_ABORTED 404 (Not Found)
It seems to be that the rewrite is adding the "Story/" to the URL of all included .js files.
I've tried giving the full url for the files:
<script type="text/javascript" src="https://example.com/plugins/js/all.min.js"></script>
and also calling from to the ajax/php file fully:
https://Example.com/get_data.php
but it doesn't seem to help.
What am I doing wrong?

AJAX POST request does not work properly along with .htaccess redirect rule

This is my .htaccess file. As it can be seen everything is redirected through index.php.
<IfModule mod_rewrite.c>
Options -Multiviews
RewriteEngine On
RewriteBase /project_name/public
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
</IfModule>
Now this is a file (viewname.php) located in one of my views folder (this is a MVC styled project). Here as it can be seen I am making an AJAX POST request, to a file ajax.php located in the same folder as index.php (i.e., folder public). Notice that I'm not writing the url as "../something", as I'm redirecting everything through index.php. I confirmed that by writing <?php echo __FILE__;?>, in this file, which returned the result index.php. If the AJAX request is successful, I should get the output as "Working" in the div with id 'r'. But that does not happen. Also I do not get any error like jquery.min.js:4 POST http://127.0.0.1/project_name/public/file_name.php 404 (Not Found) in the console, which I used to get in a project without that .htaccess file. When I console.log(data) I see the HTML code in the index.php file, which in this case are CDNs for Bootstrap and JQuery, in the console. What changes should I make to my AJAX code or .htaccess file?
<div id="r"></div>
//JQuery AJAX
$(document).ready(function(){
$.ajax({
url: "ajax.php",
method: "POST",
data: {
valid: "yes"
},
success: function(data){
$("div#r").html(data);
}
});
});
This is the code in the ajax.php file:
<?php
if(isset($_POST['valid'])){
if($_POST['valid']=='yes'){
echo 'Working';
}
}
you missing function after ()(round bracket)
$(document).ready(function(){
$.ajax({
url: "test1.php",
method: "POST",
data: {
valid: "yes"
},
success: function(data){
$("div#r").html(data);
}
});
});
Here in this case the AJAX works completely but the only difference is that the ajax cannot make a difference to your webpage like echo,call the function,etc.
I changed the url from "ajax.php" to "http://127.0.0.1/project_name/ajax.php", and everything is working fine now.

Ajax Request on Redirected Site

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></d‌​iv>
<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.

absolute path is not working in ajax call

My file structure is something like this :
site
module
index.php
js
auto.js
ajax
auto.php
index.php
I have included js/auto.js in module/index.php,where auto.js is an ajax call which passes data to ajax/auto.php.
Edit site/index.php is also using js/auto.js and ajax call is working fine for site/index.php
my ajax call in auto.js is like :
$.ajax({
url : 'ajax/auto.php'
})
After page load in its giving error in console can not find site/module/ajax/auto.php.
I know its relative path error,what will be the correct relative path for this problem
Use slash at the beginning like this
$.ajax({
url: '/ajax/auto.php',
...
});
call it like
url : '../ajax/auto.php'
and it should work fine
Now its working Fine
$.ajax({
url : '/site/ajax/auto.php'
})

AJAX, SEO and PHP folder trouble

I'm creating an AJAX script that reads a specific file, which name is identified with a GET var. The beginning of the script in index.php is:
var expFile = '<?php echo $_GET['text_name']; ?>';
$(document).ready(function () {
$.ajax({
url: expFile+'.xml',
type: 'get',
dataType: 'xml',
success: function (data, textStatus) {
// Parses the content, which is escaped into a "text" tag in the xml, and puts it
//into an html div with a "content" class"
var content = decodeURIComponent($(data).find('text').text());
$('.content').html(content);
}
});
});
And everything went ok. The file is read and the thing is shown correctly.
The XML file, that is in the same folder of the index.php file, is read directly from AJAX.
Now i'm using a mod_rewrite in order to make the URL SEO-Friendly.
When i type the dirty URL (http://www.mysite.com/index.php?text_name=name-of-the-file-to-read) it's OK.
But when i type the rewritten url (which is http://www.mysite.com/lyrics/name-of-the-file-to-read) the content is not shown.
I know that AJAX is client-side, while mod_rewrite is server-side, but I don't know how to reach a parent folder (that really doesn't exist) from the "url" parameter of the $.ajax or an absolute link like url: 'http://...' (but it goes against Same Origin Policy).
Help me please!!!
Francesco's answer, initially put into the question:
SOLVED.
THE PROBLEM was with the script tag. I had to put a ../ to the jquery href
<script type="text/javascript" src="../libraries/jquery.min.js"></script>
Then I added ../ to the URL and everything went fine.
The URL is having .xml appended by the function itself - on this line:
url: expFile+'.xml',
Is that still there when you are trying with the SEO friendly URL? If so, I'd remove that appended .xml and try again.

Categories