hi guys i have try to make a select data function with jquery with onclick event that have triggering the date from datepicker.
i have try to make a code but seems not work at all.
this is the textboxt id's that contain the datepicker call function. $(#date)
i have try to make a code for selecting my data.
this is the code.
$(document).on('click','#date',function(e) {
var data = $("#form_input10").serialize();
$('#table_s tbody').empty();
$.ajax({
data: data,
type: "Post",
url: "../php/termocouple/get_date.php",
success: function(data){
var list = JSON.parse(data);
for(var i = 0; i < list.length; i++){
$('#date1').val((list[i]['tanggal2']));
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
the condition when the datepicker running is like this. when the textbox clicked then the datepicker will be showing. nah when i use my code, the condition like this the 1st click is for show the datepicker that ( from this condition the textbox doesn't have any value of the date) the the datepicker showing and i select the date. i need do one click again on the textbox for showing my data.
please someone help me to solve this
please
Instead of trying to use a click event on the datepicker, you'd want to use one of the datepicker's available options. One is beforeShow, and allows you to have a function run before the datepicker opens up:
$( "#date" ).datepicker({
beforeShow: doThatThing
});
function doThatThing(){
var data = $("#form_input10").serialize();
$('#table_s tbody').empty();
$.ajax({
data: data,
type: "Post",
url: "../php/termocouple/get_date.php",
success: function(data){
var list = JSON.parse(data);
for(var i = 0; i < list.length; i++){
$('#date1').val((list[i]['tanggal2']));
}
}
});
}
Related
I have a table with data and a function to help me get values from rows:
function getRow () {
$('#mytable').find('tr').click( function(){
let fname = $(this).find('td:eq(4)').text();
let start = $(this).find('td:eq(5)').text();
let end = $(this).find('td:eq(6)').text();
.......ajax method () etc
................
}
So far, it has been working perfectly and fetching me the correct data. I had another function elsewhere in the page, where clicking on some links would fetch some data from the server and reload the page to display the new data. Everything was working like clockwork.
Now, I decided that when re-displaying fresh data, instead of reloading the page, it's better to refresh the #mytable div. Indeed, it worked, but alas it spoiled the first function. So basically the function below has introduced a bug elsewhere in the page, and I'm not sure why or how to fix it. It's as if the div refresh has completely disabled the event handler. Any ideas?
$(document).ready(function() {
$(".key").click(function(event) {
event.preventDefault();
var word = event.target.innerHTML;
$.ajax({
url: '.../',
data: {
action : "key",
keyword: word
},
type: 'get',
success: function(data){
$('#mytable').load("/.../../..." + ' #ytable');
},
error: function(e){
console.log(e);}
});
});
});
I am trying to do the following. I have a date picker. When I select a date (during data change event), I am doing a ajax call to get data that I need to populate in a autocomplete drop down. When the page loads for the first time, the autocomplete box will be empty. As and when the date is changed or selected, the autocomplete box should populate accordingly. Please check my code below.
When I initiate the dataSrc variable, the drop down loads for the first time without any issues.
The issue that I am having is with the dynamic population, the data that I am fetching from the ajax call is not being set in the autocomplete source dynamically.
Please advice.
var dataSrc = [];
$(document).ready(function() {
$("#dropdownselector").autocomplete({
source : dataSrc,
change : function(event, ui) {
$("#selector").val(0);
$("#selector").val(ui.item.id);
}
}).focus(function() {
$(this).autocomplete("search", " ");
});
$('#dateselector').on("changeDate", function() {
$.ajax({
type : "GET",
url : "../getDropDownData",
data : {
"dateSelected" : $('#dataSelected').val()
},
contentType : "application/x-www-form-urlencoded; charset=utf-8",
dataType : "json",
async : true,
cache : false,
success : function(data) {
dataSrc = JSON.stringify(data);
},
error : function(data) {
alert('There was an error while fetching data.')
}
})
});
});
dataSrc = JSON.stringify(data); replaces what dataSrc points to. It does not change the original array element that was given to the autocomplete.
You could try pushing all the elements from the data into the dataSrc, which would cause the array that dataSrc originally pointed to, to not change, but get new values.
Or if that does not work, you may have to use the https://api.jqueryui.com/autocomplete/#method-option method to change the source option for the autocomplete.
$("#dropdownselector").autocomplete( "option", "source", data);
Inner your success function you need to destroy the old autocomplete and redraw it. Maybe, you need to create a function to create the autocomplete ('drawAutocomplete').
...
success : function(data)
{
dataSrc = JSON.stringify(data);
$( "#dropdownselector" ).autocomplete( "destroy" );
drawAutocomplete();
},
...
I want to implement this autocomplete to my page: http://www.bewebdeveloper.com/tutorial-about-autocomplete-using-php-mysql-and-jquery and it works but in my case I use clone() function to copy all <li> elements like here: http://jsfiddle.net/x42c3anw
When I have several inputs autocomplete works only for first input, how I can edit this function? :
function autocomplet() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#country_id').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_refresh.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#country_list_id').show();
$('#country_list_id').html(data);
}
});
} else {
$('#country_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#country_id').val(item);
// hide proposition list
$('#country_list_id').hide();
}
I undurstand this is because ID is not uniqe, is there possibility to add some increment to id or use class? If yes how I can do that?
I have a Jquery function to delete a row in an HTML table, it looks like this;
$(document).ready(function(){
$("#thisNet td a.delete").click(function() {
if (confirm("Are you sure you want to delete this row?")) {
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
$.ajax({
type: "POST",
url: "delete-row.php",
data: data,
cache: false,
success: function()
{
parent.fadeOut('slow', function() {$(this).remove();});
}
});
}
});
});
I don't know if it works or not because when I click the button I never get into the function. The delete item to click is in a table created by PHP/MySQL. I followed the tutorial here; https://sarfraznawaz.wordpress.com/2009/09/14/deleting-table-rows-using-jquery-and-php/ to create the delete function. I'm guessing the reason it doesn't fire has to do with timing. The $(document).ready(function() already thinks the page is done loading before the table is created..but I don't know how to overcome this problem.
The page is here; http://kcmecc.org/RaspPi/ once you access it use the drop down to select Net #1. The delete column is the last one with the red x.
Your delete button doesn't exist on document ready. You need to use .on to delegate the event to an ancestor element when dynamically adding elements...
$(document).on('click', '#thisNet td a.delete', function() {
I am trying build a web page that will construct elements from JSON file and attach click function to those elements.
$(document).ready(function(){
$.ajax({
url: 'database.php',
type: "POST",
dataType: 'json',
success: function (datas) {
(datas);
for (var x = 0; x < datas.data.length; x++) {
var id = datas.data[x].ID;
var ip = datas.data[x].IP;
var ips='<div class="ip"><span id="ids">'+id+'</span><span id="number">'+ip+'</span></div>';
$('#left').append(ips);
}
}
});
$('.ip').click(function () {
alert($(this).children('#ids').text());
});
});
the code above builds the elements successfully but the click function is not working.
You can use the on function instead, it is used to apply event handlers to elements that are not yet created.
Where you have your current click setup, try something like this instead:
$(document).on('click', '.ip', function(){
alert($(this).children('#ids').text());
});
As #Pete has suggested, it is not a good idea to assign the same id attributes within a loop, they should be unique to the document. Consider finding them via class names instead, so you could alert something like:
alert($(this).children('.MyIdsSpan').text());