jquery.post doesn't work

Question

HTML element:

<img align="center" onclick="doc()" src="images/doc.png">

JavaScript function:

function doc (){
    $.post("php/file.php", { name: "John", time: "2pm" },).done( function(data) {
        alert("Data Loaded: " + data);
    });
}

file.php:

$pi=$_POST['name'];
echo ($pi);

I don't know why, but $.post doesn't send data when I click on the image it doesn't do anything

$.post("php/file.php", { name: "John", time: "2pm" }`,`) <-- what's up with that comma? — crush, Feb 20 '13 at 14:05
You have **preview** when writing, please pay attention before posting next time to avoid all those edits. — Shadow The GPT Wizard, Feb 20 '13 at 14:06
@crush indeed, the function will get a NULL parameter, and doesn't expect it. So it will probably crash and due to JavaScript's quietness won't see it unless you check the debug tools. It's encouraged to use "use strict"; on all of your projects with JavaScript in it, for debug purposes. — , Feb 20 '13 at 14:07
Is it getting to the server? Have you used your browser's debugger to see what is being sent in the XMLHttpRequest? — epascarello, Feb 20 '13 at 14:07
Maybe `doc()` is declared in local scope. Please post more code. — Shadow The GPT Wizard, Feb 20 '13 at 14:08
@ShadowWizard I guess he might as well just use jQuery's click()-binding, right? :) — , Feb 20 '13 at 14:09
Does your script come after the `` element in your page, or did you put the script in the header? — crush, Feb 20 '13 at 14:09
@Allendar true, as it's not trivial I posted a separate answer here. — Shadow The GPT Wizard, Feb 20 '13 at 14:12
Also worth to mention that `.done()` was added only in jQuery 1.5 so if you're using an older version this code isn't going to work. — Shadow The GPT Wizard, Feb 20 '13 at 14:14
Hei shadow sorry the code you posted below, where do i have to write it? — user2090823, Feb 20 '13 at 14:17
yeah it's in localhost but i had to edit because you can't post a link with localhost. I have a file named main.js where i write all my js functions...the jquery code that Shadow posted below i must attach it in that file or in a html tag script? — user2090823, Feb 20 '13 at 14:28

score 0 · Answer 1 · answered Feb 20 '13 at 14:05

0

 function doc (){
  $.post("php/file.php", { name: "John", time: "2pm" })
   .done( function(data) {
    alert("Data Loaded: " + data);
    }); 
  }

answered Feb 20 '13 at 14:05

EnterJQ

1,014
8
18

4

It looks like you corrected the extraneous comma, but you should be a lot more clear in explaining your answer, especially for such a tiny change. – jonvuri Feb 20 '13 at 14:07
Try to use Firebug or Webkit dev-toolbar (Chrome/Safari) to see if JavaScript errors are given by the interpreter. You can also see in there if XHR calls are done and what the traffic in it is. – Feb 20 '13 at 14:32
The code doesn't work on firefox because i use phonegap and i run the app with ripple – user2090823 Feb 20 '13 at 14:39

score 0 · Answer 2 · answered Feb 20 '13 at 14:11

0

Having both inline JavaScript and jQuery is not a good practice; use jQuery to bind the click event.

For this first add identifier to the image:

<img id="imgDoc" align="center" src="images/doc.png">

Then in the code:

$(document).ready(function() {
    $("#imgDoc").bind("click", function() {
        $.post("php/file.php", { name: "John", time: "2pm" }).done( function(data) {
            alert("Data Loaded: " + data);
        });
    }
});

answered Feb 20 '13 at 14:11

Shadow The GPT Wizard

66,030
26
140
208

I don't see how that would solve his issue. Although, it might be better practice to do it this way, it certainly isn't erroneous to do it the way he has shown in his script above. – crush Feb 20 '13 at 14:27
@crush the `doc()` function might be declared as part of other function, thus not global. OP didn't post full code so we can't know. – Shadow The GPT Wizard Feb 20 '13 at 14:28
i create a new file post.js where i wrote the code you write above but it doesn't work – user2090823 Feb 20 '13 at 14:37
@user2090823 Just having it in a file won't do anything. You also have to include jQuery and include that "post.js" file in your main file. Until you grasp the basics it's really better if you put all JS code in the main file. – Shadow The GPT Wizard Feb 20 '13 at 14:40
i have already done – user2090823 Feb 20 '13 at 14:41
So good chance it can't find the "php" subfolder since it's looking in the "js" subfolder. Try `$.post("/php/file.php", ...` assuming it's under the root. – Shadow The GPT Wizard Feb 20 '13 at 14:49
External scripts don't use their directory as the cwd as far as I know, but use the page they are included on as the cwd. I know the opposite is true with CSS, though. – crush Feb 20 '13 at 14:50
@crush is this behavior uniform in all browsers? Never delved into it, as I was using the root. – Shadow The GPT Wizard Feb 20 '13 at 14:51
i wrote the entire path $.post("http://localhost/php/file.php",... but doesn't work – user2090823 Feb 20 '13 at 14:54
@ShadowWizard That's a good question to which I don't know the answer. Unfortunately, I'm not sure we are going to be able to figure out this guys error without a low more information/access to his site. Something weird is going on, and I suspect it boils down to something basic. – crush Feb 20 '13 at 14:55
@user2090823 looks like debug is ahead of us then. Add `alert('click');` right after the line `$("#imgDoc").bind("click", function() {`. Do you see alert when clicking the image? – Shadow The GPT Wizard Feb 20 '13 at 15:10
no i don't see the alert: $(document).ready(function() { $("#imgDoc").bind("click", function() { alert('click'); } }); – user2090823 Feb 20 '13 at 15:15
@user2090823 OK let's take a step back. In the "post.js" file you have put `alert("hello");` as the very first line. Do you see the alert when loading the page? – Shadow The GPT Wizard Feb 20 '13 at 15:16
when the html page that recall post.js load i don't see any alert – user2090823 Feb 20 '13 at 15:20
@user2090823 Sorry man, looks like your problem is much more basic than just "post doesn't work". When you can get JS to show "hello" please repeat everything explained above and if still stuck feel free to let me know. – Shadow The GPT Wizard Feb 20 '13 at 15:23
when i use firebug, it give me these error in the jquery file: xhr.send( ( s.hasContent && s.data ) || null ); that is the 8526 row of the latest version of the uncompressed file – user2090823 Feb 20 '13 at 16:24
@user2090823 what is the exact error message you see in Firebug? – Shadow The GPT Wizard Feb 20 '13 at 20:45
Shadow thanks for your help. The error come out when i click the image, with a red colour: POST http://localhost/php/file.php 200 OK 78 ms. Then it refers to the 8526 row of jquery. I use xampp maybe this could be a problem? – user2090823 Feb 21 '13 at 09:58
This doesn't look like an error. Sorry, can't see what might be wrong. – Shadow The GPT Wizard Feb 21 '13 at 10:03
this is what chrome debugger says:XMLHttpRequest cannot load http://localhost/php/file.php. Origin http://127.0.0.1:8020 is not allowed by Access-Control-Allow-Origin. – user2090823 Feb 21 '13 at 10:19
Hei I solved the problem adding on the php file: header('Access-Control-Allow-Origin: *'); thank you for your patience. – user2090823 Feb 21 '13 at 10:30
@user2090823 So it was PHP issue after all? Weird. Glad you got it working! – Shadow The GPT Wizard Feb 21 '13 at 10:35
Yeah!! It now works if i run it on a browser. But something's wrong with phonegap. This is the callback function:success:function(json){alert('Success');},error:function(){alert("Error");}, in the browser i can see the alert with success instead in the emulator appears the error alert. I don't know why – user2090823 Feb 21 '13 at 15:57
@user2090823 read [here](http://api.jquery.com/jQuery.post/) it explains how to handle errors. – Shadow The GPT Wizard Feb 21 '13 at 16:01

Amir · Answer 3 · 2013-02-21T11:48:39.647

0

Jquery library you mentioned used at one of your comments is:

<script src="code.jquery.com/jquery-1.8.3.min.js"></script>

It is not a correct source. please use below source:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

edited Feb 21 '13 at 11:48

answered Feb 21 '13 at 11:43

Amir

4,089
4
16
28

that's not the problem the link works fine. In fact, trying to run the code in web, after have added the string that allow cross domain in the php file i have no problem and the alert appears. But tryng to make the same thing on the emulator the alert doesn't appear. – user2090823 Feb 21 '13 at 15:53

jquery.post doesn't work

3 Answers3