AJAX get data from sql by php and then display data value onto html element

Question

HTML

<input id="box1" type="submit">

$('#box1').click( function() {
 $.ajax({
    url:"insert.php",
    type:"POST",
});
});

PHP insert.php

$link = mysqli_connect("localhost", "root", "", "votingcount");

// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}

// attempt update query execution
$sql = "UPDATE vote_result SET vote_count = vote_count + 1 WHERE   photo_no=1";
if(mysqli_query($link, $sql)){
echo "Records added successfully.";
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}

When the submit button (#box1) is clicked, the UPDATE statement would increase the vote count in SQL by 1. After running the insert.php, at the same time a overlay would appear to show the CURRENT vote count from the SQL, I would want the overlay box content to display the int vote count with the following sql statement : $sql = "SELECT vote_count FROM vote_result WHERE photo_no=1";

How would I allow the .click function for #box1 be able to run another php where I could retrieve the value and update the #clicked value in the following overlay?

<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <img src="tyedit.jpg" height="1024" width="724" />
            <div id="imagine">
                <span id="clicked">0</span><br/>
                <span id="word">VOTES</span>
            </div>
    </div>

    </div>

1. In the same insert.php file, after the update - select the required value and instead of "Records aded succ.." echo that value. 2. add a "success" event to your ajax code that takes the returned value and append it to wherever you want. — Ofir Baruch
– Ofir Baruch, Commented Feb 7, 2017 at 14:27
@OfirBaruch $sql = "SELECT vote_count FROM vote_result WHERE photo_no=1" Do you mean to insert that right after the update? My html is a separate file from the insert.php, how would I be able to append the value? — Kayden
– Kayden, Commented Feb 7, 2017 at 14:31

sujan basnet · Accepted Answer · 2017-02-07 14:33:16Z

1

Why don't you run your select query after the insert query in insert.php itself. After successful update query, just run another query to select the vote count from your table.

$sql = "SELECT vote_count FROM vote_result WHERE photo_no=1";

if($result = mysqli_query($link, $sql)){
    echo mysqli_fetch_assoc($result)['vote_count'];
}

The echoed statements are you ajax response, so use callback function on success to update your overlay.

on your ajax call

$.ajax({
   url:"insert.php",
   type:"POST",
   success:function(response){
       $("#clicked").html(response);
   }
});

also if you wish to have multiple echoes on your insert.php file you could get a json response using json_encode() to all your echoes.

answered Feb 7, 2017 at 14:33

sujan basnet

3003 silver badges12 bronze badges

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

4 Comments

Kayden Over a year ago

Warning: mysqli_fetch_assoc() expects parameter 1 to be mysqli_result, boolean I had this error when displaying the response.

PacMan Over a year ago

@user2728875 have you tried my answer to solve it ??

sujan basnet Over a year ago

make sure your sql is a select query, insert, update or delete query returns boolean - true upon successful modification in database table, false otherwise .... however on select query it returns a mysqli_result as you are fetching data ... i can only imagine that you probably ran mysqli_fetch_assoc() on an update query ??

Kayden Over a year ago

Hey @sujanbasnet, I've managed to solve it. Thanks alot for your help!

bipin patel · Accepted Answer · 2017-02-07 17:01:04Z

0

first change type submit to button

<input id="box1" type="button" value="click">

than click event call ajax

<script>
$('#box1').click( function() {
    $.ajax({
       url:"insert.php",
       type:"POST",
       success: function(data) {
          $("#myModal").modal('show');
          $('#clicked').text(data);
       }
    });
});
</script>

Change php code like this

$sql = "UPDATE vote_result SET vote_count = vote_count + 1 WHERE   photo_no=1";
if(mysqli_query($link, $sql)){

   $sql1 = "SELECT vote_count FROM vote_result  WHERE photo_no=1";
    $result = mysqli_query($link, $sql1);
    $row = mysqli_fetch_assoc($result);
    echo $row["vote_count"];

} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($sql);
}

edited Feb 7, 2017 at 17:01

answered Feb 7, 2017 at 14:31

bipin patel

2,1111 gold badge15 silver badges22 bronze badges

1 Comment

Ofir Baruch Over a year ago

You don't need the while loop in this case.

Collectives™ on Stack Overflow

AJAX get data from sql by php and then display data value onto html element

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related