CODEWITHSUNDEEP
phpjqueryajax
Kei
Kei

Reputation: 59

SQL query without refresh

I've read all the related posted, watched videos, and read tutorials... But I still can't figure this out. I just want to run a mysqli_query insert without a refresh.

No inputs, no variables, just a pre-defined sql insert without a refresh.

Here is the main doc: 

<html>
    <head>
        <script src="inc/scripts/jquery-1.11.3.min.js"></script>
        <script>


                $("#click").click( function()
            {
                $.ajax({
                url: "click.php",
                type: 'POST',
                success: function(result) { 
                //finished
            }
            });
            });

        </script>
    </head>
    <body>
        <input type="button" id="click" value="Click">
    </body>
</html>

Click.php (Has been tested standalone): 

<?php 
$db = mysqli_connect("localhost","root","","mytable") 
or die("Error " . mysqli_error($db));

mysqli_query($db,"INSERT INTO items VALUES 
('','test','test','total test','test','test','test','test')");
?>

This has been driving me crazy... I've read tutorials and watched many videos about ajax... but I can't figure this out. Thank you for any advice.

Upvotes: 0

Views: 2992

Answers (4)

leo
leo

Reputation: 366

To refresh a part of a page you got to bind the success function to a div in the html so add a div with an Id 

<div id="myDiv"></div>

And then 

$('#like$id').click(function()
    {
    $.ajax({
    url: 'inc/scripts/liker_ajax.php?like=$id',
    type: 'GET',  
    success:function(result){   
       $('#like$id').addClass('green');  
       $('#dislike$id').removeClass('red');    
       $('#myDiv').html(result); 
    } 
    });
    });

Upvotes: 1

Michael Tallino
Michael Tallino

Reputation: 821

You're binding the event $('#click').click() before there is an element to bind to (since $('#click') isn't loaded yet).

Just move your <script> tag with the click binding event into the <body> underneath the input button and it will work as expected.

You might also want to wrap in a jQuery document ready enclosure like:

$(function() {

});

to make sure it runs when DOM ready.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

You are binding the event to the element when the element is not exixting yet. You have 2 options here.

  • Either move your script block to just below the end of body tag after the element.
  • Encase your code inside the script block under $(document).ready(function() { // your code here });

Also use the console tab under your developer tools to find the root cause if any errors are present.

Upvotes: 0

leo
leo

Reputation: 366

Try this. 

<html>
    <head>
        <script src="inc/scripts/jquery-1.11.3.min.js"></script>
        <script>


                function runAjax()
            {
                $.ajax({
                url: "click.php",
                type: 'POST',
                success: function(result) { 
                //finished
            }
            });


        </script>
    </head>
    <body>
        <input type="button" id="click" onclick="runAjax()" value="Click">
    </body>
</html>

Upvotes: 0

Related Questions