Jquery Ajax url path Issue - javascript

I am trying to design a message system for my website, but i can't get my ajax running.
So I make a simpler version of the interaction between the files.
Here is my file both test.php and load.php is under the root folder ( public_html).
i have the ajax function in test.php. load.php is just simply echoing "wow".
$("#test").click(function(){
alert("Clicked.");
$.ajax({
url:"/load.php",
type:"POST",
beforeSend: function(){
alert("testing");
},
success:function(result){
$("#result").html(result);
alert(" sss "+result);
}
}).error(function(){alert("wrong");});
});
Now It works perfectly.
...........how to set relative path ...................
Here is the more complicated design
3 files, all in different folder :
messages.php (under root)
showing all the messages
control.php (root/panels)
a panel will be included in messages.php
load.php (root/functions)
control.php will use ajax to call it then display result in control.php
so when user load in messages.php, it will load control.php then run the ajax call control.php.
I am so confused about how to set up these paths for ajax
( including control.php in messages.php works fine)
Thanks

To understand ajax url, I have two things that should always be remembered.
1. If we put slash at the beginning of ajax url, ajax url pattern will be `hostname/yourFile`
example:
// current url: http://sample.com/users
// ajax code load from users page
$.ajax({
url: '/yourFile.php',
...
});
// ajax url will be: http://sample.com/yourFile.php
2. If we don't use slash at the beginning, ajax url will add to the current url in the browser. example:
// current url: http://sample.com/users
// ajax code load from users page
$.ajax({
url: 'yourFile.php',
...
});
//...ajax url will be http://simple.com/users/yourFile.php
I hope this things can help people who want to use ajax.
Happy coding, thanks.

If the files you're trying to contact are in the root you can use /[file].php so that no matter which page you're on the path will be correct. It sounds like you have a relative path issue. Do you get any errors in the console?

Related

Ajax call to a different controller

I am trying to call a different Controller method in an Ajax call. I have looked at different posts for a solution but because I do not exactly understand what their solutions are (Links at bottom). I am calling my ajax call from my Home Controller, trying to call a method in my Production Controller.
"Request URL: http://localhost.59223/Home/Production/CreateNewProductionGoal"
This is the error I am getting.
I have tried changing the URL to .../Production/CreateNewProductionGoal and to ~/Production/CreateNewProductionGoal, as suggested online. Neither of these implementations worked because I was getting a 404 error, page not found.
One of the linked solutions mentions using a loc var key, of which I am unfamiliar.
The other suggests using a button which is not an option in my case.
$.ajax({
type: 'post',
url: "Production/CreateNewProductionGoal",
dataType: "json",
data: data, //Creating a ProductionGoalViewModel to pass into the CreateNewProductionGoal method
success: function (data) {
//$('#Dashboard').load("/Home/UpdateView/" + selectProductionLine);
}
});
Ajax call to different controller
How to make ajax calls to different MVC controllers
For clarification, I am looking for a step by step with explanation on how to Ajax call from one MVC controller to another.
Thanks!
You should include a leading / in your url to call the correct URL:
$.ajax({
...
url: "/Production/CreateNewProductionGoal",
...
});
That way, the request will go to http://localhost.59223/Production/CreateNewProductionGoal instead.
The different paths, if you currently view http://example.com/Home/:
your/path: This will take the current path as start path, i.e. and add it to there, resulting in http://example.com/Home/your/path.
~/your/path: can be used in asp.net server code, e.g. Razor to indicate the root of your website, only if it rendered. Browsers do not consider ~/ a special token, resulting in http://example.com/Home/~/your/path or http://example.com/your/path, when rendered
.../your/path: nothing special, resulting in http://example.com/Home/.../your/path
../your/path: go up one directory level, resulting in http://example.com/your/path. But this will result in different paths for nested directories.
/your/path: absolute path, will always result in http://example.com/your/path, independently of nested directories.
For more on absolute and relative URL see Absolute vs relative URLs
This might still be helpful for someone to use
$.ajax({
...
url: "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Production/CreateNewProductionGoal",
...
});

How to refresh PHP file with AJAX

Okay, so I searched the web as much as I could and I couldn't find the solution on my problem. I also typed the question and searched for an answer as I saw similar questions to mine. Didn't help. I tried numerous solutions.
Well I have an index page that loads includes/data.php which loads the data from database and echo the .js format that is then loaded by function and display data on the page, so I have at the end of my index.php something like this:
<script type="text/javascript" src="includes/data.php"></script>
On the same index page I have a form that inserts data to database. If you refresh the page I will see refreshed includes/data.php along with new data I just inputted.
I am trying to implement AJAX so that when I click on the button I insert the data to database (already achieved this) and to refresh content of includes/data.php and index.php so it shows data right away without refreshing the index.php. This is my AJAX code:
$('#addtocal').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( data ) {
// This is the part where I am stuck.
},
error : function(){
$(".error").fadeIn(2000);
$(".error").fadeOut(2000);
}
});
return false;
});
Just to mention that #calendar is where main jquery function is loading the html content based on the info from /includes/data.php. Thank you in advance for any help you can provide and let me know if you need any other information from me in order to better assist me.
P.S. I saw many suggested using .load() to load content from includes/data.php but that is not working in my case as the content from includes/data.php needs to serve other jquery function that creates html on the fly and and place it in #calendar
I got it to work. What I did I inser aditional $.ajax inside the $.ajax and on completion and I called again again the jquery that uses /includes/data.php
so the code would be something like this:
$('#addtocal').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( data ) {
$.ajax({
url: "../includes/data.php",
dataType: "script",
cache: true
}).done(function() {
// Here I called other jquery function that uses ../includes/data.php
});
},
error : function(){
$(".error").fadeIn(2000);
$(".error").fadeOut(2000);
}
});
return false;
});
Thanks for your help anyway #Half Crazed gave me a clue so I get the $.getScript function and saw the way to call .js again so I tried and it worked.

