Develop Reference

Event Delegation Issue jQuery

I have the below code, the first HTML snippet is loaded on the initial page load, then when the span with id flag is clicked the javascript will load the second HTML snippet into a hidden div on the webpage.
Now this hidden div has a select drop down box which when changed the javascript should make another AJAX call but $("#overlay #innerWrapper #country").on('change', function() { is never called.
I'm sure it's an event delegation issue but can't seem to see where I'm going wrong!?
Javascript
$("#topBar").on("click", "#flag", function(e) {
e.preventDefault();
var data = {};
$("#overlay").css("display", "inline");
// Country Change
$("#overlay #innerWrapper #country").on('change', function() {
var country = $(this).val();
ajaxCall(country);
});
ajaxCall(data);
e.stopPropagation();
});
Loaded on page load (snippet 1)
<div id="topBar">
<span id="flag" class="flag-icon"></span>
</div>
Loaded via a AJAX query (snippet 2)
<div id="innerWrapper">
<div id="title">Select Country</div>
<span id="flag" class="flag-icon"></span>
<select id="country" name="country">
<option value="fr" selected="selected"> France</option>
<option value="de"> Germany</option>
</select>
</div>
Update 1:
$("#innerWrapper").on('change', '#country', function() {
alert('1');
var country = $(this).val();
ajaxCall(country);
});
$("#topBar").on("click", "#flag", function(e) {
e.preventDefault();
var data = {};
$("#overlay").css("display", "inline");
ajaxCall(data);
e.stopPropagation();
});
function ajaxCall(element, callId, dataIn)
{
var limit;
var data;
if ($(element).data("limit")) {
limit = $(element).data("limit");
data = {id: callId, limit: limit, data: dataIn};
}
data = {id: callId, data: dataIn, element: element};
$.ajax(
{
type: "POST",
url: "ajax.php",
data: data,
beforeSend: function ()
{
if (element != 'ignore') {
$(element).append( "<div class=\"loading\"></div>");
}
},
success: function (data)
{
if (element != 'ignore') {
$(element).html(data);
} else {
location.reload(true);
}
},
complete: function ()
{
if (element != 'ignore') {
$(element).siblings(".loading").remove();
}
},
error: function (jqXHR)
{
$(element).html(jqXHR.status + " - " + jqXHR.statusText);
}
});
}

Two or more select option only first one works Ajax

This is my blade
<select name="{{$bank_invited_user->role}}[]" id="role" class="form-control">
<option value="2" #if($bank_invited_user->role == 2) selected='selected' #endif >Co-author</option>
<option value="3" #if($bank_invited_user->role == 3) selected='selected' #endif >Contributor</option>
<option value="4" #if($bank_invited_user->role == 4) selected='selected' #endif >Guest</option>
</select>
And here I have my javascript code:
<script type="text/javascript">
$(document).ready(function(){
$( "#role" ).on( "click", function( event ) {
event.preventDefault();
var role_value = $(this).val();
var user_id = $("#role_id").val();
var bank_id = $("#removecollaborator").val();
$.ajax({
method: "POST",
url: "{{ url('/banks/change-role-in-bank') }}",
data: {
_token: "{{ csrf_token() }}",
role_value: role_value,
user_id: user_id,
bank_id:bank_id
},
success: function () {
$("select[id=role][value=" + role_value + "]");
alert('Role changed');
},
error: function () {
console.log("error");
}
});
});
});
</script>
When I click the the first select dropdown it changes just fine, but I have this select inside a foreach so it means I have more than one selections, so the other dropdown the second one it does not work.. I tried putting event.preventdefault but it does not work.. Can someone please help me, why the js code it does not work for the second selection(dropdown)..?

Can you check your brower console , mybe you have an ajax error
in js fiddle , the code is executed in the second event
https://jsfiddle.net/50k483nn/1/
You can also change event click to change for select dropdown
$( "#role" ).on( "click", function( event ) {
by
$( "#role" ).on( "change", function( event ) {

How to alert the data-id attribute value in laravel?

Ajax1:
<script type="text/javascript">
$(document).ready(function () {
$('.CategoryName').click(function() {
var categoryName = $(this).attr("data-id");
var url="{{url('getSubCategoryName/').'/'}}" + categoryName;
$.ajax({
url : url,
type: 'GET',
dataType:'json',
success:function(data){
$.each(data, function( index, value ) {
var output = '';
output = ' ' + value.subCategoryName + '';
**$(".subcategory").append('<ul><li data-
id="'+value.subCategoryName+'" class="getDeviceCategoryName">'+value.subCategoryName+'</li></ul>')**
});
}
});
});
});
</script>
The code which is marked in bold has the value for data-id attribute..And I need to pass that value when class named getDeviceCategoryName is clicked.
AJAX2:
<script type="text/javascript">
$(document).ready(function () {
$('.getDeviceCategoryName').click(function() {
var subCategoryName = $(this).attr("data-id");
alert(subCategoryName);
});
});
</script>
This is one I tried for that..But its not working.It doesnot alerts or shows any error.

You should consider jquery event delegation:
Change your jquery selector line like this:
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click','.getDeviceCategoryName',function() {
var subCategoryName = $(this).attr("data-id");
alert(subCategoryName);
});
});
</script>

Here you go with a solution
$(document).ready(function () {
$(document).on('click', 'li.getDeviceCategoryName', function() {
console.log($(this).data("id"));
});
});
Since the elements are generated dynamically, so you need to delegate events.
For receiving the data-attribute you can do $(this).data("attribute-name"); in your scenario it will be $(this).data('id');
Hope this will help you.

Personally I think code is more efficient if the click event is applied to the element right after it's created.
$(function () {
$('.CategoryName').click(function () {
var categoryName = $(this).attr('data-id');
var url = '{{url(\'getSubCategoryName/\').\'/\'}}' + categoryName;
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
success: function (data) {
$.each(data, function (index, value) {
var output = '';
output = ' ' + value.subCategoryName + '';
$('.subcategory').append($('<ul/>').append('<li data-id="' + value.subCategoryName + '" class="getDeviceCategoryName">' + value.subCategoryName + '</li>')
.find('li')
.click(function () {
var subCategoryName = $(this).attr('data-id');
alert(subCategoryName);
});
);
});
}
});
});
});

$(document).ready(function () {
$(document).on('click', '.getDeviceCategoryName', function(){
var subCategoryName = $(this).attr("data-id");
alert(subCategoryName);
});
});

Jquery get values from select boxes and make AJAX call

I have multiple select boxes, where I want to get the value of each selected option and make an AJAX call based on the selected options. How can I achieve that?
I have this so far:
$('select[name="restaurant_chosen"]').on('change', function() {
var restaurant_id = $(this).val();
});
$('select[name="date_chosen"]').on('change', function() {
var date_chosen = $(this).val();
});
$.ajax({
type: 'GET',
url: '/api/' + restaurant_id + '/' + date_chosen +
success: function(data) {
console.log(data)
},
error: function(data){
console.log('error')
}
});
the 2 variables restaurant_id and date_chosen I get the error not defined. What am I doing wrong?

function sendToServer(values, onSuccess, onError){
var restaurant_id, date_chosen;
//here fill restaurant_id and date_chosen using values
$.ajax({
type: 'GET',
url: '/api/' + restaurant_id + '/' + date_chosen, //replace the plus by a comma
success: function(data) {
onSuccess(data);
},
error: function(data){
onSuccess(data);
}
});
}
$('select').on('change', function() {
var values = [];
$('select').each(function(index){
v = $(this).val();
n = $(this).attr("name");
values.push( {"name":n, "value":v} );
});
console.log("values: ", values);
sendToServer(values,
function(data){
console.log(data);
},
function(data){
console.log('error', data);
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="brand">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>

And that is how it should be. You're declaring your variable within a private function context, which you cannot (and must not) access from the outside.
Simple solution, move the declaration of your two variable out of the onchange event handlers (make it more global).
var restaurant_id;
date_chosen;
$('select[name="date_chosen"]').on('change', function() {
date_chosen = $(this).val(); // skip the var here
});

jquery script runs only if page refresh

i have a button with the folowing code
<button type="button" class="btn btn-success btn-xs vote up" id="76" name="up"><span class="glyphicon glyphicon-thumbs-up"></span> Bueno</button>
the button does not work unless i reload the page, and i dont know why. any ideas?
jquery code is at the beginning of the body
jquery
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var _this = this;
if(name=='up')
{
$(this).fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
$( _this ).remove();
$( ".escondido" ).css( "display", "block" );
} });
return false;
});
});
</script>

If the jQuery code is at the beginning of the code (before the HTML) as you state, the DOM would not have been created yet. Try moving the jQuery code to the bottom of the body (after the HTML).

I would assume you're getting an error in the button click event. Have you tried using the live('click') instead? Can you demonstrate the issue using JSFIDDLE?

In the jsFiddle I created, I'm seeing syntax errors - Original Code
If I change the code to Edited jsFiddle:
$(function () {
$(".vote").click(function () {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id=' + id;
var parent = $(this);
var _this = this;
if (name == 'up') {
$(this).fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function (html) {
parent.html(html);
$(_this).remove();
$(".escondido").css("display", "block");
}
});
return false;
}; // Removed ) from this line
});
}); // Added this whole line