I have a page that called redirect.php, this page has several attributes that I want to send them to another page, actually I write this code :
<script type="text/javascript">
$.ajax({
url: "http://www.mysite.com/getdata.php",
context: document.body,
success: function(data) {
$('body').append(data);
}
});
</script>
But it does not work in firefox, in firefox not happens anything but in IE it worked.
when I write exact name of page for example url: "getdata.php" it work perfectly but with absolute address is not :( Why it doesn't work in firefix? any idea?
thanks for your help ...
It's a security restriction of Firefox not to allow cross-domain Ajax requests.
Related
I would like to send Ajax request in pug template file.
form#payment-form()
section
label(for="amount")
input#amount(name="amount" type="tel" min="1" placeholder="Amount" value="10")
script(src="scripts/jquery.js")
script.
(function () {
var amount = $('#amount').val();
$.ajax({
type: "POST",
url: "/posturl",
data: {'amount':amount},
success: function(){},
dataType: 'json'
});
})()
But it doesn't work, how to do it?
I want to know how to send ajax request in embeded javascript of pug file
To me there seems to be two issues
You have put unnecessary tabs in your function under (function (){
You need to use document.ready to ensure that HTML content is
ready. You can avoid this if you don't really care for DOM once you have the response
check a working example below
doctype html
html
head
script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
script.
$(document).ready(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
body
#div1
h2 Let jQuery AJAX Change This Text
Here there is no problem with your pug template (maybe just you can remove ()after #payment-form() because it is empty and it's not a mixin). But with your JS, you send the AJAX request immediatly, you should bind it to an event (click on a button, keypress on an input, etc.). Then you have to be sure you put your lib jquery.js in a directory you can access from your browser with scripts/jquery.js. If it's still not work after this change please report more precisely your error (open the console to get the messages, get us the behavior you expect and the behavior you get).
i need to pull a small string from a diffrent site from a div with the class 'entry' (theres only one div with that class and the div doesnt have an id).
I learned about this plugin http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
But i somehow did not manage to install nor use the code to make it work.
I tried nothing but the code on the plugin page.
Where/How do i need to install the plugin? Where/How to implement the given code correctly?
Maybe a working fiddle sample would help :)
EDIT: I used this code
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="https://raw.githubusercontent.com/padolsey-archive/jquery.fn/master/cross-domain-ajax/jquery.xdomainajax.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.ajax({
url: 'http://news.bbc.co.uk',
type: 'GET',
success: function(res) {
var headline = jQuery(res.responseText).find('a.tsh').text();
alert(headline);
}
});
});
</script>
And i use phase5 HTML editor, so theres no error thrown, any recommandation for a different editor?
The code just doesnt produce any result, the page loads and functions as normal but no alert is shown.
OK i found a solution, here is what i did:
Added header('Access-Control-Allow-Origin: *');
in die functions.php of the wordpress site i want to acess then i used the following ajax request to pull the content:
jQuery.ajax({
url: 'http://www.somesite.wordpress.com/',
type: 'GET',
success: function(res) {
var data = jQuery.parseHTML(res);
jQuery(data).find('div.class').each(function(){
jQuery('#destination').append(jQuery(this).text());
});
}
});
I tried all of this: Getting specific element from external site using jQuery / ajax and the last answer worked for me (its the same code mentoined above).
Unfortunately i dont know why or how this works and if this is the best way, probably not - still it works somehow so thats fine by me.
If anyone sees through this and knows a better/sleeker solution, it would be very welcome!
I have a cshtml page that has a link, and a div to display some content.
<a href="#" onclick="Show_New_Page('#First_Div')>My Link</a>
<div id="First_Div">
#Html.Partial("General_Page") <- This is the default page that gets displayed on load.
</div>
When you click on the link, the javascript function Show_New_Page gets called and the string '#First_Div' gets passed as a parameter. I pass the name of the div I wish for the ajax in Show_New_Page to put its success value. That function looks like this:
function Show_New_Page(div) {
$.ajax(
{
type: "POST",
url: url, //Declared above globally, unimportant
data: data, //Declared above globally, unimportant
success: function (result) {
$(div).html(result);
}
});
}
When you click on this link in Internet Explorer, the new page gets displayed fine with no issues. However, when you click on this link in FireFox, the entire page turns white and never successfully loads.
There are plenty of posts about issues with Ajax and different browsers, but I was unable to see one that helped me. Any hints or tips I can try are much appreciated. I am very unsure of why this is happening, so if I have left out any information I will certainly do my best to provide it.
There seems to be a missing closing ) when you are calling the Show_New_Page function. Also it's recommended to return false from click handlers to cancel default action:
My Link
Also you might prefer to give this anchor an id:
My Link
and then unobtrusively AJAXify it in a separate file to avoid mixing markup with javascript:
$(function() {
$('#myLink').click(function() {
$.ajax({
type: 'POST',
url: url, //Declared above globally, unimportant
data: data, //Declared above globally, unimportant
context: { id: $(this).data('id') },
success: function (result) {
$(this.id).html(result);
}
});
return false;
});
});
The issue here was the fact that my ajax views that were being passed down after clicking on a link were using document.write() statements. I have learned that this is strange to do after the page has already loaded. I've moved these statements up to the files that were not being loaded with ajax, and that fixed the problem. Thank you to everyone who commented and suggested ideas to me. It was the investigation of these ideas that lead me to the core issue!
The lesson: be careful with excessive document.write() statements in firefox!
The question might be a little misleading as I don't want to know how to open a html document in a div ,but I asked the question as I am currently facing a problem where I can't replace the html file which I have already placed in a div
I have already placed a html file in a div using ajax like this:
$.ajax({
url: 'calender.aspx',//this is html.aspx file
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);//mainBar is the div
}
});
this file gets placed on page load i.e document.ready function ,till here everything is fine.....my trouble starts when I want to replace the file,what I do is call a javascript function say replaceFile() on button click and write the same code to replace the file (changing the url of course)
like this
function replaceFile()
{
$.ajax({
url: 'Another.aspx',
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);
}
});
}
but this doesn't work,please help me out!
I guess your binding is not working when you try to click on the content you loaded via ajax . So you might want to change the binding of onclick from
$("#someButtonId").click(function(){
replaceFile();
});
to
$(document).on("click","#someButtonId",function(){
replaceFile();
});
jQuery on works with current and future elements.
with this function you will load the page into the element named result
.load( url , data, complete(responseText, textStatus, XMLHttpRequest)] )
function replaceFile(url)
{
$('#result').load(url, function() {
alert('Load was performed.');
});
}
replaceFile('htmlfile.html');
You can load this in Firebug and set a break point at $(".mainBar").html(data); to make sure it's being called. You don't have a failure handler, so it's possible that it's actually receiving an HTTP failure code, not a success code.
I'd also look at the network traffic under the Net tab to see what the request/response looks like. That's an easy way to find out what is really going on with most AJAX calls. IE9 has similar developer tools if you want to use it and not Firefox or Chrome.
I have this code that is being ignored by i.e. ive set alerts throughout the code and i've pin point the error being the ajax call
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Website</title>
<script type="text/javascript">
$.ajax({
url: "http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=demo",
success: function(data){
...code
}
});
</script>..body.. etc...
The code works perfectly on firefox.. however
the $.ajax({}); call is completely ignored in IE and Chrome.. Anyone know why? Thanks in advance...
Are you missing <script> tags, and, you know, jQuery? Also, since this is a cross-site request, make sure you're actually handling this as jsonp correctly.
Without posting your actual code I think that's the best we can do.
I can only add to what Michael Haren has already said that what you get from this URL is:
{"status":{"message":"the daily limit of 30000 credits demo has been exceeded. Please throttle your requests or use the commercial service.","value":18}}
As pointed out, you're missing the script tags as well as the actual path to the jquery file, and you need to wrap your ajax call in with document ready so...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> // Latest jquery from google
<script type="text/javascript">
$(function() {
// -- Your Code Here
});
</script>
You have to tell add &callback=? at the end of the URL.
http://api.geonames.org/earthquakesJSON?...&username=demo&callback=?
One thing that will prevent the ajax from working in Chrome/Safari but still allow it to work in Firefox is leaving out the dataType field of the ajax command. For instance:
$.ajax({
type: 'Get',
url: "http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=demo",
success: function(data){
var jsonArray = jQuery.parseJSON(data);
alert(jsonArray.status.message);
}
});
will output the value element of the JSON array returned from that URL ONLY if ran in Firefox. To get this ajax to work in Chrome you must include the dataType field and remove the jQuery.parseJSON like so:
$.ajax({
type: 'Get',
url: "http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=demo",
dataType: 'json',
success: function(data){
var jsonArray = data;
alert(jsonArray.status.message);
}
});
If this is left out or you try to do it the other way it will appear as it is skipping over your ajax all together. I hope this fixes your problem.