Html Code:
<div class="csdisplayorder" >
<span class='csminus glyphicon glyphicon-minus'></span>
<input class="cscurrent" type="text" disabled value="1" data-rid="1" data-pid="2">
<span class='csplus glyphicon glyphicon-plus'></span>
</div>
Script:
<script type="text/javascript">
$(document).ready(function(){
$('.csdisplayorder .csplus').live('click', function(){
var dis = $(this);
var input_obj = dis.parent().find('.cscurrent');
var input_val = parseInt(input_obj.val());
if(input_val == undefined){
input_obj.val(0);
}else{
var new_val = parseInt(input_val)+1;
input_obj.val(new_val);
$(this).fncsUpdateRoomDisplayOrder(dis, new_val);
}
});
$('.csdisplayorder .csminus').live('click', function(){
var dis = $(this);
var input_obj = dis.parent().find('.cscurrent');
var input_val = parseInt(input_obj.val());
if(input_val == undefined){
input_obj.val(0);
}else{
if(parseInt(input_val) >0){
var new_val = parseInt(input_val)-1;
input_obj.val(new_val);
$(this).fncsUpdateRoomDisplayOrder(dis, new_val);
}
}
});
$.fn.fncsUpdateRoomDisplayOrder = function(dis,nval) {
var input_obj = dis.parent().find('.cscurrent');
var rid = input_obj.data('rid');
var pid = input_obj.data('pid');
var datastring = {'nval':nval,'rid':rid,'pid':pid}
var xhrequest = false;
xhrequest = $.ajax({
url: base_url+'update',
type:'post',
dataType: 'json',
data:datastring,
async:false,
beforeSend: function (){
if (xhrequest) {
xhrequest.ajaxStop();
console.log("xhrequest");
}
},
success: function(data){
xhrequest = false;
console.log(data);
}
});
}
});
</script>
CSS:
<style type="text/css">
.csdisplayorder{width: 62px;text-align: center;}
.csdisplayorder .cscurrent{width: 25px;float: none;background-color: white;border: none;text-align: center;}
.csdisplayorder .csplus,.csminus{padding: 3px;background-color: grey;color: white;border-radius: 10px;}
.csdisplayorder .csminus{float: left; }
.csdisplayorder .csplus{float: right;}
.csdisplayorder .cscurrent_txt{width:25px;float:none;vertical-align:-webkit-baseline-middle;vertical-align: sub;}
.csdisplayorder input[type=number].cscurrent::-webkit-inner-spin-button,
.csdisplayorder input[type=number].cscurrent::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0; }
</style>