im having a problem with getting any response from my server using Jquery and Ajax.
Server side:
$data = strtotime("now");
echo $data; // $data
Client side:
html code...
<script type="text/javascript" src=".../modjpicker2.js"></script>
</body>
</html>
modjpicker2.js:
$(function() {
$.ajax({
type: "GET",
url: "ajaxtime",
data: "{}",
success: function(response) {
var currentTime = new Date();
}
});
});
And var currentTime is just not being created... Some how request doesn't go through...
Forgot to note that jQuery is working fine all scripts are attached in header and php is working good as well, link ajaxtime is live also.
In your html
<script type="text/javascript" src=".../modjpicker2.js"></script>
It should be
<script type="text/javascript" src="../modjpicker2.js"></script>
I had kind of the same problem: My servers responses won't get handled by jQuery or JavaScript. It seems that nothing were transmitted.
I solved the issue by enabling HTTP access control on my server( More here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
Here's my solution:
jQuery client won't accept my server responses
Hope I can help! Let me know if it worked
Related
How to check data from mysql realtime using ajax post requests ?
I use this code for check in mysql , if user have a new message it's will be echo YOU HAVE NEW MESSAGE text on realtime.
and this code will post to get_data.php every 1 sec , i think it's very work hard for server and client ,
when i try it's not work, How can i do that ?
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<form id="idForm"/>
<input name="uid" value="1234"/>
</form>
<div id="result_data"></div>
<script type="text/javascript">
$(function(){
setInterval(function(){
$.ajax({
type: "POST",
url: get_data.php,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
$('#result_data').show();
}
});
},1000);
});
</script>
Your best practice would be to go with WebSockets.
The protocol overhead is much smaller than HTTP and you will play PING and PONG with the server to check for new data.
With websockets your client could send a message by emitting data your server would receive this and e.g. broadcast it out to other clients.
Try to get your head in Socket.io that is what I did to understand this ;)
Asumming your php file is correct, it might help if you wait for your document to be ready in your javascript
$(document).ready(function(){
//Your code
});
It's a minor thing but sometimes it break scripts
I have an php variable like this:
PHP Code:
$php_value = 'Am from PHP';
And I want to be able to change this variable with jQuery and the jQuery is on the same page?
You can't.
By the time the page has been delivered to the browser and the JavaScript has run, the PHP program that generated the page will have finished running and the variable will no longer exist.
JavaScript will allow you to send new data to the server (Ajax), where the server could store the data somewhere (a database is usual), and read the response.
JavaScript will also allow you to modify the page in in the browser (DOM) (including with the data included in the response for an Ajax request).
PHP code is run server-side, and jQuery runs on the client. The way to update a PHP variable from jQuery is to have a jQuery call which submits to the PHP page, and have the PHP look for it:
$php_value = 'Am from PHP';
if exists($_POST['php_value_from_jquery']) {
$php_value = $_POST['php_value_from_jquery'];
}
If I understand your question correctly, AJAX cannot post data to PHP code on the same page. I've been told that it can, but it is not trivial - still, I cannot imagine how that is possible. At any rate, AJAX is easy if a secondary PHP file is used.
Here is an example of what I mean. If you try this:
<?php
echo 'Hello';
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: 'POST',
url: '',
success: function(data) {
alert(data);
}
});
}); //END $(document).ready()
</script>
</head>
<body>
</body>
</html>
The popup will contain the HTML for the page.
However, if you use two files:
file1.php
<?php
echo 'Hello';
?>
file2.php
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: 'POST',
url: 'file1.php',
success: function(data) {
alert(data);
}
});
}); //END $(document).ready()
</script>
</head>
<body></body>
</html>
The popup will contain only the word "Hello".
To use ajax, you must call an external PHP file.
After considering the above, note that Quentin's answer is important -- even if you use AJAX to set a PHP variable on the server, that variable disappears after the AJAX completes -- just like the PHP variables all disappear after your index.php has finished rendering the DOM and presenting it to the visitor's browser.
So, what's to be done? Two options.
(1) As Quentin points out, you can store values permanently in a database, or
(2) You can use a PHP superglobal, such as a $_SESSION variable. For example:
Client side: file2.php
var storeme = "Hello there";
$.ajax({
type: 'POST',
url: 'file1.php',
data: 'stored_on_server=' +storeme,
success: function(data) {
alert(data);
}
});
file1.php
<?php
session_start();
$SESSION['a_variable_name'] = $_POST['stored_on_server'];
You can later retrieve that variable value thus:
$.ajax({
type: 'POST',
url: 'file3.php',
success: function(data) {
alert(data); //a popup will display Hello There
}
});
file3.php
<?php
session_start();
echo $SESSION['a_variable_name'];
You can't able to change the php value using javascript. i.e Server scripts runs first after that client side script will take effect in that case you cant able to modify the same, since they already rendered in browsers
If jQuery is going to be processing the data, then you can assign the PHP variable to a jQuery variable like this:
<script>
var jquery_value = <?php echo $php_value; ?>
</script>
As far as I know, because jQuery is client-side and php is server side, it's not possible to assign a jQuery variable back to PHP.
I have some script that works on my dev server but not on my staging server:
add_action('wp_head','get_gz_info',30);
function get_gz_info(){
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
var modal = {action:'modal_action'};
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
$.post(ajaxurl,modal,function(data){
$('body').append(data);
});
});
</script>
<?php
}
the php is roughly:
add_action('wp_ajax_modal_action', 'set_modal');
add_action('wp_ajax_nopriv_modal_action', 'set_modal');
function set_modal() {
...
}
Everything works fine on my dev side but the staging side the javascript is placed in the header (just like the dev) but it won't run the "ajax part". Could it be that the staging side requires a username/password to access it?
I've attempted it with and without the https and get the same results.
According to the inspect this is being set as the ajaxurl, "...mysite.../wp-admin/admin-ajax.php" so the ajaxurl is being implemented. The odd issue is it works as is on one server but not the next.
----- EDIT -----
The html shows this as the js in the head (after jquery loads)
<script type="text/javascript" >
jQuery(document).ready(function($) {
var modal = {action:'modal_action'};
var ajaxurl = '...mysite.../wp-admin/admin-ajax.php';
$.post(ajaxurl,modal,function(data){
$('body').append(data);
});
});
</script>
The person who setup the staging server placed and .htaccess in the admin side that prevented the site from accessing files in the wp-admin area.
I am current have the following script. I want pass a value from javascript to php by using AJAX. What's wrong with my code?
<script type=" text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.post("index.php",{host:document.referrer},function(data){});
});
</script>
<?php
$dataString=$_POST['host'];
echo $dataString;
?>
Since the PHP is executed first, you will never see the echo $dataString from your AJAX request. This code will post your request to the server, but you'll never see the result.
Right now here is what is happening:
Your web server renders out your page.
Your browser posts a request to index.php, and ignores the result
From the docs you can see this:
$.post('index.php', function(data) {
$('.result').html(data);
});
The data in that function will return what echo $dataString; outputs from your script.
Also, your post isn't configured correctly. You need to put data: before {host:document.referrer}
I got the following code in PHP:
<?php
$json = file_get_contents('https://graph.facebook.com/192655950766049');
$data = json_decode($json, true);
echo $data['description'];
?>
and I want the equivalent code in JQuery.
I tried to do it myself but I had no luck.
Here's one of my many tries:
<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$.getJSON("https://graph.facebook.com/192655950766049", function(json) {
alert("JSON Data: " + json.description);
});
</script>
I read the explanation from http://api.jquery.com/jQuery.getJSON/, but yet I dont really understand it..
anyway, if you can help me it'll be very nice!
Thanks
You're violating the Same origin policy by requesting a different domain with Javascript. You'll need to do this server side (i.e. with PHP in your case).
You need to use jquery's jsonp request. See this short discussion on how to interface with facebook using this. JSONP allows for XSS ignoring the same origin policy.
Basically your code would then look similar to this:
<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$.getJSON("https://graph.facebook.com/192655950766049?callback=?", function(json) {
alert("JSON Data: " + json.description);
});
</script>
You won't be able to directly download data from facebook on the client side due to cross site scripting limitations.
$(document).ready(function(){
var url = "https://graph.facebook.com/192655950766049?limit=3&callback=?";
$.getJSON(url,function(json){
var html = "<ul>";
$.each(json.data,function(i,fb){
html += "<li>" + fb.message + "</li>";
});
html += "</ul>";
$('.facebookfeed').html(html);
});
});
You can also check this url.
http://www.prettyklicks.com/blog/making-a-facebook-feed-using-the-graph-api-json-and-jquery/291/
Also check this link using the same method as i have specified.
using $.getJSON within a loop
In the event anyone is interested in using jquery locally IE: WAMP, here is a tested example.. The z.txt file it is reading has a simple single number in it..
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("z.txt", function(json) {
alert(json);
});
});
</script>