Hey guys,
I have a little problem with a simple ajax request. I can't figure it out why jquery ajax method doesn't work with the last version of chrome ... on ff work great so as on opera but on chrome i don't get any response and no errors. This is my js code:
function load(idno){
var url = 'index.php';
$.get(
url,
{
pagina:"ajax",
show:"cars",
brand:idno
},
function(data) { document.getElementById("model").innerHTML=data },
"html"
);
}
Any reason you're not just using jQuery.load()? Eg
$('#model').load('index.php', {
pagina: 'ajax',
show: 'cars',
brand: idno
});
At a guess, I'd say the problem is with the innerHTML call. A more robust method would be to use jQuery.html(), eg
function(data) { $('#model').html(data); }
Edit
Just whipped up this test and it works fine
<?php
// test.php
echo '<pre>', print_r($_REQUEST, true), '</pre>';
<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="model">
Default text
</div>
<p><button id="fetch-data">Fetch Data</button></p>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#fetch-data').click(function() {
$('#model').load('test.php', {
pagina: 'ajax',
show: 'cars',
brand: 123
});
return false;
});
});
</script>
</body>
</html>
When I click the button, I can see all the request variables sent to the script
After a long long nith I've managed to resolve the problem. My JS code is good and maybe Phil's too ... I didn't try that in this version but the real problem in Chrome is that onclick attributes on option tags aren't allowed. So I made the event
<select onchange='loadData(this.value,'models')'></select>
and it is working great. Thank you Phil anyway.
because of Security reason chrome not allow cross-domain communication if request is not from a trusted sites,
if you want to use $.ajax in chrome so you need to disbale web security of chrome
use this comman.
your_chrome_path --disable-web-security
after doing this $.ajax works fine.
Related
I know there are a lot of these questions about this one, but unfortunately i cant find the right answer so i try it again.
I simply want to display the current song from "http://178.19.116.253/currentsong?sid=1" on my site that must refresh every x seconds.
I rather not use php cause it will make a background process for all users, so i've seen a lot of little scripts like this..
<div id="sc_stats"><?php include_once 'sc_stats.php'; ?></div>
var refreshId = setInterval(function() {
$.get("sc_stats.php", function(data) {
$("#sc_stats").html(data);
});
}, 10000);
But i cant get mine to work without php.
Someone can help me with this?
You don't need to use php, the following snippet which only uses jQuery will display the current song and refresh it every second.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="nowplaying"></div>
<script src="https://cdn.jsdelivr.net/jquery/3.2.0/jquery.min.js"></script>
<script>
setInterval(function() {
$.ajax({
url: "http://178.19.116.253/currentsong?sid=1",
dataType: "html",
success: function(data) {
$('.nowplaying').text(data);
console.log(data);
}
});
}, 1000);
</script>
</body>
</html>
Note: In order to get this to work, either:
This piece of code must run on the same domain/server as your stream
Or CORS must be enabled on your server. More about CORS can be found here
You can test CORS with the following Chrome plugin: Allow-Control-Allow-Origin:
I saw that I was not the only one with such a problem, but I did not find a solution.
So the problem comes from an application much more complex than that, but trying to target the problem I realized that even a simple "Ajax" request between 2 or 3 files returns me "undefined".
Here are my files :
index.php
<body>
<button>Button</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./main.js"></script>
</body>
main.js
$(document).ready(function()
{
$('button').click(function(){
$.post('test.php', function(data, status){
console.log('data: ' + data, status);
});
});
});
test.php
<?php
echo "lorem ipsum";
?>
When I click on the button the Ajax request returns that in there console:
data: undefined success
When my file is an index.php file it always returns "undefined" no matter the context (Of course if there is no Javascript error).
But by doing several tests I realized different results with the same content but with other file extensions, the returns are not always the same, for example:
index.html instead of index.php, same main.js and same test.php
data: success
index.html instead of index.php, and if I call a test.txt file that contains for example "lorem ipsum" it returns this :
data: lorem ipsum success
That's my problem, thank you in advance for your answers.
well, i think you have to send json instead of echo like this:
return json_encode('lorem ipsum');
try this i hope it help.
Put this code in your test.php file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button>Button</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('button').click(function(){
$.post('abc.php', function(data, status){
console.log('data: ' + data, status);
});
});
});
</script>
</body>
</html>
in your abc.php file just put this and check and put test.php and abc.php in same folder or if abc.php is in another location just change the url of abc.php in $.post
<?php echo "hello"; ?>
I found the problem, it came from my work environment, I used this plugin https://github.com/JosephLenton/PHP-Error and by disabling it everything was working correctly ^^'
Now I have to figure out how to keep it activated while making Ajax requests xD
Thank you all for your help and sorry for wasting your time. :/
here try this:
$(document).ready(function() {
$("#button").click(function() {
$.ajax({
url: "test.php",
success: function(result) {
$("#div").html(result);
}
});
});
});
Then for the php code:
$array = array("" => "lorem", "" => " ipsum");
echo json_encoded($array);
I´m trying to learn ajax, sitting here sinse 3 hours and trying to understand what I need to make it run.
I´m using it on Scriptly with Xampp.
This is my code:
<head>
<title>Titel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax Example!</title>
<script src="js\jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){
//alert("hello");
$.ajax({
type: "POST",
url: "http://localhost/inde.php",
data: {
myName: "durgesh technoclass"
},
success: function(output){
alert(output);
}
});
});
});
</script>
</head>
<body>
<form>
<button id="btnSubmit">Click me !</button>
</form>
I even watched a tutorial on Youtube and copied all the code from there.
The rating of the tutorial is good, the code seems to work for him, but why doesn´t it work for me ?! I don´t understand that.
The Jquery works, but ajax doesn´t. The Script just reloads the page and displays nothing.
Please help.
Edit:
May it be that it doesn´t work, because xampp doesn´t run an actual server ?
On request, here´s the code of the "inde.php":
<?php
echo "Welcome from Server";
?>
Edit 2:
Solution:
I messed up the path of the inde.php.
Just fixed it.
It works but there´s a mistake in the code. It had been fixed by Tanvir Ahmad Sohan. You can find his fix in his answer down there.
Try this...
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(event){
event.preventDefault();
//alert("hello");
$.ajax({
type: "POST",
url: "http://localhost/inde.php",
data: {
myName: "durgesh technoclass"
},
success: function(output){
alert(output);
}
});
});
});
</script>
As your button is inside a form, when you click the button, form is being submitted to the same page, so it just reloads. To prevent this from happening use preventDefault() to prevent the default behaviour.
I'm trying to get photos from instagram by get request,
I tried jQuery.get() which worked well for other purpose of get request which is not instagram,
but for this one it doesn't work.
I used postman and I get the request no problem at all,
I also tried to change from jQuery.get() to jQuery.getJSON() and still no luck.
By the way, tried to get the request with NodeJS using request module and it works fine.
Hope you can help, here is my simple code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(function () {
$.get("https://www.instagram.com/uefachampionsleague/media/",
function (data) {
alert(items[0].id);
},"json");
});
</script>
</head>
<body>
<p></p>
</body>
</html>
You need to register your application and then set the credentials in the AJAX request, or you can also use the crossorigenme proxy:
$(function () {
$.get('https://crossorigin.me/https://www.instagram.com/uefachampionsleague/media/', function(data) { console.log(data); });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
As Jaromanda added "It's worth noting the caveat on crossorigin.me - PLEASE DO NOT USE THE PROXY ON A PRODUCTION SITE - if you want to "bypass" CORS, use your own damned server to do it".
I am trying to brush up on my jquery and ajax. In Jquery in 8 hours there is this:
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A JQuery Sample Program</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$.ajax({
type:"POST",
url:"postFile.php",
data: {data:100},
success:function(data) {
$("div").html(data);} });});
</script>
</head>
<body>
Response: <div></div>
</body></html>
and postFile.php is this:
<?php
if ($_POST["data"]=="100") {echo "100";}
?>
I'm running this under IISExpress. BUT all I get from the browser (Chrome) is method not allowed in jquery.min.js:4. This seems so simple and yet, doesn't work.
Method not allowed usually happens when you're trying to request a file that's on another domain. I assume that's not your real code since it looks like you're calling a file that's on the same domain. Read about cross domain scripting. You can't do AJAX calls to a script that's on a different domain.