{"id":2152,"date":"2015-04-15T07:32:26","date_gmt":"2015-04-15T05:32:26","guid":{"rendered":"http:\/\/www.extradrm.com\/?p=2152"},"modified":"2015-04-15T07:36:25","modified_gmt":"2015-04-15T05:36:25","slug":"simple-javascript-to-write-to-mysql","status":"publish","type":"post","link":"https:\/\/www.extradrm.com\/?p=2152","title":{"rendered":"Jquery \/ AJAX Database Sample Calls to mysql"},"content":{"rendered":"

This is more of personnal notes\/code braindump to remember how to do. I will expose you two methods for using javascript calls via DOM and Ajax\/Jquery to process mysql queries …<\/p>\n

Before starting, I like to recall how Jquery works<\/strong> :
\n\"jquery-how-it-works\"<\/a><\/p>\n

Create an example.php<\/strong> document prepare a bloc div like :
\n<div id=”avatarsavediv”><\/div><\/strong><\/p>\n

The XMLHttpRequest Object<\/h2>\n

All modern browsers support the XMLHttpRequest object (IE5 and IE6 use an ActiveXObject).<\/p>\n

The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.<\/p>\n

Example.php (JavaScript part)
\n<\/strong><\/p>\n

\n
<script type=\"text\/javascript\">\r\nfunction showUser(str)\r\n{\r\nif (str==\"\")\r\n  {\r\n  document.getElementById(\"avatarsavediv\").innerHTML=\"\";\r\n  return;\r\n  }\r\nif (window.XMLHttpRequest)\r\n  {\/\/ code for IE7+, Firefox, Chrome, Opera, Safari\r\n  xmlhttp=new XMLHttpRequest();\r\n  }\r\nelse\r\n  {\/\/ code for IE6, IE5\r\n  xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\");\r\n  }\r\nxmlhttp.onreadystatechange=function()\r\n  {\r\n  if (xmlhttp.readyState==4 && xmlhttp.status==200)\r\n    {\r\n    document.getElementById(\"avatarsavediv\").innerHTML=xmlhttp.responseText;\r\n    }\r\n  }\r\n\/\/ best to set a new variable name so I don't forget what I'm working on\r\nvar avatarid = str;\r\n\/\/ below we can grab a mysql value if we need to\r\nvar phpnickname = \"<?= $username ?>\";\r\nvar avurl = \"function.php?nickname=\"+phpnickname+\"&avatarid=\"+avatarid;\r\nxmlhttp.open(\"GET\",avurl,true);\r\nxmlhttp.send();\r\n}\r\n<\/script><\/pre>\n
See a complete Original source of code above :<\/strong>
\nhttp:\/\/www.w3schools.com\/php\/php_ajax_database.asp
\nhttp:\/\/www.w3schools.com\/ajax\/ajax_xmlhttprequest_send.asp \/ Async=true<\/strong><\/p>\n
\n
AJAX way doing<\/h2>\n
Another way will be to use the ajax build on jquery (more easy than dom language with all tests for browsers like above :<\/p>\n
In your example.php there is a like that (see screenshot joined) :
\n\"table-sample\"<\/a><\/p>\n
In this sample we click on a row table which will fire jquery event with a post ajax call with id value to process.php and print result in :<\/p>\n
<div id=”tags”><\/div><\/strong><\/p>\n
<\/head>\r\n <script src=\"js\/jquery-1.9.1.min.js\"><\/script>\r\n  <script>\r\n\t\t$(document).ready(function () {      \r\n     $('#resultTable tr').click(function (event) {\r\n          \/\/alert(this.id); \/\/trying to alert id of the clicked row      \r\n\r\n$.ajax({\r\n       url : 'process.php',\r\n       type : 'POST', \/\/ Le type de la requ\u00eate HTTP, ici devenu POST\r\n       data : 'visn=' + this.id, \/\/ we pass our variables, via POST, to our script process.php\r\n       dataType : 'html',\r\n       success : function(code_html, statut){\r\n           $('#tags').empty(); \/\/ we empty the tags div\r\n           $('#tags').append(code_html); \/\/ we pass code_html to jQuery() to fill the div again\r\n       },\r\n\r\n       error : function(resultat, statut, erreur){\r\n\r\n       },\r\n\r\n       complete : function(resultat, statut){\r\n\r\n       }\r\n\r\n    }); \/\/End ajax  Call\r\n\r\n    });<\/pre>\n
Note : jQuery: $(document).ready and $(window).load<\/p>\n
\r\n$(document).ready(function(){\r\n\/\/code\r\n});\r\n<\/code><\/pre>\n
Specify a function to execute when the DOM is fully loaded.<\/p>\n
\r\n$(window).load(function(){\r\n\/\/code\r\n});\r\n<\/code><\/pre>\n
Specify a function when the page is fully loaded including graphics.<\/p>\n","protected":false},"excerpt":{"rendered":"
This is more of personnal notes\/code braindump to remember how to do. I will expose you two methods for using javascript calls via DOM and Ajax\/Jquery to process mysql queries … Before starting, I...<\/p>\n","protected":false},"author":1,"featured_media":2845,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[318,271,296,35,26,314],"tags":[360],"youtube_video":null,"_links":{"self":[{"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/posts\/2152"}],"collection":[{"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2152"}],"version-history":[{"count":0,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/posts\/2152\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/media\/2845"}],"wp:attachment":[{"href":"https:\/\/www.extradrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}