Check if a URL exists then open in iframe - ajax

Currently, I open a url with
window.open("#iframeid", myurl);
However, ideally I want to check if the url exists before loading it.
I've changed my code to the following, but I cannot see where I'm going wrong.
Nothing appears to happen.
if I change .add to .src, I get an error.
Any help would be appreciated.
$.support.cors = true;
$.ajax({
url: myurl,
dataType: 'html',
success: function(data){
$("#iframeid").add(data);
},
error: function(data){
alert("didn't work");
}
});

You can execute code based on the statusCode:
$.ajax({
url: myurl,
dataType: 'html',
statusCode: {
200: function(){
//run your success code
},
404: function() {
alert( "page not found" );
}
}
});

Related

Redirecting after Ajax post

I want the success on ajax post to go to the home page. For some reason I keep doing it wrong. Any idea what I should do to fix this?
window.APP_ROOT_URL = "<%= root_url %>";
Ajax
$.ajax({ url: '#{addbank_bankaccts_path}',
type: 'POST',
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', '#{form_authenticity_token}')},
dataType: "json",
data: 'some_uri=' + response.data.uri ,
success: function(APP_ROOT_URL) {
window.location.assign(APP_ROOT_URL);
}
});
success: function(response){
window.location.href = response.redirect;
}
Hope the above will help because I had the same problem
You can return the JSON from server with redirect status and redirect URL.
{"redirect":true,"redirect_url":"https://example.com/go/to/somewhere.html"}
And in your jQuery ajax handler
success: function (res) {
// check redirect
if (res.redirect) {
window.location.href = res.redirect_url;
}
}
Note you must set dataType: 'json' in ajax config. Hope this is helpful.
Not sure why, but window.location.href did not work for me. I ended up using window.location.replace instead, which actually worked.
$('#checkout').click(function (e) {
e.preventDefault();
$.ajax('/post/url', {
type: 'post',
dataType: 'json'
})
.done(function (data) {
if (data.cartCount === 0) {
alert('There are no items in cart to checkout');
}
else {
window.location.replace('/Checkout/AddressAndPayment');
}
});
});

Redirection using ajax

I am trying to redirect to a page after successful ajax. Here is my code:
$.ajax({
type: "GET",
url: "blogdelete.jsp",
data: val,
async: true,
cache: false,
success: function (msg) {
window.location.href="hodlogin.jsp";
}
});
This is not working. Any suggestions??
Thanks in advance!
Seems success block not executing.
You must add error block to check any errors or use browser console.
$.ajax({
type: "GET",
url: "blogdelete.jsp",
data: val,
async: true,
cache: false,
success: function (msg) {
console.log('success');
alert('success');
},
error: function(){
console.log('error');
alert('error');
}
});
I would start by putting an alert (or break point in firebug) inside of the success function to be 100% sure its being called. If it is then I would try these options:
var url = "hodlogin.jsp";
window.location = url;
Or
$(location).attr("href", url);
If those still fail and you are sure there being called then double check your url. Maybe its not in the same directory as the javascript that is calling the window.location. You could try an absolute path in that case just to see if it works.

Ajax Call with PUT method

i am trying to make ajax call with PUT method. Below is the code, but i am getting with the error XML Parsing Error: no element found Location: moz-nullprincipal:{c847a4af-f009-4907-a103-50874fcbbe35} Line Number 1, Column 1:
$.ajax({
type: "PUT",
async: true,
url: "http://localhost:8080/karthick/update",
data: JSON.stringify(params),
contentType: "application/json",
dataType: "JSON",
processdata: true,
success: function (json) { //On Successfull service call
},
error: function (xhr) {
alert(xhr.responseText);
}
});
return false;
};
function ServiceFailed(xhr) {
alert(xhr.responseText);
if (xhr.responseText) {
var err = xhr.responseText;
if (err)
error(err);
else
error({ Message: "Unknown server error." })
}
return;
}
But this service is working Good with Rest-client jar. Also my POST method works fine in my browser. Please help me in this.
Regards
Karthick
Usually, this error comes, when making a cross browser request. Try data: JSONP and see if it helps.

