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;
};
}

DataTables.js removes multiple rows on row().remove().draw() call

When I row(row).remove().draw(false) on a row Datatables removes an extra row.
This is my javascript:
$('.wrapper').on('click', '#confirm_delete', function(e) {
e.preventDefault();
var modal = $(this).closest('.modal');
var id = modal.find('#delete_id').val();
var row = $('#list_bkng_bus').find('.booking-id[value="'+id+'"]').closest('tr');
$.ajax({
type: 'POST',
url: '/includes/ajax/bookings-bus.php',
dataType: 'json',
data: { 'delete_id': id },
success: function(result) {
bkng_bus_table.row(row).remove().draw(false);
modal.modal('hide');
status_message('success', 'Boeking verwijderd');
},
error: function(xhr, status, error) {
console.log(xhr.responseText);
console.log(error);
status_message('error', 'Databasefout. (Remove booking business)');
}
});
});
This is the content of my row variable:
0 : tr.even
context : document
length : 1
prevObject : [input.booking-id, prevObject: n.fn.init(1), context: document, selector: "#list_bkng_bus .booking-id[value="57"]"]
So it contains a tr.

you code should work, and if not then you VAR row should have problem.
in case of more information you can check

The issue was the fact that because of the way the table was generated (dynamically), multiple event listeners were attached to the element.
The solution was using .off('click') before .on('click', '#confirm_delete', function(e) {.
Which makes this code function as expected:
$('.wrapper').off('click').on('click', '#confirm_delete', function(e) {
e.preventDefault();
var modal = $(this).closest('.modal');
var id = modal.find('#delete_id').val();
var row = $('#list_bkng_bus').find('.booking-id[value="'+id+'"]').closest('tr');
$.ajax({
type: 'POST',
url: '/includes/ajax/bookings-bus.php',
dataType: 'json',
data: { 'delete_id': id },
success: function(result) {
bkng_bus_table.row(row).remove().draw(false);
modal.modal('hide');
status_message('success', 'Boeking verwijderd');
},
error: function(xhr, status, error) {
console.log(xhr.responseText);
console.log(error);
status_message('error', 'Databasefout. (Remove booking business)');
}
});
});

Get value from autocomplete dropdown

I need to assign value from dropdown to autocomplete textbox ..till Now I have done this
But You can see I can't assign value from Dropdown to textbox ..
I have implemented auto complete feature by a JQuery PlugIn "Prop.js"
this is the code I have created
<link href="~/Content/popr.css" rel="stylesheet" />
<script src="~/Scripts/popr.js"></script>
<script src="~/Scripts/popr.min.js"></script>
<div id="address" >
<label>Country</label>
<table>
<tr>
<td>#Html.TextBox("Country")</td>
<td>
<div class="popr" data-id="demo">^</div>
<div class="popr-box" data-box-id="demo">
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#Country").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Location/GetAllCountry",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response(data);
}
})
},
appendTo: '#menu-container',
messages: {
noResults: "", results: ""
}
});
$.ajax({
url: "/Location/GetAllCountry",
type: 'POST',
data: { term: "" },
success: function (states) {
var $select = $('div[data-box-id="demo"]');
$.each(states, function (i, state) {
$('<option>', {
value: state
}).html(state).appendTo($select)
.addClass("popr-item");
});
},
error: function (xhr) { alert("Something seems Wrong"); }
});
});
$('.popr').popr();
$('.popr').popr({
'speed': 200,
'mode': 'bottom'
});
I have searched the solution the tried for a click inside div to get selected value
$(".popr-item").click(function (e) {
e.stopPropagation();
});
$(".popr-box").click(function (e) {
e.stopPropagation();
alert("popr-box");
});
this is not working
I tried another plugin "chosen" .. But it fails in cascading dropdown ..I am not in a position to try another plugin ... I strictly want to use by this way
if there is another plugin available , I need to see example with cascading dropdown specifically
I just need selected value from dropdown , How Can I achieve this ?

Add this select option in autocomplete
$("#Country").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Location/GetAllCountry",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response(data);
}
})
},
select: function( event, ui ) {
$( "#Country" ).val( ui.item.label );
return false;
},
appendTo: '#menu-container',
messages: {
noResults: "", results: ""
}
});

AutoComplete in jQuery with dynamically added elements

My requirement is to show few options when user input some characters (minimum 3) in one of input field which might be added dynamically too.
I can not load data at page loading at beginning because data is huge. There is an ajax call to get that filtered data.
The issue what I am getting is Expected identifier error on page loading at line# 2. So, could you please tell what is wrong with the below code?
$(document).on('keydown.autocomplete', 'input.searchInput', function() {
source: function (request, response) { // Line # 2
var id = this.element[0].id;
var val = $("#"+id).val();
$.ajax({
type : 'Get',
url: 'getNames.html?name=' + val,
success: function(data) {
var id = $(this).attr('id');
$(this).removeClass('ui-autocomplete-loading');
response(data);
},error: function(data) {
$('#'+id).removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3
});

How about using another approach: initialize the autocomplete when you create the input:
$(function() {
// settings for each autocomplete
var autocompleteOptions = {
minLength: 3,
source: function(request, response) {
$.ajax({
type: "GET",
url: "getNames.html",
data: { name: request.term },
success: function(data) {
response(data);
}
});
}
};
// dynamically create an input and initialize autocomplete on it
function addInput() {
var $input = $("<input>", {
name: "search",
"class": "searchInput",
maxlength: "20"
});
$input
.appendTo("form#myForm")
.focus()
.autocomplete(autocompleteOptions);
};
// initialize autocomplete on first input
$("input.searchInput").autocomplete(autocompleteOptions);
$("input#addButton").click(addInput);
});
<form id="myForm" name="myForm" method="post">
<input id="addButton" type="button" value="Add an input" />
<input name="search" class="searchInput" maxlength="20" />
</form>
jsFiddle with AJAX

The method where I am adding new input field there writing below code.
function addInput(){
// Code to append new input filed next to existing one.
$("table").find('input[id=clientId]:last').autocomplete({
source: function (request, response) {
var id = this.element[0].id;
var val = $("#"+id).val();
$.ajax({
type : 'Get',
url: 'getName.html?name=' + val,
success: function(data) {
var id = $(this).attr('id');
$(this).removeClass('ui-autocomplete-loading');
response(data);
},
error: function(data) {
$('#'+id).removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3
});
}
And some where in other js which will be used to all other (static) input fields below code is used.
jQuery("input.searchInput").autocomplete({
source: function (request, response) {
var id = this.element[0].id;
var val = $("#"+id).val();
$.ajax({
type : 'Get',
url: 'getName.html?name=' + val,
success: function(data) {
var id = $(this).attr('id');
$(this).removeClass('ui-autocomplete-loading');
response(data);
},
error: function(data) {
$('#'+id).removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3
});
Note :- For any autocomplete requests in dynamically added input fields, AutoComplete code of addInput() function will be called.
Thanks to #Salman and this post Enabling jQuery Autocomplete on dynamically created input fields to give me an idea.

Try this.
$("#autocompleteElement").autocomplete({
source:function (data, response) {
$ajax({
url:'your/url?name='+data.term,
success:function(data){
response(data);
}
})
}
});
This code based on jquery UI autocomplete.

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');
}
}
});
});