How to set the url in off-line site using jquery ajax

well my task is running a static site, No servers at all. pure HTML, and i need to load and read an XML file and update the page with the result.
The task is done and can read the xml file if the file is in the same location, the problem is if the xml file is in a separate folder the ajax flails. seems like the url fails.
$.ajax({
type: "GET",
// working url setting - case - 1
// url: "somexmlfile.xml",
// not working - case - 2
url: "../somepath/somexmlfile.xml",
dataType: "xml",
success: function(xml){
// do something with the returned data
},
error: function() {
// display the error
}
});
Case - 1 is the working solution for me, but i need to place the xml file in a separate place.
Then the case - 2 is the way to get to the file which is getting failed.
any idea,
Actually no domain, no servers, its is pure HTML,
All files are in ex:
D:/myfiles/someFolder/index.html
If i put the file in
D:/myfiles/someFolder/xml/myxml.xml
and set the url as
url: "xml/myxml.xml"
this config is working too,
But i'm trying to place the xml file in
D:/myfiles/xml/myxml.xml and need to read the file using ajax setting the url as
url: "../xml/myxml.xml"
Try to use an absolute url:
www.yourdomain.ext/siteDolder/xmlFolder/xmlfile.xml
Finally the solution was to turn off browser security (strict_origin_policy set to false on about:config) on Firefox settings and it works.

jquery ajax - calling my asp.net web api gives a wrong url and a 404 not found message

I'm writing a small ASP.NET MVC site which also includes a WEB API in it that I wrote.
I've configured the project on my local IIS as http://localhost/mysite
On the main page of my site I'm including a js script that I wrote:
<script src="#Url.Content("~/Content/js/home.js")"></script>
on the page ready event of that js I call:
$.ajax({
url: 'api/getdetails',
accepts: 'application/json',
cache: false,
type: 'GET',
success: function (data) {
alert(data);
}
});
when looking with Fidler I see that the page call returns a 404 since it doesn't try to load it to the relative path I'm in (http://localhost/mysite) and it tries to load the root of the server - so the call looks like this http://localhost:80/api/getdetails
when I was writing web forms I used to do ajax calls such as this all the time and it always worked.
what am I missing?
Thanks
What I ended up doing is in my layout html I've added a js var:
var baseUrl = '#Url.Content("~/")';
then on my ajax call I've added that base url:
$.ajax({
url: baseUrl + 'api/getdetails',
accepts: 'application/json',
cache: false,
type: 'GET',
success: function (data) {
alert(data);
}
});
this does the trick no matter how the page looks like. even if I navigate to http://localhost/mysite/home/index
It's probably not the perfect solution, and I definitely think the old webforms way which worked was better - but I guess there are pros and cons to any technology.
Still would be happy to hear if someone has a better solution. for now - this does the trick.
When you navigate to
http://localhost/mysite
The behavior is a little different from
http://localhost/mysite/
Try that to confirm. Without the trailing slash, the "mysite" looks like a document name, not a folder, so relative paths would form from the root of the server.
What you may need to do is pass in the site content URL into your home.js and form absolute paths from it in your code.

Ext.data.JsonP.request always going to failed function?

I am doing application in Extjs, i am calling Ext.data.JsonP.request. In below code url path will come dynamically generate by appending name to base url of pdf. But Here i am hard coded. I am passing this url and testing jsonp request. if this url returns success i can write code success logic else failure, but here always going to failure method. also i have tried Ajax.request but no use. Some time i will get pdf path but that pdf is not in server that time i need showcase alert message like pdf is not found. Can tell me how can achieve this one? is it possible by calling jsonp request or any other method? Thank you
here is my code:
Ext.data.JsonP.request({
url: 'http://jmlr.csail.mit.edu/papers/volume10/mannor09a/mannor09a.pdf',
method: 'GET',
params: {
//fileID: feed_id, //this.form.getComponent('file').value,
},
failure: function () {
alert('failed !');
},
success: function () {
alert('success!');
}
});
Are you sure, that you need ajax to get pdf file? If you want to display this file to user, you can just put direct link to this file (without ajax or other tricks) and browser will show it.
Hard to understand, what do you want to get in the success function.
My recommendation to use plain link (you still can generate it dynamically to user)
Link
against using JSONP in this situation :)

Categories