use of function $.ajax() for GET and distant URL - ajax

my work consist to read this distant xml file :http://www.velib.paris/service/stationdetails/paris/901 ,in html file by using Ajax !
this is my code:
<script type="text/javascript">
getReadXmlFile();
function getReadXmlFile(){
alert("recherche d fichier");
$.ajax({
            type: "GET",
            url: "http://www.velib.paris/service/stationdetails/paris/901",
            dataType: "xml",
            success: parseXml
        });
alert("obtention du fichier");
}
function parseXml(xml){
alert('debut du parse');
var up=$(xml).find("updated").text();
alert(up);
}          
</script>
But it does not run i don know why
thank for help ! i need your help please !

I have tried your code at JSFiddle (with unrelated modification) and it works properly.
getReadXmlFile();
function getReadXmlFile(){
alert("recherche d fichier");
$.ajax({
type: "POST", // JSFiddle needs this, it's not related to your issue
url: "/echo/xml/",
dataType: "xml",
data: {
xml: `
<?xml version="1.0" encoding="utf-8"?>
<station>
<available>1</available>
<free>19</free>
<total>20</total>
<ticket>1</ticket>
<open>1</open>
<updated>1472183109</updated>
<connected>1</connected>
</station>
`
},
success: parseXml
});
alert("obtention du fichier");
}
function parseXml(xml){
alert('debut du parse');
var up=$(xml).find("updated").text();
alert(up);
}
Check this JSFiddle
Without error message given, the only thing I can think of is do you have jQuery loaded correctly?

Related

redirecting is not working in ajax

This below script is in view/template folder.
<script>
$(document).ready(function(){
$("#change").click(function(){
$.ajax({
type: "POST",
url: "common/customer.php",
data: { oldemail: $("#oldemail").val(), newemail: $("#newemail").val() }
});
});
});
</script>
I want to send data in common/customer.php but it is not working. I
already used ../common/customer.php but same problem. What is the
solution?
Its a absolute path problem.
Your script is in view/template
If your path of javascript file is like something,
view/template/myjavascript.js
And if your path of customer.php file is
view/common/
Then you must switch your directory by ../
Use
../common/customer.php
Its a relative path of your file.
According to jQuery documentation, you must declare the data type:
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
TRY...
url: "/common/customer.php", // note the leading slash
Sorry friends problem was in my html code. I used the type of input submit but when i changed it into button then it is working fine. Thanks to all of you.

What is the equivalent of Ajax.updater in Jquery?

Please let me know the equivalent of below prototype code in Jquery.
var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {
method: 'get',
parameters: pars,
insertion: Insertion.Bottom
});
I want to perform the same action using Jquery.
Thanks in Advance.
In jQuery the Ajax will use as following:
$.ajax({
url: "/billing/add_bill_detail",
type: "get",
dataType: "html",
data: {"pars" : "abc"},
success: function(returnData){
$("#abc").html(returnData);
},
error: function(e){
alert(e);
}
});
Use #abc if abc is the id of the div or use .abc if abc is a class.
You can place the returnData iin your HTML where you want,
There are some ways using ajax like jQuery.ajax({...}) or $.ajax({...}) other than this there are some simplified versions of these too like:
$.get() or jQuery.get()
$.post() or jQuery.post()
$.getJSON() or jQuery.getJSON()
$.getScript() or jQuery.getScript()
$ = jQuery both are same.
As you are using method : 'get', so i recommend you to use $.ajax({...}) or $.get() but remember to include jQuery above this script otherwise ajax function wont work Try to enclose the script in the $(function(){}) doc ready handler.
'abc' if you could explain it
Try adding this with $.ajax():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: "/billing/add_bill_detail",
data: pars,
dataType: 'html'
success: function(data){
$('#abc').html(data); //<---this replaces content.
},
error: function(err){
console.log(err);
}
});
});
</script>
or with $.get():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.get("/billing/add_bill_detail", {data: pars}, function(data) {
$('#abc').html(data); //<---this replaces content.
}, "html");
});
</script>
or more simply use the .load() method:
$('#abc').load('/billing/add_bill_detail');
You can use .load() method
Load data from the server and place the returned HTML into the matched
element.
Read docs: http://api.jquery.com/load/
$(function(){
$.ajax({
type: "GET",
url: "abc/billing/add_bill_detail",
data: data,
success: function(data){
alert(data);
}
});
});

jquery ajax get XML from another domain

