Ajax
$(document).ready(function() {
$.ajax({
type: 'POST',
url: '../include/ListOfCities.php',
dataType: "json",
data: {
Country: "Japan"
},
success: function(data) {
console.log(data);
var city = ('#city');
$(city).empty();
for (var i = 0; i < data.length; i++) {
$(city).append('<option id=' + data[i].sysid + ' value=' + data[i].city_name + '>' + data[i].city_name + '</option>');
}
}
});
});
php
$country = mysql_real_escape_string($_POST['Country']);
$stmt = $dbh->prepare("SELECT * FROM city_tbl WHERE country_name = ? ");
$stmt->bindValue(1, $country, PDO::PARAM_STR);
if ($stmt->execute()) {
if ($stmt->rowCount() > 0) {
while ($selected_row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$citylist[] = array('sysid' => $selected_row['sys_id'], 'code' => $selected_row['city_code'], 'name' => $selected_row['city_name'], 'parentid' => $selected_row['parent_id']);
}
$input = array_map("unserialize", array_unique(array_map("serialize", $citylist)));
echo json_encode($input, JSON_UNESCAPED_UNICODE);
}
}
I want to display the all the city in japan in a select option menu i want to load the cities when the page loads i am sending the ajax request like above but i don't get any result the ajax above works fine when i use it on button. Is sending ajax request different from on button click and on document ready..Any suggestion how to make ajax request on document ready is appreciated
Just try setting async:false in your ajax request. So the final code will be
$(document).ready(function() {
$.ajax({
type: 'POST',
url: '../include/ListOfCities.php',
dataType: "json",
async:false,
data: {
Country: "Japan"
},
success: function(data) {
console.log(data);
var city = ('#city');
$(city).empty();
for (var i = 0; i < data.length; i++) {
$(city).append('<option id=' + data[i].sysid + ' value=' + data[i].city_name + '>' + data[i].city_name + '</option>');
}
}
});
});
Related
Hi I'm trying to figure out how to fill all fields using ajax call, it successfully doing by selecting category, it loads all related sub_categories.
But sub_sub_category fields are empty. Only when I choose sub_category option it will load all sub_sub_categories, but I want all prefilled once category has been changed. I don't mind to leave like this, but problem is if I have only single sub_category I can not select any sub_sub_category even if they have any I tried to convert to function and call them but no success.
Code below:
<script>
$(document).ready(function() {
get_sub_sub_category();
$('select[name="category_id"]').on('change', function() {
var category_id = $(this).val();
if(category_id) {
$.ajax({
url: "{{ url('/category/sub-category/') }}/"+category_id,
type: "GET",
dataType: "json",
success: function(data) {
$('select[name="sub_sub_category_id"]').html('');
var d = $('select[name="sub_category_id"]').empty();
$.each(data, function(key, value) {
$('select[name="sub_category_id"]').append('<option value="'+ value.id +'">' + value.sub_category_name + '</option>');
});
get_sub_sub_category();
},
})
} else {
alert('danger');
}
});
function get_sub_sub_category() {
$('select[name="sub_category_id"]').on('load change', function () {
var sub_category_id = $(this).val();
if (sub_category_id) {
$.ajax({
url: "{{ url('/category/sub-sub-category/') }}/"+sub_category_id,
type: "GET",
dataType: "json",
success: function (data) {
var d = $('select[name="sub_sub_category_id"]').empty();
$.each(data, function (key, value) {
$('select[name="sub_sub_category_id"]').append('<option value="' + value.id + '">' + value.sub_sub_category_name + '</option>');
});
},
})
} else {
alert('danger');
}
});
}
});
</script>
You might want to consider the following.
$(function() {
$('select[name="category_id"]').on('change', function() {
var category_id = $(this).val();
if (category_id) {
$.ajax({
url: "{{ url('/category/sub-category/') }}/" + category_id,
type: "GET",
dataType: "json",
success: function(data) {
$('select[name="sub_sub_category_id"]').html('');
var d = $('select[name="sub_category_id"]').empty();
$.each(data, function(key, value) {
$('select[name="sub_category_id"]').append('<option value="' + value.id + '">' + value.sub_category_name + '</option>');
});
$('select[name="sub_category_id"]').trigger("change");
},
})
} else {
alert('danger');
}
});
$('select[name="sub_category_id"]').on('change', function() {
var sub_category_id = $(this).val();
if (sub_category_id) {
$.ajax({
url: "{{ url('/category/sub-sub-category/') }}/" + sub_category_id,
type: "GET",
dataType: "json",
success: function(data) {
var d = $('select[name="sub_sub_category_id"]').empty();
$.each(data, function(key, value) {
$('select[name="sub_sub_category_id"]').append('<option value="' + value.id + '">' + value.sub_sub_category_name + '</option>');
});
},
})
} else {
alert('danger');
}
});
});
This defined the callbacks for both. For category, when it is changed, it triggers change event on sub-category. This in turn will cascade the loading of the next Select.
Experts, my php is not showing the first value of the input field but console.log showing correctly
console.log
PHP Output
function summary() {
$(document).ready(function (e) {
var date = $("#dddeliverydate").val();
var soid = $("#sssoid option:selected").val();
var form = $("#formsum").serialize();
console.log(form);
$.ajax({
url: "test.php",
method: "POST",
data: "&date=" + date + "&soid=" + soid + "&form=" + form,
success: function (data) {
var w = window.open("about:blank", "windowname");
w.document.write(data);
},
});
});
}
below is my PHP code
<?php
for ($count = 0; $count < count($_POST['invoiceno']); $count++) {
$data = array(
$invoiceno = $_POST['invoiceno'][$count],
$amount = $_POST['finalamount'][$count],
);
echo "Invoice NO " . $invoiceno . " Amount " . $amount . '<br>';
}
?>
what I am doing wrong need your help thanks in advance
You can change the code as below
function summary() {
$(document).ready(function (e) {
var send_data= $("#formsum").serialize();
send_data += '&date='+$("#dddeliverydate").val();
send_data += '&soid ='+$("#sssoid option:selected").val();
$.ajax({
url: "test.php",
method: "POST",
data: send_data,
success: function (data) {
var w = window.open("about:blank", "windowname");
w.document.write(data);
},
});
});
}
I have Allocate_classRoom DB table where I want to show data using ajax
function departmentQuery()
{
var department = $('#department' ).val();
if(department!=" ")
{
var urls = "{{ URL::to('roomAjax') }}";
var request = $.ajax({
url: urls+"/"+department,
type: "GET",
dataType: 'json'
});
request.done(function(data){
var allRoom ="";
for (var i=0; i<data.length;i++)
{
// room +="<option value=' " +data[i].id+ " ' >"+data[i].name+ "</option>";
allRoom +=" <tr> " +
"<td>"+data[i].id+"</td>"+
"<td>"+data[i].course_id+"</td>"+
/*"<td>"+ course->name+"</td>"+*/
"<td>"+data[i].Room_No+"</td>"+
"<td>"+data[i].date+data[i].start_time+data[i].end_time+"</td>"+
"</tr>";
}
$("#allRoom").html(allRoom);
});
request.fail(function(){
alert('failed to get items for that department');
});
}else {
alert('Select Department');
}
}
And I am uploading controller code
public function ajaxRoom($id)
{
$allRoom = AllocateClassroom::where('department_id',$id)-
>with('course')->get();
return response()->json($allRoom);
}
.Data return from the database but I could not show it my view table please I want your suggestion.
I'm trying to append records to my table which are being loaded from an AJAX request which returns JSON, but if I try to use output.length it returns a big number instead of 750 records. This causes the for loop to be run for 10000 times instead of 750. Why is this?
$(document).ready(function() {
getData();
});
function getData() {
$.ajax({
data: {
action: 'getData'
},
url: "api/ajaxcall.php",
type: 'post',
async: false,
dataType: 'html',
success: function(output) {
console.log(output.length);
// buildTable(result);
}
});
}
function buildTable(output) {
for (var i = 0; i < output.length; i++) {
$('<tr>').append(
$('<td>').text(output[i].naam),
$('<td>').text(output[i].perc),
$($('<input id="' + output[i].id + '" onclick="editData(this)" type = "button" value = "Edit" />')),
$($('<input id="' + output[i].id + '" onclick="readData(this)" type = "button" value = "Read" />')),
$($('<input id="' + output[i].id + '" onclick="deleteRow(' + output[i].id + ')" type = "button" value = "Delete" />'))
).appendTo('#tableA');
}
}
Check with this probably
function getData() {
$.ajax({
data: {
action: 'getData'
},
url: "api/ajaxcall.php",
type: 'post',
async: false,
dataType: 'html',
success: function(output) {
output = JSON.parse(output.d); //May it need to parse the string
console.log(output.length);
// buildTable(result);
}
});
}
On a code I wrote...
function change_regione(handle) {
// Hiding selects that we don't need
jQuery("select#comune").hide();
jQuery("select#quartiere").hide();
if(jQuery("#regione").val() == '') {
jQuery("select#provincia").parent().hide();
return
}
jQuery.ajax( {
url : WEBSITE_PATH + 'loadProvince.php',
type : 'GET',
dataType: 'json',
data : {
search_value : jQuery("#regione option:selected").attr("rel")
},
success : function(result) {
var provinceOptions = "<option value=\"\">Tutte le province</option>";
jQuery.each(result,function(i,el){
provinceOptions += '<option value="'+ el.url +'" rel="'+ el.id +'">' + el.value.replace("~","") + '</option>';
});
jQuery("select#provincia").parent().show();
jQuery("select#provincia").html(provinceOptions).show();
},
error : function(request, status, error) {
}
});
}
IE7/8 launches the AJAX request twice on the onchange() event for a select.
<select id="regione" name="regione" class="srhbox" onchange="change_regione(this)">
...
</select>
Firefox, Safari, Chrome, behave correctly.
What's going on? Have you ever seen this behaviour?
Well I am not sure why you are using inline js with jQuery.
Just use jQuery's .change() event:
$('#regione').change(function () {
// Hiding selects that we don't need
jQuery("select#comune").hide();
jQuery("select#quartiere").hide();
if (this.value == '') {
jQuery("select#provincia").parent().hide();
return;
}
jQuery.ajax({
url: WEBSITE_PATH + 'loadProvince.php',
type: 'GET',
dataType: 'json',
data: {
search_value: jQuery("option:selected", this).attr("rel")
},
success: function (result) {
var provinceOptions = "<option value=\"\">Tutte le province</option>";
jQuery.each(result, function (i, el) {
provinceOptions += '<option value="' + el.url + '" rel="' + el.id + '">' + el.value.replace("~", "") + '</option>';
});
jQuery("select#provincia").parent().show();
jQuery("select#provincia").html(provinceOptions).show();
},
error: function (request, status, error) {}
});
});
I don't know why it behaves like this but I have a work around for you. Try this.
var requestInProgress = false; // Variable to check if the request is in progress
function change_regione(handle) {
if(requestInProgress){
return;
}
requestInProgress = true;
// Hiding selects that we don't need
jQuery("select#comune").hide();
jQuery("select#quartiere").hide();
if(jQuery("#regione").val() == '') {
jQuery("select#provincia").parent().hide();
return
}
jQuery.ajax( {
url : WEBSITE_PATH + 'loadProvince.php',
type : 'GET',
dataType: 'json',
data : {
search_value : jQuery("#regione option:selected").attr("rel")
},
success : function(result) {
var provinceOptions = "<option value=\"\">Tutte le province</option>";
jQuery.each(result,function(i,el){
provinceOptions += '<option value="'+ el.url +'" rel="'+ el.id +'">' + el.value.replace("~","") + '</option>';
});
jQuery("select#provincia").parent().show();
jQuery("select#provincia").html(provinceOptions).show();
requestInProgress = false;
},
error : function(request, status, error) {
}
});
}