Dynamically load data on div scroll using php, mysql, jquery and ajax

If you have lots of data and displaying the whole data in one time is very costly. There comes to approach one is lazy loading and another is pagination.

Here we are going to discuss the lazy loading in PHP, MySQL and Ajax. In lazy loading user can keep scrolling and keep getting the data until the whole data completes. Just like we quora and facebook do, User keep scrolling and post keep coming.

Mysql QueryClick here to download demo code

db.php

index.php

posts.php

 

Share This:


Dependent dropdown example in PHP, MySQL

dependent_dropdownIf you wanted to change the another select box value on the change of the first select box, Here is the answer of your question.

I'm writing an article on dependent select box in PHP, MySQL and Ajax. If you change the first drop down value then second drop down options will get change according to first drop down.

Here I'm explaining an example of dependent select box like if you change the country name 'India' then in second select box India's States will be populated and so on.



 ...  Read More

Share This:


Autocomplete in php ajax

autosuggest.html

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script> <script> $(function(){ $("#search_emp").keyup(function() { var search_keyword_value = $(this).val(); var dataString = 'search_keyword='+ search_keyword_value; if(search_keyword_value!='') { $.ajax({ type: "POST", url: "search_emp.php", data: dataString, cache: false, success: function(html) { $("#result_emp").html(html).show(); } }); } return false; });

$("#result_emp").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.country_name').html();
var decoded = $("<div/>").html($name).text();
$('#search_keyword_id').val(decoded);
});

$(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_keyword")){
$("#result_emp").fadeOut();
}
});

$('#search_keyword_id').click(function(){
$("#result_emp").fadeIn();
});
});

function set_emp(emp_name,emp_id) {
// change input value
$('#search_emp').val(emp_name);
$('#emp_id_search').val(emp_id);
// hide proposition list
$('#result_emp').hide();
}
</script>
<style>
#result_emp
{
position:relative;
width:320px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CDCDCD solid;
background-color: white;
}
.show
{
font-family:tahoma;
padding:10px;
border-bottom:1px #CDCDCD dashed;
font-size:15px;
}
.show:hover
{
background:#364956;
color:#FFF;
cursor:pointer;
}
</style>
<div class="form-group">
<label class="col-sm-2 control-label">Employee</label>
<div class="col-sm-10">
<input class="form-control" id="search_emp" name="emp" type="text" placeholder="" value="" autocomplete="off">
<input type="hidden" name="emp_id_search" id="emp_id_search" value="">
<div id="result_emp"></div>
</div>
</div>  ...  Read More

Share This:


Ajax Request

ajax.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var nat_resume_serives = {nat_price: 2000,nat_cover_letter: 200, nat_faster_del: 50, nat_addon_0: 12};
$.ajax({
type: 'POST',
url: 'result.php',
data: nat_resume_serives,
dataType: 'json',
success: function(result){
console.log(result);
},
error: function(error)
{
alert('Oops! Something went wrong!!!');
console.log(error);
}

});
</script>

result.php

<?php
/// php operation
echo $_POST['nat_price'];
?> ...  Read More

Share This: