Develop Reference

How the dependency drop will work during onload with JQuery

There is some data inside a table
When I press the edit button, I can edit all the data for that row.Menu Category and Menu These two data came from Dependent dropdown.
with this code the dropdown in the menu was supposed to show when the menu categories were selected.
modal.find('.modal-body #menu_category_update').val(menu_item_category_selected);
modal.find('.modal-body #menu_update').val(menu_item_selected);
This code goes through the menu category ID and selects Fastfood Dropdown.
$(document).ready(function () {
$(document).on('change','#menu_category_update',function(){
$("#menu_update").empty();
var ddl_menu1 = GetLoadApptUpdate($(this).val());
$("menu_update").empty();
$('#menu_update').select2({
placeholder: "--Select Menu--",
data: ddl_menu1,
dropdownParent: $(this).parent()
});
});
});
function GetLoadApptUpdate(id) {
var b = [];
$.ajax({
type: "GET",
dataType: "json",
cache: true,
async: false,
url: "/admin/menu/item/entry1/"+id,
success: function (response) {
b = response;
},
error: function (response) {
b = { id: 0, text: "No Data" }
}
});
return b;
};
#menu_category_update The function that is being called with this ID is working properly. But my problem is that when I click on the edit button, a dropdown is selected by default, for which the dependent dropdown is not selected.
Expected answer:

Here is the solution:
$('#menu_category_update').val(menu_item_category_selected);
modal.find('.modal-body #menu_update').val(menu_item_selected);
var menu_category_update_val = $("#menu_category_update option:selected").val();
var menu_update_val = $("#menu_update option:selected").val();
if (menu_category_update_val !== "") {
func();
$('#menu_update').val(menuItemSelected).trigger('change');
}
function func() {
$('#menu_category_update').change(function () {
$("#menu_update").empty();
var ddl_menu1 = GetLoadApptUpdate1($(this).val());
$('#menu_update').select2({
placeholder: "--Select Menu--",
data: ddl_menu1,
dropdownParent: $(this).parent()
});
}).change();
function GetLoadApptUpdate1(id) {
var b = [];
$.ajax({
type: "GET",
dataType: "json",
cache: true,
async: false,
url: "/admin/menu/item/entry1/" + id,
success: function (response) {
b = response;
},
error: function (response) {
b = {id: 0, text: "No Data"}
}
});
return b;
};
}

Storing JSON result from ajax request to a javascript variable for Easyautocomplete

I'm trying to implement the EasyAutoComplete plugin on a field based on the value filled in another field, using ajax requests.
I have a customerid field and when it's value changes, I want the productname field to show all products related to that customerid using the EasyAutoComplete plugin.
Here is what I have so far:
$('#customerid').on('change',function() {
var products2 = {
url: function(phrase) {
return "database/FetchCustomerProducts.php";
},
ajaxSettings: {
dataType: "json",
method: "POST",
data: {
dataType: "json"
}
},
preparePostData: function(data) {
data.phrase = $("#customerid").val();
return data;
},
getValue: "name",
list: {
onSelectItemEvent: function() {
var value = $("#productname").getSelectedItemData().id;
$("#productid").val(value).trigger("change");
},
match: {
enabled: true
}
}
};
$("#productname").easyAutocomplete(products2);
});
Contents of FetchCustomerProducts.php:
if(!empty($_POST["customerid"])){
$products = $app['database']->Select('products', 'customerid', $_POST['customerid']);
echo json_encode(['data' => $products]);
}
However it's not working. The code is based on the 'Ajax POST' example found on this page.

you can using element select category add is class "check_catogory"
after using event click element select get value is option, continue send id to ajax and in file php, you can get $_POST['id'] or $_GET['id'], select find database,after echo json_encode
$("#customerid").change(function(){
var id = $(this).val();
if(id!=""){
$.ajax({
url:"database/FetchCustomerProducts.php",
type:"POST",
data:{id:id},
dataType: "json",
cache:false,
success:function(result){
var options = {
data:result,
getValue: "name",
list: {
onSelectItemEvent: function() {
var value = $("#productname").getSelectedItemData().id;
$("#productid").val(value).trigger("change");
},
match: {
enabled: true
}
}
};
$("#productname").easyAutocomplete(options);
}
})
}
});

How to Hide multiple div on Ajax Success

I am trying to hide 2 div on Ajax Success by following code
$(".editButton").click(function () {
var self = this;
var membershipid = $(this).attr('id');
$.ajax({
type: 'POST',
url: '#Url.Action("GetMembershipDetail","User")',
data: { "MembershipID": membershipid },
success: function (data) {
$('#ddlStoreUpdate').val(data["fk_Store_ID"]);
$('#TxtTitleUpdate').val(data["MembershipTitle"]);
$('#TxtDescriptionUpdate').val(data["MembershipDescription"]);
$('#TxtTimeFrameUpdate').val(data["MembershipTimeFrame"]);
$('#TxtMembershipMinUpdate').val(data["MembershipMinVisit"]);
$('#chkUpdate').prop('checked', data["MembershipGroundLevel"]);
$('#HiddenMembershipID').val(membershipid);
if (data["MembershipGroundLevel"] == true)
{
alert("True");
$("#TxtTimeFrameUpdate").val(0);
$(self).closest("#RowTimeFrameUp").hide()
$("#TxtMembershipMinUp").val(0);
$(self).closest("#RowMinFrameUp").hide()
}
else
{
alert("false");
$("#RowTimeFrame").show("slow");
$("#RowMinFrame").show("slow");
var storeid = $("#ddlStore").val();
$.ajax({
type: 'POST',
dataType: 'json',
url: '#Url.Action("GetTimeFrame","User")',
data: { 'StoreID': storeid },
success: function (data) {
$("#TxtTimeFrame").val(data);
},
error: function (error) {
alert(JSON.stringify(error));
}
});
}
},
error: function (data) {
alert(JSON.stringify(data));
}
})
$("#myModalUpdate").modal('show');
});
If condition is working well, but Div(s) doesn't hide
If I remove $(self).closest() from second div, first div hides all well, Issue is with multiple div

You can use class to hide it, like this:
$(".resetValueTo0").val(0);
$(".divToHide").hide();
Therefor, you don't need to do this:
$("#TxtTimeFrameUpdate").val(0);
$(self).closest("#RowTimeFrameUp").hide()
$("#TxtMembershipMinUp").val(0);
$(self).closest("#RowMinFrameUp").hide()

You might want to try this:
Replace this code:
$("#TxtTimeFrameUpdate").val(0);
$(self).closest("#RowTimeFrameUp").hide()
$("#TxtMembershipMinUp").val(0);
$(self).closest("#RowMinFrameUp").hide()
To this:
$("#TxtTimeFrameUpdate").val(0);
$(self).closest("#RowTimeFrameUp").each(function(){
$(this).hide();
});
$("#TxtMembershipMinUp").val(0);
$(self).closest("#RowMinFrameUp").each(function(){
$(this).hide();
});

Change class and text of button based on post result

I'm trying to change the class and text of the button that was clicked based on the result from an ajax post. The page has many buttons, none have IDs (although I could add them if it's for sure needed). I have the following javascript:
$('.ph-button').click(function () {
var selected = [];
$(this).closest('tr').each(function () {
$(this).find('td').each(function() {
selected.push($(this).html));
})
})
console.log(selected);
$.ajax({
type: "POST",
url: "/ClassSearch/watchClasses",
data: { arrayOfClasses: selected },
traditional: true,
success: function (data) {
//need the if statements here I think
console.log(data);
}
});
});
It works and gives me a 0 or 1 as data. I need to change the class to class='ph-button ph-btn-blue and the text to Watched if data is 0 and change the class to class='ph-button ph-btn-grey and the text to Watch if data is 1.
I tried using $(".ph-button").toggleClass("ph-button ph-btn-blue"); but it changed the class of all the buttons on the page and didn't seem to do it like I need.
I'm guessing toggleClass isn't what I need and i'm not sure how to address the button that was clicked instead of all of them. Here are the two possible buttons:
<td><button class='ph-button ph-btn-blue'>Watched</button></td>
<td><button class='ph-button ph-btn-grey'>Watch</button></td>
SOLUTION:
$('.ph-button').click(function () {
var selected = [];
var btn = $(this);
$(this).closest('tr').each(function () {
$(this).find('td').each(function(){
selected.push($(this).html());
})
})
console.log(selected);
$.ajax({
type: "POST",
url: "/ClassSearch/watchClasses",
data: { arrayOfClasses: selected },
traditional: true,
success: function (data) {
console.log(data);
if (data == 1) {
btn.toggleClass("ph-btn-grey ph-btn-blue").text('Watched');
}
if (data == 0) {
btn.toggleClass("ph-btn-blue ph-btn-grey").text('Watch');
}
}
});
});

set a temporary variable referencing the button, so you can use it later on in your AJAX success callback:
$('.ph-button').click(function () {
var selected = [];
var btn = $(this);
$(this).closest('tr').each(function () {
$(this).find('td').each(function(){
selected.push($(this).html());
})
})
$.ajax({
type: "POST",
url: "/ClassSearch/watchClasses",
data: { arrayOfClasses: selected },
traditional: true,
success: function (data) {
if(data == "0"){
btn.toggleClass("ph-button ph-btn-blue").text('Watched');
}
}
});
});

How to refresh jTable after adding record w/o page refreshing

Here is my add driver button
$( "#addDriver" ).button().click(function( event ) {
event.preventDefault();
var dn = $("input[name=driver_name]").val();
var ds = $("input[name=driver_status]").val();
var dataString = 'driver_name='+ dn + '&driver_status='+ ds;
//Here is where im trying to load it but it's not working
$('#driversTable').jtable('load');
if(dn == '' || ds == '' )
{
alert("Fill up all Fields with \'*\'");
}
else
{
$.ajax({
type: "POST",
url: "processDriver.php",
data: dataString,
dataType: "json",
success: function(data){
if(!data.error && data.success) {
alert(data.successMsg);
$("input[name=driver_name]").val('');
$("input[name=driver_status]").val('');
} else {
alert(data.errorMsg);
}
}
});
}
});
And here is my jTable init
$("#driversTable").jtable({
title: 'Drivers',
actions: {
listAction: "getAllDrivers.php",
},
fields: {
did: {
key: true,
list: false
},
dID: {
title: 'Driver ID',
width: '7%'
},
dName: {
title: 'Name',
width: '7%'
},
dStatus: {
title: 'Status',
width: '12%'
}
}
});
$('#driversTable').jtable('load');
I want it to be right after adding a new record i want the table to refresh without refreshing the page. I tried the load and reload functions of jtable is not working or am i just putting them on the wrong place of my code?

Insert Data First Then Reload.
$.ajax({
type: "POST",
url: "processDriver.php",
data: dataString,
dataType: "json",
success: function(data){
if(!data.error && data.success) {
alert(data.successMsg);
$('#driversTable').jtable('reload');//<== Reload after Success
$("input[name=driver_name]").val('');
$("input[name=driver_status]").val('');
} else {
alert(data.errorMsg);
}
}
});