Develop Reference

How to automatically add instead of showing with javascript ajax

How can I change this script which right now showing me the code or the name when is equal to the code or name I suggest in the input?
I need that instead of showing me the name the javascript added it automatically
Here are two images:
Here the code :
//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
type = $(this).data('type');
if(type =='cod' )autoTypeNo=0;
if(type =='nombreProd' )autoTypeNo=1;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'include/ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
beforeSend: function(){
$('#msgCod').html('<img src="images/ajax-loader.gif"/> verificando');
},
success: function( data ) {
if(data == '') {
$('#submit').attr("disabled", true);
$('#msgCod').html("<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>Este producto no existe en la base</div>");
} else if(data != '') {
$('#submit').attr("disabled", false);
$('#msgCod').html("");
}
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[autoTypeNo],
value: code[autoTypeNo],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#cod_'+id[1]).val(names[0]);
$('#nombreProd_'+id[1]).val(names[1]);
$('#proveedor_'+id[1]).val(names[2]);
$('#maskedDate_'+id[1]).val(names[3]);
$('#venta_'+id[1]).val(names[4]);
$('#existencia_'+id[1]).val(names[5]);
calculateTotal();
}
});
});

how to use jquery datatables with ajax calls

How to use ajax callbacks with jquery datatables i.e. call function on click?:
THIS WORKS
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );
replacing alert( 'You clicked on '+data[0]+'\'s row' ); with Ajax call:
DOES NOT WORK
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
//alert( 'You clicked on '+data[0]+'\'s row' );
$.ajax({
url: '/process',
data: data[0],
type: 'POST',
success: function(response) {
$("#response_placeholder").html(response);
},
error: function(error) {
console.log(error);
}
});
} );
} );
backend
#--app.py----
#app.route('/process', methods=['POST'])
def process_data():
data = request.form['data[0]'];
print data
return render_template('mypage.html', result=data)

try to use this.
$('body').delegate('#example tbody tr','click' , function () {
} );
Delegate helps to add events on elements that get added to the dom after it has been loaded.
also it is handy to put the data in an object like this
data: {data: data[0]},
and the url should contain a extension probably
url: '/process.js', // or process.php depends on what extension it has.
and for standards you should define the 3 attributes that will be returned with error eg.
error: function(jqXHR, textStatus, errorThrown) {

Select first search item without clicking to it in Jquery

Hello I have a html file that has several inputs which are autofilled when a matching item is selected on auto-complete
My html file is:
<table class="table table-bordered">
<ul>
<li><label>Barcode</label>
<input class="form-control" type='text' id='barcodescanr' name='barcodescanr' />
</li>
<li><label>Surname </label>
<input class="form-control" type='text' id='surname_1' name='surname' required/>
</li>
<li>
<label>Name</label>
<input class="form-control" type='text' id='name_1' name='name' required/>
</li>
<li><label>Company Name</label>
<input class="form-control" type='text' id='company_name_1' name='company_name' required/>
</li>
</ul>
</table>
My search looks like this
The autocomplete that fills the input fields is this and it works through barcode scanning
$('#barcodescanr').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'barcodescanr',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 3,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#name_1').val(names[2]);
$('#company_name_1').val(names[3]);
$('#surname_1').val(names[1]);
$('#firm_1').val(names[4]);
$('#info').val(names[5]);
$('#scanbartime').val(names[6]);
$('#id').val(names[7]);
$('#custId').val(names[8]);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
How could I select the first matching barcode from auto-complete without clicking on that? Thank you

try this
$('#barcodescanr').change(function(){
$('#ui-id-1 li:first-child').trigger('click');
});
or this, when user stop writing
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms, 2 second for example
var $input = $('#barcodescanr');
//on keyup, start the countdown
$input.on('keyup', function () {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$input.on('keydown', function () {
clearTimeout(typingTimer);
});
//user is "finished typing," do something
function doneTyping () {
$('#ui-id-1 li:first-child').trigger('click');
}
Play with the value of doneTypingInterval to your liking.

$('.table-bordered ul li:first-child').click();

How make textbox readonly after filled with autocompleted value using jquery?

Here I've a textbox, its data is filled by autocomplete using JSON.
Here i want textbox readonly after selecting any value of autocomplete (suggested fields).
textbox code:
$(document).ready(function ()
{
$('#patient_id').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'opdpatientajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'patientname',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
console.log(names[1], names[2], names[3]);
$('#patientAddress').val(names[1]);
$('#patientSex').val(names[2]);
$('#patientAge').val(names[3]);
}
});
});
<input type="text" id="patient_id" name="patient_nm"
placeholder="Enter and select Mother Name" title="Please Enter and select patinet name">

$("#patientAddress").attr("disabled", "disabled");
If you want to submit the field to $_POST, you need to enable it before sending the form.
$(document).ready(function ()
{
$('#patient_id').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'opdpatientajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'patientname',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
console.log(names[1], names[2], names[3]);
$('#patientAddress').val(names[1]);
$('#patientSex').val(names[2]);
$('#patientAge').val(names[3]);
$("#patientAddress").attr("disabled", "disabled");
$("#patientSex").attr("disabled", "disabled");
$("#patientAge").attr("disabled", "disabled");
}
});
});
OR you can use this method:
$( "#other" ).click(function() {
$( "#target" ).blur();
});

dialog box is not getting opened ajax jquery MVC2 asp.net

delete dialog box is not getting opened
my code
view:
`<div id="dialog-confirm" title="Delete dialog" style="display: none;">
<p>
Are you sure you want to delete the point?
</p>
</div>`
javascript:
`options += '<div onclick="editPoint(' + id + ')">Edit</div>
<div onclick="deletePoint(' + id + ')">Delete</div>';
optionsBox.html(options);`
controller:
public string delete_marker ( string Id )
{
try
{
mapmaker_dbDataContext DB = new mapmaker_dbDataContext ();
DB.SP_DeletePoint ( Id, /"Innayat"/ User.Identity.Name );
return "Point successfully deleted";
}
catch (Exception exc)
{
return "Delete operation failed";
}
}
delete function:
function deletePoint(id) {
MapScript.removeOptionsBox();
$( "#dialog-confirm" ).css('display','block');
alert('in detele');
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete": function() {
var link = '<%= Url.Action("delete_marker", "Home", new { id = "-1" }) %>';
link = link.replace("-1",id);
$.ajax({
url: link,
type: "GET",
cache: false,
success:
function (data) {
//alert(data);
if($('.up-triangle.firstAnimationA').length || $('.up-triangle.firstAnimationB').length )
//LoadList(0);
LoadNeighborhoodList(0, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
if($('.up-triangle.secondAnimationA').length || $('.up-triangle.secondAnimationB').length )
//LoadList(1);
LoadNeighborhoodList(1, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
if($('.up-triangle.thirdAnimationA').length || $('.up-triangle.thirdAnimationB').length )
{
//LoadList(2);
LoadNeighborhoodList(2, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
}
},
error: function(){
alert('Delete operation failed');
}
});
$( this ).dialog( "close" );
$( "#dialog-confirm" ).css('display','none');
alert('delete button clicked');
},
"Cancel": function() {
$( this ).dialog( "close" );
$( "#dialog-confirm" ).css('display','none');
}
}
});
$( "#dialog-confirm" ).dialog();
}
its giving error what wrong with the code? even if i replace the ajax functionlity with an alert its again giving error

Declare your dialog div on load body or document like this ...
$(function() {
$( "#dialog-confirm" ).dialog({
autoOpen: false});
});