在图像上单击更改mysql值

Question

I'am new in using Jquery/Ajax/JSon and i want to make a script that changes a value in mysql if a user clicks on one of the two icons.

I have searched for any idea's only i don't know exactly where to start. I use smarty with slim and i have already a setup a page with datatables this is working great.

I have made into a datatable row 2 icons and what i want if it is possible that if a user clicks on one of the two icons that without leaving the page a value is getting updated. I have now added aa href like index.php/upd/del/1 for marking as deleted and index.php/upd/save/1 for saving.

behind upd i have a function for reading save or del and the 1 is the idea.

Can someone give me a idea or some place where i can find something like this.

i hope that i can ask this here and thank you already for helping me with this

Answer 1

<a id="option1"><img src="image1.jpg" /></a>
<a id="option2"><img src="image2.jpg" /></a>

<script type="text/JavaScript">
$(function() {
    $("#option1").click(function() {
        $.post("index.php/upd/del/1", function(json) {
                if (json && json.status) {
                    alert("Change made!");
                } else {
                    alert("something failed!");
                }
            }
        );
    });
    $("#option2").click(function() {
        $.post("index.php/upd/save/1", function(json) {
                if (json && json.status) {
                    alert("Change made!");
                } else {
                    alert("something failed!");
                }
            }
        );
    });
});
</script>

Now, in your PHP Script:

<?php
// In order for jquery to change the data we are returning to json, we should se the headers to json. 
// Also, it is important to notice that all the ajax request will work allways with utf-8
// so if you don't want to have a lot of problems with accents and special chars, use allways utf-8
header("Content-Type:application/json; Charset=utf-8");

// Make some really cool stuff with the data at mysql
// But if something went wrong:
if ($varToSetIfErrorOcurrs === true) {
    return json_encode(array ("status" => false));
}

return json_encode(array ("status" => true));

Some last considerations:

• Allways use the html elements for what they were thinked: img to show images, not to click on them. a (anchors) to click on them. Or buttons to make some actions
• The JS is better to be on the bottom of your page, so all the DOM is already loaded when it is executed
• $(function() {}); executes that piece of code once the DOM is ready (only the html, document.onready is executed once everything is loaded, including images, so it is slower)

Happy coding!