SQL query without refresh

Question

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.

Try changing type to method in the ajax request. Are you getting anything back from it? Go to debug mode in the browser to see if the ajax request gets an error. First we just need to make sure the ajax request is functioning as it should. — Evadecaptcha
– Evadecaptcha, Commented Jul 28, 2015 at 0:35
Echo something in the php script and console.log(data) in the ajax success function. Also add an error: function() { console.log() } method to the ajax request and console.log('anything') there to see if error is being fired. — Evadecaptcha
– Evadecaptcha, Commented Jul 28, 2015 at 0:37

leo · Accepted Answer · 2015-07-28 15:40:55Z

1

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); 
    } 
    });
    });

answered Jul 28, 2015 at 15:40

leo

3664 silver badges14 bronze badges

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

3 Comments

Kei Over a year ago

Thank you very much for this insight - it's clearly something I overlooked. I do have a question though... What I need updated(refreshed) is just a number (mysql row count echo) and when I put that number in a span/div and do ('#NumDiv').html(result); it just disappears until I refresh my page and I can see the proper result. Any ideas?

Kei Over a year ago

I suppose my real question is: If I have a php variable '$likes' - how can I refresh/update it immediately when my DB changes without hitting F5?

leo Over a year ago

Do a print_r($_GET) on your php and see what data you are getting there , it should refresh your div without hitting f5. Or use chrome console to see the how is the url beeing called to see what data you are actually sending. I think your $id variable is not gettiing a value.

Michael Tallino · Accepted Answer · 2015-07-28 01:01:39Z

0

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.

edited Jul 28, 2015 at 1:01

answered Jul 28, 2015 at 0:55

Michael Tallino

8214 silver badges16 bronze badges

4 Comments

Kei Over a year ago

Didn't change anything ;(

Michael Tallino Over a year ago

I ran the code on my local server. What is your expected result? You're sure the PHP code is working OK?

Kei Over a year ago

Yeah - when I run the contents of click.php by itself - I get an clean insert in my database. I just need an insert

Michael Tallino Over a year ago

Did you use the console to see what was returned by the ajax request? Did you get the file or a 404? Any errors returned from PHP?

leo · Accepted Answer · 2015-07-28 00:57:24Z

0

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>

answered Jul 28, 2015 at 0:57

leo

3664 silver badges14 bronze badges

1 Comment

Michael Tallino Over a year ago

missing a bracket there (close runAjax())

Sushanth -- · Accepted Answer · 2015-07-28 01:01:26Z

0

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.

answered Jul 28, 2015 at 1:01

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Kei Over a year ago

Uncaught SyntaxError: Unexpected token return

Collectives™ on Stack Overflow

SQL query without refresh

4 Answers 4

3 Comments

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related