Hey all here is my code i have to read an XML file from a Vimeo website:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://vimeo.com/api/v2/video/51229736.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('video').each(function(){
var thumbURL = $(this).attr('thumbnail_small');
alert(thumbURL);
$('#vidThumb').html('<img src="' + thumbURL + '">');
});
},
error: function(err) {alert('err');}
});
});
The XML looks like this:
<videos>
<script/>
<video>
<id>51229736</id>
<title>CHATT HISTORY CENTER FILMS CAVALIER</title>
<description/>
<url>http://vimeo.com/51229736</url>
<upload_date>2012-10-11 13:08:51</upload_date>
<thumbnail_small>http://b.vimeocdn.com/ts/353/072/353072229_100.jpg</thumbnail_small>
<thumbnail_medium>http://b.vimeocdn.com/ts/353/072/353072229_200.jpg</thumbnail_medium>
......
</video>
</videos>
Problem being is that it errors out. I'm sure its because of the different domain name trying to read it so how can i fix that in order to do that?
You can not do that through jQuery's ajax across different domains using XML , you can use callback=? to get jsonp response back like in the other answer , if it is possible to get json response from that url
You should have no problem getting an XML response from your server side , you should probably try that route
Achieved it by doing the following:
var vimeoVideoID = '51229736';
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(json) {
$("#vidThumb").attr('src', json[0].thumbnail_small);
});
I think the answer is in setting the callback to "?" at least it usually is for me. This at least works with JSON. And if it were JSON, this is how I would do it:
var query = 'http://vimeo.com/api/v2/video/51229736.xml&callback=?';
$.ajax({
url: query,
type: 'GET',
dataType: 'json',
success: function(s) {
console.log('success' + s)
},
error: function(e) { console.log('something went wrong!', e)}
});

AJAX on click not calling/loading as it should

I have been learning AJAX for the best part of 2 hours, trying to get my head around how to get this to work, it seems it is calling the function as if I put an alert in, it all works fine.
I tried using another method and it seemed to call the function on it's own and it would load what the .php page is echoing.
What am I doing wrong in order for it to not work at all?
<script type="text/javascript">
$('a.fire').click(call_ajax);
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
</script>
Edit: I have also just tried
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
Which also does not work.
EDIT: I have now got code that GET's the php file I wanted, but for some reason does it on it's own
<script type="text/javascript">
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$('a.fire').click(call_ajax());
});
});
The issue with this code is that it fires on it's own
EDIT: Now have new code, that is attempting to fire according to Firebug console but I get the alert ERROR: error, so I don't have a clue what is happening in order for it to fail, I have also tried many different URL's with no working solution
$('a.fire').click(function () {
$.ajax({
type: "GET",
url: "/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
},
error:function(xhr, text, error){
alert("Error: " + text);
}
});
});
SOLVED: I have now got it to work! For some reason my anchor had a href of "", which would cause it to reload the page and removing my GET from the page
ajax will only work if it's the same domain. This means that if you execute jQuery from domain x to domain y, it won't work. This is for safety-reasons to prevent websites from loading from another website. Does your jQuery-ajax call work if you remove the 127.0.0.1 from your url?
Furthermore I guess you should add the click-function inside your $(document).ready(); function, like this:
$(document).ready(function(){
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
});
for testing purposes, you can also use the complete function inside your ajax and alert your data. firebug can be helpful too to find your problem :)

CodeIgniter - jQuery, JSON, simple example not working

Ok, Im a real newbie when it comes to ajax and json ... Im trying to figure it out in my codeigniter project.
Ive written something simple to start, just to bring up an alertbox, but it doesnt seem to be working, if someone could let me know where im going wrong, that would be grand.
In my view i have the following code.
$('.users').change(function(){
$.ajax({
type: "POST",
url: "/edituser/returndata",
data: {id: this.find(':selected').val()},
dataType: json,
success: function(data){
alert(data);
}
});
});
in the edituser/returndata controller, i just simply have the following
function returndata(){
echo $_POST['id'];
}
I know this will look pretty stupid to some people, but im still trying to figure it out, if someone could help :)
Cheers
----------------- UPDATED CODE BELOW
<script type="text/javascript" charset="utf-8">
$('#users').live('change', function(){
$.ajax({
type: "POST",
url: "/edituser/returndata",
data: {id: $(':selected', this).val()},
dataType: 'json',
success: function(data){
alert(data.id);
}
});
});
</script>
Controller code
function returndata()
{
$ID = $this->input->post('id'); // Use this instead of $_POST['id']
echo json_encode(array('id'=>$ID));
}
Your dataType should be:
dataType: 'json',
Your data should be:
data: {id: $(this).find(':selected').val()},
Inside of a event callback, this is a DOM element, so it needs to wrapped in $().
or:
data: {id: $(':selected', this).val()},
Which is the same as above, just less characters.
Also, in your PHP, you need to output JSON.
function returndata(){
$ID = $this->input->post('id'); // Use this instead of $_POST['id']
echo json_encode(array('id'=>$ID));
}
Then in your success function, you can do:
alert(data.id);
UPDATE
Disregard the answer. I thought the JSON was sent as a string, but it's not, as pointed out by Rocket. It is converted to url encoded value pairs. I'm leaving the answer up just in case someone thought the same thing as me....
The incoming JSON is not a request parameter, you need to read the body of the request
$json = json_decode(trim(file_get_contents('php://input'));
$id = $json->id;

Resources