ajax submit request with pretty URL - javascript

i'm building my first "pretty url" web site, but when i attempt to run any of the AJAX Request functions, they are not being passed to the correct file (submit.php)
i have 1 file that holds all of the AJAX requests (http://mdloring.com/ezleague/submit.php):
function joinLeague(guild, league) {
$.ajax({
type: "POST",
url: "submit.php",
data: "form=joinLeague&guild=" + guild + "&league=" + league
}).success(function( msg ) {
$('.login_success').css("display", "");
$(".login_success").fadeIn(1000, "linear");
$('.login_success_text').fadeIn("slow");
$('.login_success_text').html(msg);
//setTimeout(function(){location.reload()},3000);
});
}
on one of my "pretty url" pages (http://mdloring.com/ezleague/game/counter-strike), i have a button that triggers the above function, but the URL it attempts to pass the request to is: http://mdloring.com/ezleague/game/counter-strike/submit.php , instead of http://mdloring.com/ezleague/submit.php
i'm really lost on this one. help is greatly appreciated.

Its due to the relative URL pattern. Try using absolute URL pattern
url: "http://mdloring.com/ezleague/submit.php" in the AJAX call

You can use absolute paths for your url like
url : "/ezleague/submit.php"
Do not use the server name, so your script is portable to other domains.

Related

Passing a variable to URL parameters using JQuery POST

I have a function which currently passes an account code (derived from a combo box) to the server. Currently it does this by sending the request in the body - I need it to send as a URL parameter. So for example the URL should be:
localhost:1234/myProject/WebApp/Data?accountCode=Full
Assuming full is selected.
My code below works as a request body but my attempts to amend it to submit as a URL request have failed.
accountSelected: function () {
var saccountCode = $("select#accountcombo").val();
var stringAccountCode = saccountCode.toString()
console.log("Account is: " + stringAccountCode);
var myURL = "WebApp/Data";
$.ajax({
url: myURL,
type: "POST",
data: {
"accountCode": stringAccountCode
},
dataType: "text",
})
I have been looking at using $.param but couldn't get anything to work and also read on other questions about using $.get but when I change my code above to a "GET" i get an error
"Request method 'GET' not supported" - the server is expecting a POST request. Any way i could achieve this?
Thanks
Try,
URL: "localhost:1234/myProject/WebApp/Data?accountCode="+stringAccountCode
Appending number of parameters you want example
?accountCode="+stringAccountCode+"&aa="+someAccount

Connecting to Rest Server with jquery and ajax

i am trying to make a call to a rest server using jquery/ajax
The rest Server is built in Codeigniter
The ajax function is as follows:
var req = $.ajax({
type: 'GET',
url: "http://localhost/projects/comp6300Server/index.php/resources/token//username/" + email + "/password/" + pword + "/institution/" + inst,
contentType: "application/json; charset=utf-8",
dataType: "json"
})
The request that is generated is as follows:
http://localhost/projects/comp6300Server/index.php/resources/token//username/etambie#yahoo.com/password/qwerty/institution/BCC
The status returned is '400 Bad Request'
I think the problem may be with the email that is passed in "etambie#yahoo.com". Is there a way for the ajax automatically convert the '#' to '%40', or would i have to convert all special characters in my strings manually?
Two things to check out:
The "_" parameter is probably added to that each request is unique. If this isn't done, then the browser may attempt to get the result of calling the URL from it's cache, which is probably not what you want.
On the bad request ... are you sure you want two slashes after the word 'token' in your url?

How to get content type of a given url inside Javascript?

I want to know the content type of a given url input by the user inside my Javascript code. Actually, I have a drop-down list (html,csv,xls etc.) and I want to make it so when the user inputs an url, I want to detect the type of the content of the url and based on this type I want to set the value of my drop-down list (html,csv,xls etc.). I know, I can get the content type using Ruby like this :
require 'open-uri'
str = open('http://example.com')
str.content_type #=> "text/html"
or, also, I could use curl to get the content and then parse it to know the content type. But, I need to do this inside my Javascript code because of my need explained above. Any thought ?
EDIT_1 :
I tried this code in my javascript :
$("#wiki_form_url").change(function(){
$.ajax({
type: "GET",
url: "content.rb",
data: {
// input_url: $("#wiki_form_url").val()
},
dataType: "html"
}).done(function (data) {
// `data` contains the content-type
alert('Success !!!');
}).fail(function () {
alert("failed AJAX call");
});
});
I have a ruby script content.rb inside which I do :
require 'open-uri'
str = open('http://www.ofdp.org/benchmark_indices/25')
str.content_type
But, it does not seem to work. I am getting Ajax failure. May be it's because of url path of the script content.rb ? How should I specify a script path here ? (Relative or absolute)
The same origin policy prevents you from using client side JavaScript to directly discover information about arbitrary URIs (URIs you control are a different story).
You'll need to get that information with another technology, such as your server side Ruby.
You could do this by simply submitting a form to the server and returning a new webpage to the browser.
If you don't want to leave the page, then you can pass the data using Ajax. There are no shortage of Ajax tutorials out there, here is a good one from MDN.
Here's an example of an AJAX call:
$(document).ready(function () {
$("#button_check").on("click", function () {
$.ajax({
type: "GET",
url: "Your URL",
data: {
input_url: $("#textbox_id").val()
},
dataType: "html"
}).done(function (data) {
// `data` contains the content-type
alert(data);
}).fail(function () {
alert("failed AJAX call");
});
});
});
Where your HTML is something like:
<input type="text" id="textbox_id" />
<input type="button" id="button_check" value="Submit" />
And your Ruby code would be something like:
require 'open-uri'
class TestController < ApplicationController
def index
req = open(params[:input_url])
render :text => req.content_type
end
end
I have never used RoR before, so I have no idea if this is right or works in the slightest. But it's what I could quickly conjure up when scrambling through several tutorials. It's simply the concept you seem to be looking for. You'll need to figure out how to map a URL to this method, and then update the AJAX option url to use that.
So in the Javascript code - in the done method, that means the whole AJAX request was successful and the data variable should contain the result from the Ruby code req.content_type.
Atlast I could figure out the whole thing with the great help of #Ian. Here is my completed code : In javascript file :
$("#wiki_form_url").change(function () {
$.ajax({
type: "GET",
url: "/wiki_forms/content",
data: {
input_url: $("#wiki_form_url").val()
},
dataType: "text"
}).done(function (data) {
// `data` contains the content-type
alert('Success');
console.log(data);
// alert(data);
}).fail(function () {
alert("failed AJAX call");
});
});
Inside my wiki_forms controller I created a new method named content :
def content
req = open(params[:input_url])
render :text => req.content_type
end
Then added a new route in routes.rb file :
get "/wiki_forms/content" => 'wiki_forms#content'
and used /wiki_forms/content as the ajax request url. And, everything is working nicely now.

Appending an extra request to JSON callback

My Problem
I am trying to load JSON encoded data from a remote site using jQuery, however when jQuery tries to call this URL it appends the correct function to callback=? so it's something like callback=jsonp1256856769 but it also adds _=1256856769 to the url. So the url ends up being something like http://www.example.com/link/to/file.php?format=json&lang=en&callback=jsonp1256856769&_=1256856769
Now the problem is that that file that I am using that calls it can't interpret the _=1234234 and I can't change it so I have to fix the jQuery problems
My Question
How can I get jQuery to not appened that _= to the URL that it calls
What I have done to try to figure out my problem
Removed all other javascript libraries from the page
Tried several different versions of jQuery
My Code
function getData(){
url = "http://www.example.com/link/to/file.php";
url += "?format=json&lang=en";
$.getJSON(url+"&callback=?",function(data){formatData(data);});
}
*Above is the snippet of JavaScript that I am currently using
*Note the domain I am using is not example.com
UPDATE: added code
The _= part is there, because JSONP request are cache: false by default. You can set cache: true, which will make the _= part go away, but the browser will cache the requests.
function getData() {
url = "http://www.example.com/link/to/file.php";
url += "?format=json&lang=en";
$.ajax({
'url': url,
'type': 'GET',
'dataType': 'jsonp', // this adds &callback=? by design
'cache': true,
'success': function(data) { formatData(data); }
});
}

IIS6 javascript routing issues

I currently have the following within my view
function loadData() {
var url = "/Testx.mvc/GetData";
var id = "111111";
var format = "html";
$.ajax({
url: url,
type: "POST",
dataType: format,
data: "id=" + id,
success: populateResults
});
}
function populateResults(result) {
$('#results').html(result);
}
I also have a controller called TestxController with an action method called GetData(int? id).
Now the ajax call above works on Visual Studios 2008's built-in development server, but when i switch it to use IIS webserver it doesn't. It seems like the route isn't being found because I tried putting a break point on GetData but it doesn't even reach there.
Does anyone know what i would need to do to fix this?
Edit: I've also tried the wildcard mapping method discussed at http://haacked.com/archive/2008/11/26/asp.net-mvc-on-iis-6-walkthrough.aspx and it worked perfectly. (Of course I had to remov the .mvc from the url)
Is there any way to get this to work with the .mvc extension?
Thanks
Is Testx.mvc at the root of your webserver? If your application is running in a virtual directory on IIS then the correct path would be something like /YourApp/Testx.mvc/GetData.
The Visual Studio built-in webserver might be placing Testx.mvc at root, which is why it works within VS.
If that is the case, then try using the relative path Testx.mvc/GetData rather than /Testx.mvc/GetData.
Is there an actual function called 'callback'? Just asking because it seems like you might mean to be calling 'populateResults' with a successful response.
Try this perhaps:
$.ajax({
url: url,
type: "POST",
dataType: format,
data: "id=" + id,
success: function(results){$('#results').html(result)}
});
Did you check your ISS setup to see if it supports the POST action? It might only be specifying the GET action... see http://haacked.com/images/haacked_com/WindowsLiveWriter/07de283cb368_B754/application-mappings_3.png

Categories