Category: JQUERY

Traversing in Jquery

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("li").eq(4).addClass("selected"); }); </script><style> .selected { color:blue; } </style>

<ul>
<li>PHP</li>
<li>AJAX</li>
<li>JQUERY</li>
<li>MYSQL</li>
<li>ZEND</li>
</ul>

Share This:


Post data to server using Jquery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("api.php", { name: "Saurabh", city: "Gurgaon" }, function(data,status){ console.log(status); console.log(data); }); }); }); </script> </head> <body><button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

Share This:


Calling API in Jquery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.get("api.php", function(data, status){ console.log(status); console.log(data); }); }); }); </script> </head> <body><button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

Share This:


Remove div in Jquery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div_remove").remove(); }); }); </script> </head> <body><div id="div_remove">

This is some text in the div.
<p>Coding 4 Developers</p>
<p>Running Code Website</p>

</div>
<br>

<button>Remove div element</button>

</body>
</html>

Share This:


Remove attribute in Jquery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").removeAttr("style"); }); }); </script> </head> <body><h1>This is a heading</h1>

<p style="font-size:120%;color:red">Coding 4 Developers</p>
<p style="font-weight:bold;color:blue">Running code website</p>

<button>Remove the style attribute from all p elements</button>

</body>
</html>

Share This:


Check/Uncheck checkbox group

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script> <input type="button" class="check" value="check all" /> </br> <input type="checkbox" class="cb-element" /> Checkbox 1</br> <input type="checkbox" class="cb-element" /> Checkbox 2</br> <input type="checkbox" class="cb-element" /> Checkbox 3</br> <script> $(document).ready(function(){ $('.check:button').toggle(function(){ $('input:checkbox').attr('checked','checked'); $(this).val('uncheck all') },function(){ $('input:checkbox').removeAttr('checked'); $(this).val('check all'); }) }) </script>

Share This:


Change text box value while changing dropdown box

<?php $con = mysqli_connect("localhost","root","","db_name"); $select_material_code = "SELECT emp_id, emp_name FROM employees"; $get_material_code = mysqli_query ($con, $select_material_code); $options_material_Code = "<option>--Select Product--</option>"; $option_material_description = ""; while ($result_material_code = mysqli_fetch_array($get_material_code)) { $options_material_Code.= "<option value=".$result_material_code[1].">$result_material_code[1]</option>"; } ?> <script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script> <select name="materialcode_1" id="materialcode_1"> <?php echo $options_material_Code; ?> </select> <input type="text" name="description_1" placeholder="Description" maxlength="40" size="40" value="" id="description_1"> <script> $("#materialcode_1").change(function(e) { $("#description_1").val($("#materialcode_1").val()) }); </script>

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:


Itrate objects in jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var rows = '<table border="1"><tr><th> Key</th><th> Value</th></tr>';
var obj = {
"name": "saurabh",
"age": "25",
"project": "coding 4 developers"
};
$.each( obj, function( key, value ) {
rows = rows + '<tr><td> '+key+'</td><td> '+value+'</td></tr>';
});
rows = rows + '</table>';
$('#table').html(rows);
});
</script> ...  Read More

Share This:


Itrate array in jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var arr = [2,3,4,5,6,7,8,9];
var elements = '';
arr.forEach(function(item){
elements = elements +" "+ item;
});
$('#arr').text(elements);
});
</script>
<div id="arr"></div>

Share This: