Jquery post function not returning output?

Question

I am trying to learn a bit of AJAX but am struggling with getting the output from the php script.

Here is the code I am using at the moment:

<form>
        <input type="text" id="url" name="url" value="" onkeydown="if (event.keyCode == 13 || event.which == 13) {go($('#url').val());} "/><input type="submit" id="submit" name="submit" value="SHORTEN" onclick="go($('#url').val());"/>
        </form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        function go(url){
            $.post('url.php', {url: url}, 
            function(data){
                $("#result").html(data).stop();
            });
            alert(url);
        };
    </script>

currently the url.php script is just echoing out random text for testing purposes.

When I run the go() function with just the alert in it works, but something seems to be wrong with the $.post() function as it isn't getting the echoed string form url.php and no alert box opens when enter or the submit button is clicked.

Thanks

P.S

Heres an example of what im trying to do when you put something in the text field and submit the area underneath is not populated with the output form url.php - chrismepham.co.uk

edit - I am using google chrome

@user1141356 please don't change code in questions! If you have something to suggest as a fix, post it as new answer. — user447356
– user447356, Commented Oct 9, 2012 at 13:56

Explosion Pills · Accepted Answer · 2012-10-09 13:48:37Z

2

You have a JavaScript error (specifically url: url -- you probably mean {url: url} or 'url=url'). You should keep the console open so you can see errors as you are debugging.

Such errors also tend to halt execution of the script which would explain why you're not seeing the alert.

answered Oct 9, 2012 at 13:48

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

crmepham Over a year ago

hi, heres an example of what im trying to do when you put something in the text field and submit the area underneath is not populated with the output form url.php - chrismepham.co.uk

Explosion Pills Over a year ago

@crm I opened the console on the link you showed me and it is using url: url. Why did you choose to ignore my answer?

user447356 · Accepted Answer · 2012-10-09 13:52:40Z

1

If your only goal is populating an element with the result, use the .load() method:

$("#result").load("url.php", { "url": url } );

As written in the documentation:

The POST method is used if data is provided as an object;

So it will have exactly the same effect as using .post() in your original code.

answered Oct 9, 2012 at 13:52

user447356

6 Comments

Explosion Pills Over a year ago

Why should you use load as opposed to post in this instance?

user447356 Over a year ago

@ExplosionPills one line instead of at least three is enough reason for me. :)

Explosion Pills Over a year ago

You don't know that his only goal is populating an element with the result; if that's not the case using .load is potentially dangerous.

user447356 Over a year ago

That's why I started my answer with "if your only goal is populating an element with the result" - that's what the OP is doing in the original code. Why .load() is dangerous? Care to elaborate?

Explosion Pills Over a year ago

Well I tend do agree with you, I just like playing devil's advocate. .load is dangerous because the .post request is not explicit; if someone (some inexperienced developer perhaps) comes along and changes {url:url} to url=url things may break mysteriously. .load does not implement Deferred either, which limits its functionality with respect to other ajax; i.e. this is more difficult to maintain (though it does have its purpose).

|

Andrew Rhyne · Accepted Answer · 2012-10-09 13:59:28Z

0

I work quite a bit with jQuery and PHP with AJAX and Web2.0 applications. It sounds to me like you most likely have a syntax error within your PHP. If you have a syntax error, it will kill the server side script and you won't receive any reply. Try removing everything from your php script except for an echo statement like "hello world", then use firebug's console to view the reply from your POST. If you haven't already, I would recommend reading up on XML. Once you start using POST with AJAX, it becomes harder to switch to a standardizes form of data communications such as XML (which makes data parsing SO much easier once you get into OOP with PHP)

answered Oct 9, 2012 at 13:59

Andrew Rhyne

5,0705 gold badges31 silver badges42 bronze badges

2 Comments

Andrew Rhyne Over a year ago

Also, I would recommend using the .ajax function with jquery. It is a lot more robust. For you:

Andrew Rhyne Over a year ago

$.ajax({url:'url.php'}).done(function(data){ $("#result").html(data).stop(); }); alert(url);

Collectives™ on Stack Overflow

Jquery post function not returning output?

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related