CODEWITHSUNDEEP
javascriptjqueryhtml
Luigi Cerone
Luigi Cerone

Reputation: 372

Display select query results by using jQuery

I'm pretty new to jQuery and I'm practicing with it. I've this html simple page:

<html>
<head>
    <title> Testing jQuery
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
    <link href="mycss.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h2 id="myH"> This is a title.</h2>
    <br>
    <br>

    <fieldset>
        <legend>Data</legend>
        <form name="myForm">
            <input type="text" id="firstData" placeholder="Write something in here" \>
            <br>
            <br>
            <input type="text" id="secondData" placeholder="Write something else in here" \>
            <br>
        </form>
        <button id="formButton" value="Confirm">Confirm</button>
    </fieldset>
<br><br><br>
    <div id="myDiv"></div>
</body>

</html>

This PHP script:

<?php

/* Connection to DB*/
.... CONNECTIONS STUFF.........

$query = " SELECT * FROM table1;";
$results = mysql_query($query);
echo " <table border=\"2\"><tr> <th>ID</th><th>First</th><th>Second</th></tr>";
 while($row = mysql_fetch_array($results)) {
     ?>
    <tr>
        <td>
            <?php echo $row['ID']?>
        </td>
        <td>
            <?php echo $row[ 'First']?>
        </td>
        <td>
            <?php echo $row[ 'Second']?>
        </td>
    </tr>
    <?php
    } echo "</table>"; ?>

And finally this js code:

$(function () {
       $('#formButton').on('click', function (e) {
            var firstData = $('#firstData').val();
            var secondData = $('#secondData').val();
            var query = 'first=' + firstData + '&second=' + secondData;
// Here I use another php script.
            $.get('myData.php', query, function (data) {
                $('#myDiv').html(data);
            });
        });
        $('#formButton').on('click', function (e) {
            $.ajax({
                url: "myquery.php",
                type: "POST",
                success: function (data) {
                    $("#myDiv").empty().html(data);
                }
            });
        });
    });

Ok , now that I've inserted all the code , the problem is that I can add elements to my database by using myData.php script but I'd like to create a page where in the top you can add elements and when you click on the confirmation button in the bottom (with a query) all the contents of the table are displayed. So I can add elements but I'm not able to display them. I'm new to jQuery and I'm trying to make it work , I've made different researches on the Web but I couldn't find anything that solved my problem. Could please someone help me? Thanks!

Upvotes: 2

Views: 3478

Answers (2)

Mayank Rajput
Mayank Rajput

Reputation: 161

you can use jquery load function for it, its very easy for you http://www.w3schools.com/jquery/jquery_ajax_load.asp

just load a div from there to a div in current page

follow this url for the video tutorial, its very simple, use a div here then enter the id and in the page you are loading, please use another id and load that id into this page div

https://www.youtube.com/watch?v=mtz8MdQXhno

it works in wordpress and will simply work in php same code

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5246

You can do both operation by single file myData.php

Put below code right after record inserted in myData.php

$query = " SELECT * FROM table1;";
$results = mysql_query($query);
echo " <table border=\"2\"><tr> <th>ID</th><th>First</th><th>Second</th></tr>";
 while($row = mysql_fetch_array($results)) {
     ?>
    <tr>
        <td>
            <?php echo $row['ID']?>
        </td>
        <td>
            <?php echo $row[ 'First']?>
        </td>
        <td>
            <?php echo $row[ 'Second']?>
        </td>
    </tr>
    <?php
    } echo "</table>"; ?>

No need of two ajax call. Remove the second button click jquery code. On first button click event myData.php file will be called. First record will be inserted in your DB table with your existing code. After it place your code to fetch records from DB. your HTML will be sent in the response and place that HTML in the DIV with your existing jquery code.

Upvotes: 2

Related Questions