Retrieving data with jQuery from .php file

Question

I'm playing with some scripts, here is what I have:

<!doctype html>
<html>
<head>
    <title>Home page</title>
    <link rel="shortcut icon" href="/images/favicon.ico" />
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
            <link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
            <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />
            <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
            <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
            <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>


    <script type="text/javascript">
        function get() {
            $.post('data.php',
                function(output) {
                    $('#container').html(output).show();
            });
    </script>
</head>
<body>

    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Статии</a></li>
        <li><a href="#tabs-2">Коментари</a></li>
        <li><a href="#tabs-3">Европа</a></li>
        <li><a href="#tabs-4">Свят</a></li>
    </ul>
    <div id="tabs-1">
        <a id="BB" onClick="get();">Тайният проект Бойко Борисов</a>

    </div>
    <div id="tabs-2">
        <p>Защо се изкупува земя от северозападна България</p>
    </div>
    <div id="tabs-3">
        <p>Бъдещето на Гърция</p>
    </div>
    <div id="tabs-4">
        <p>Мястото на САЩ е политиката на ЕС</p>
    </div>
</div>
<div id="container">

</div>
</body>
</html>

Later on I want to use the data.php file to connect to the database and extract data from there, but for now I just want to make it work for any data stored in data.php.

I use this script, where I think is the main problem:

<script type="text/javascript">             
    function get() {
        $.post('data.php',              
        function(output) {                          
            $('#container').html(output).show();                    
    });        
</script>

and I want to place the data in <div id="container></div>

The final idea is to load the links from the menu in the container div, which I try to do like this:

<div id="tabs-1">
    <a id="BB" onClick="get();">Тайният проект Бойко Борисов</a>

In data.php I have just an echo "Hello world"; but nothing shows up when I click the link. I guess there is more than 1 problem but any help is appreciated.

Thanks, Leron.

In FireFox with firebug in the console tab you can monitor your ajax requests. So you can further investigate where the problem is, like: Is the php file found, what does this php file return, what parameters am I sending. The code seems to be correct. — Rick Hoving
– Rick Hoving, Commented Feb 27, 2012 at 10:30
This is my first day of using JQuery and I'm pretty sure the mistake is somewhere in there, but I'm not sure is it the syntax, the logic, or both.I've already done it with pure AJAX and it works, but I want to do it with JQuery too. — Leron
– Leron, Commented Feb 27, 2012 at 10:33
I get those 2 errors :GET localhost/css/base.css 404 (Not Found) getdata.php:22Uncaught SyntaxError: Unexpected end of input — Leron
– Leron, Commented Feb 27, 2012 at 10:38

littlealien · Accepted Answer · 2012-02-27 10:47:22Z

2

you should close get() function scope.

  function get() {
            $.post('data.php',
                function(output) {
                    $('#container').html(output).show();
            });
  }

you have just forgotten curly bracket.

$.post("test.php", { name: "John", time: "2pm" }, function (data) {} );

you can send post data like this.

You wanna select tag or wannaa send some data?

$('#BB').click(function() { get(); });

you can bind function to like the code above.

Is this you want?

edited Feb 27, 2012 at 10:47

answered Feb 27, 2012 at 10:35

littlealien

4294 silver badges12 bronze badges

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

3 Comments

Leron Over a year ago

You are perfectly right. Thanks, now I get what I should. I'll accept your question when the system allows me. But for the second part - I saw that I should put some code next to $.post('data.php', using curly braces {}, so I can pick the <a> tag with the elemnt I'm clicking, coukld you help how to select the <a> with ID="BB" from the code above?

littlealien Over a year ago

I've added something to post. check it out. is that you want?

Leron Over a year ago

That's what I needed - $('#BB').click(function() { get(); }); Thanks for the help!

Collectives™ on Stack Overflow

Retrieving data with jQuery from .php file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related