Sunday, 29 November 2015

Jquery grab tutorial

 Jquery Grab tutorial
This tutorials is focused on jquery, php, mysql, using a single text input to grab user information from database without page reload or refresh, if you’re using a large database you do need this kind of program on your backend application for easy and friendly application.


We have three folders
1.     Ajax
2.     Js
3.     Db
And index.php file on the main page

--
-- Table structure for table `grab`
Contains  details name, country, date.
--

CREATE TABLE IF NOT EXISTS `grab` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `country` varchar(20) NOT NULL,
  `date` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

----------------------------------------------------------------
Index.php


----------------------------------------------------------------
this contains the form for grab input
----------------------------------------------------------------
ajax.php
----------------------------------------------------------------

include '../db/connect.php'; // database connection

$query = mysql_query("SELECT `grab`.`country`
FROM `grab`
WHERE `grab`.`name`='".mysql_real_escape_string(trim($_POST['name']))."'
");
// querying the database

echo (mysql_num_rows($query) !=0) ? mysql_result($query, 0,'country') : 'Name not found';
//returning the result of the country

?>
----------------------------------------------------------------
global.js
----------------------------------------------------------------
$("input#name-submit").on('click',function(){})name-submit is the ID name of INPUT SUBMIT  tag and var name $('input#iname').val(); - name is the ID name of INPUT. While click on submit button without refreshing page using onclick() method.
-----------------------------------------------------------------------------------------------------------
$('input#name-submit').on('click', function(){
//$('input#name-submit').hide();
//to use grab button use this $('input#name-submit').on('click', function(){ and comment out $('input#name-submit').hide();
$('#loader').text('loading ...')
var name = $('input#name').val();
if ($.trim(name) != '') {

$.post('ajax/ajax.php', {name: name}, function(data){
//name: name first is the location, second is the variable passed
$('div#name-data').text(data); // preview div
});
$('#loader').hide();
};
});

----------------------------------------------------------------
connect.php
----------------------------------------------------------------
mysql_connect("localhost", "root", "");
mysql_select_db("labs");




No comments:

Post a Comment

Hit me with a comment!