Google app engine JSON/AJAX not working

Here is my JS code:
<script>
$("#comments").click(function(event) {
$.ajax({
type: "GET",
url: '/localhost:8080/comment',
data: JSON.stringify(
{
'name': 'anon',
'subject': 'MY COMMENTS',
}),
contentType: 'application/json',
success: function(data,textStatus, jqXHR) {
console.log('POST response: ');
console.log(data);
}
});
});
</script>
and here is my Python Code:
class Guestbook(webapp2.RequestHandler):
def get(self):
Jguest_data = json.loads(self.request.body)
return self.response.out.write(json.dumps(Jguest_data))
I got the error 404 Resource not found. After digging around there is some issues with localhost . so I tried with JSONP as follows:
<script>
$("#comments").click(function(event) {
$.ajax({ // ajax call starts
url: "localhost:8080/comment", //
type: "GET",
data: JSON.stringify(
{
'name': 'anon',
'subject': 'MY COMMENTS',
}),
dataType: "jsonp", // Choosing a JSON datatype
success: function(data,textStatus,jqXHR)
{
console.log('POST response: ');
console.log(data);
}
});
});
</script>
That still does not work... I get "No JSON object could be decoded" Error.
I tried replacing JSON.loads with JSON.load... and that still errors out...
Can someone please let me know what the issue is?
Thanks a mil in advance
when you do a GET request with ajax you are using url parameters.
so there is no body in the request.
make a POST and change your get() to post()
You should edit your app.yaml file if there is one in your project, and if there is not one, add one.
Add this code to your file (app.yaml).
-url: /comment
script: <url-to-the-server-side-script>
You can see a more complete app.yaml documentation for use with python here.
https://cloud.google.com/appengine/docs/python/config/appref

How to send parameters with jquery $.get()

I'm trying to do a jquery GET and i want to send a parameter.
here's my function:
$(function() {
var availableProductNames;
$.get("manageproducts.do?option=1", function(data){
availableProductNames = data.split(",");;
alert(availableProductNames);
$("#nameInput").autocomplete({
source: availableProductNames
});
});
});
This doesn't seem to work; i get a null in my servlet when i use request.getParameter("option");
If i type the link into the browser http://www.myite.com/manageproducts.do?option=1 it works perfectly.
I also tried:
$.get(
"manageproducts.do?",
{option: "1"},
function(data){}
which doesn't work either.
Can you please help me?
EDIT:
also tried
$.ajax({
type: "GET",
url: "manageproducts.do",
data: "option=1",
success: function(msg){
availableProductNames = msg.split(",");
alert(availableProductNames);
$("#nameInput").autocomplete({
source: availableProductNames
});
}
});
Still getting the same result.
If you say that it works with accessing directly manageproducts.do?option=1 in the browser then it should work with:
$.get('manageproducts.do', { option: '1' }, function(data) {
...
});
as it would send the same GET request.
Try this:
$.ajax({
type: 'get',
url: 'manageproducts.do',
data: 'option=1',
success: function(data) {
availableProductNames = data.split(",");
alert(availableProductNames);
}
});
Also You have a few errors in your sample code, not sure if that was causing the error or it was just a typo upon entering the question.
I got this working : -
$.get('api.php', 'client=mikescafe', function(data) {
...
});
It sends via get the string ?client=mikescafe
then collect this variable in api.php, and use it in your mysql statement.
This is what worked for me:
$.get({
method: 'GET',
url: 'api.php',
headers: {
'Content-Type': 'application/json',
},
// query parameters go under "data" as an Object
data: {
client: 'mikescafe'
}
});
will make a REST/AJAX call - > GET http://localhost:3000/api.php?client=mikescafe
Good Luck.

Resources