need an help on a jquery script.
I have a select that trigger from Ajax a list of options available. Once user click this option if a variable got 1 a HTML div is added, if i change to another value HTML disappear. This script work as well first time: i click a option and div appear, when i click other option disappear but this cycle is completed if i it another time select option this stop working...
This is the code:
<script type="text/javascript">
$(document).ready(function() {
request_url = 'opzioni-select';
$.ajax({
url: request_url,
success: function(data){
$('#id_opzione').html("");
$.each(data, function(i, item){
var id = item.id;
var parent_id = item.parent;
var nome_opzione = item.nome_opzione;
var nome_parent = item.nome_parent;
$('#id_opzione').append('<option data-opzione="'+ item.nome_parent +'" data-parent="'+ item.parent +'" id="' + item.nome_opzione +'" value="' + item.id + '">' + item.nome_opzione +'</option>');
});
$(document).on('change', '.opzione', function(){
var parent = $('#id_opzione').find(':selected').data('parent');
var nome_parent = $('#id_opzione').find(':selected').data('opzione');
if(parent != null) {
$('#parent-div').append('<label for="parent-div" class=" control-label col-md-4 text-left">'+ nome_parent +'</label><div class="col-md-6"><input type="text" name="valore_parent" class="form-control"></div><div class="col-md-2"></div>');
} else {
$('#parent-div').hide('fast');
}
});
}
});
});
</script>
I tried to change div id in class and switched to "on('change" instead of call directly the #div with .change( but nothing.
Few problems - you're appending a bunch of options - then delegating for a class that i cant see being created.. Id recommend moving the delegated event to the document ready function. . and using the id of the select - and selecting the option after that using this.
<script type="text/javascript">
$(document).ready(function() {
request_url = 'opzioni-select';
$.ajax({
url: request_url,
success: function(data){
$('#id_opzione').html("");
$.each(data, function(i, item){
var id = item.id;
var parent_id = item.parent;
var nome_opzione = item.nome_opzione;
var nome_parent = item.nome_parent;
$('#id_opzione').append('<option data-opzione="'+ item.nome_parent +'" data-parent="'+ item.parent +'" id="' + item.nome_opzione +'" value="' + item.id + '">' + item.nome_opzione +'</option>');
});
});
$('#id_opzione').on('change', function(){
alert('Changed');
var parent = $('#id_opzione').find(':selected').data('parent');
var nome_parent = $('#id_opzione').find(':selected').data('opzione');
if(parent != null) {
$('#parent-div').append('<label for="parent-div" class=" control-label col-md-4 text-left">'+ nome_parent +'</label><div class="col-md-6"><input type="text" name="valore_parent" class="form-control"></div><div class="col-md-2"></div>');
} else {
$('#parent-div').hide('fast');
}
});
}
});
</script>
Related
I am trying to get the todo titles from jsonplaceholder.typicode.com JSON. I have three buttons and each botton has and id, that id is related to the json todo. When you click on a botton you see the title of that json todo.
Button 1 = jsonplaceholder.typicode.com/todos/1 Button 2 =
jsonplaceholder.typicode.com/todos/2 etc..
$('button').click(function (event) {
var id = event.target.id;
console.log(id);
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos/" + id,
type: "GET"
}).done(function (data) {
$('#result').append('<div class="todo"></div>');
$.each(data, function (key, value) {
if (key == "title") {
$('.todo').append('<p>' + key + ': ' + value + '</p>');
}
});
}).fail(function (event) {
alert(event.status);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1">A</button>
<button id="2">B</button>
<button id="3">C</button>
<div id="result">
</div>
The problem is that titles repeat each time I click on a button. Why this occurs?
Why? Because you append another <div class="todo"></div> each time button is clicked and then append the content to every one that exists
You can isolate the new <div class="todo"> and only append the new content to that
var $todo = '<div class="todo"></div>'
$('#result').append($todo);
$.each(data, function(key, value) {
if (key == "title") {
$todo.append('<p>' + key + ': ' + value + '</p>');
}
});
Or empty the $('#result') before you add the new content if you don't want to see the first set by changing:
$('#result').append('<div class="todo"></div>');
To
$('#result').html('<div class="todo"></div>');
On each ajax done callback you first create a new todo div:
$('#result').append('<div class="todo"></div>');`
and after that, you add the result to all elements with a todo class:
$('.todo').append('<p>' + key + ': ' + value + '</p>');
I'd suggest removing the first line and changing the second to $('#result')
I have two select boxes, one is for products and the other is for product type. what a appears in the product type list is dependent on what is selected in the product. What i want to achieve is a null option at the top of the loaded list so that i can search just on the product. How would i go about this?
so far i have
<select class="form-control" name="product_type" id="producttype">
<option value=""></option>
</select>
and JS/jquery
$('#product').on('change', function(e) {
console.log(e);
var prod_id = e.target.value;
$.get('/ajax-subcat?prod_id=' + prod_id, function(data) {
$('#producttype').empty();
$.each(data, function(index, subcatObj) {
$('#producttype').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');
});
});
});
You can append that default options before filling your select in the each, something like this:
$('#product').on('change', function(e) {
console.log(e);
var prod_id = e.target.value;
$.get('/ajax-subcat?prod_id=' + prod_id, function(data) {
$('#producttype').empty();
$('#producttype').append('<option selected disabled>Select a product type</option>');
$.each(data, function(index, subcatObj) {
$('#producttype').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');
});
});
});
I have a box with multiple checkboxes. I am selecting checkboxes and with that select I am generating a <span> Value (x) </span> on a different div. Now i want to uncheck the checkbox on click of (x) of that particular checkbox.
Example:
On selecting and deselecting the checkboxes the <span> Value (x) </span> is coming and going. but the inverse is not happening.
.reportbox is the class of the tile(checkbox).
#compareSection is the area where buttons are kept.
Code i am using:
<script type="text/javascript">
$('.reportBox').click(function() {
var selected = $('input[type=checkbox]:checked').map(function(_, el) {
selectedCheckbox = el.id;
var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, selectedCheckbox)' class='badge badge-notify close-badge'>x</span>";
return "<span id='elementPack'>" + element + "</span>";
}).get();
$("#compareSection").html(selected);
})
// this code is for removing the URLs
function removeReport(sender, selectedCheckbox) {
document.getElementById(selectedCheckbox).checked = false;
var div = sender.parentNode;
div.parentNode.removeChild(div);
}
</script>
<script>
$(function() {
$('.reportBox').click(function() {
var selected = $('input[type=checkbox]:checked').map(function(_, el) {
selectedCheckbox = el.id;
var element = '<p class="selectedReport">'+ $(el).val() + '</p>' + '<span data-target-box="'+el.id+'" class="badge badge-notify close-badge">x</span>';
return '<span id="elementPack">' + element + '</span>';
}).get();
$("#compareSection").html(selected);
});
$(document).on('click', 'span[data-target-box]', function(e) {
$('#'+$(this).data('target-box')).prop('checked', false);
$(this).remove();
});
});
</script>
On the line
var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, selectedCheckbox)' class='badge badge-notify close-badge'>x</span>";
You are using selectedCheckbox as a string meaning it will look for the variable when you click it, however the variable was never defined outside the first scope. You probably want to change it to the following:
var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, \'"+selectedCheckbox+"\')' class='badge badge-notify close-badge'>x</span>";
So that it calls removeReport(this, 'id_of_element') with the id as a string which can then be used in document.getElementById().
Here in my code i uses the jquery to load data from database with n-level performance .
But when i change the parent dropdown all next elements not going to remove please help.
Thank you in advance
$(document).ready(function() {
$(document).on('change', '#subcat', function() {
var id = $(this).val();
$(this).nextAll('.remove').remove();
var options = "<option value=0>--select subcategory--</option>";
$.ajax({
type: 'get',
url: '/category/' + id + '/dropDownDynamic',
success: function(responseText) {
if (responseText != "") {
$.each(responseText, function(index, value) {
options += '<option value=' + index + '>' + value + '</option>'
});
$('#subcatCustom').append('<div class="form-group marginRemove remove"><label class="col-sm-2 control-label">Select SubCategory:</label><div class="controls col-sm-5"><select name="parent" id="subcat" class="form-control">' + options + '</select></div></div>');
}
},
});
});
});
this line not working.
$(this).nextAll('.remove').remove();
Because they are not sibling of the current subcat element, they are siblings of current .remove so try
$(this).closest('.remove').nextAll('.remove').remove();
In your event handler this refers to the #subcat element, which is a descendant of .remove element, so we uses .closest() to find the .remove ancestor of this, then find that ancestor's next siblings
Note: ID of an element must be unique, so use subcat as a class instead of ID.
I'm trying to add a value of checked for specific elements.
function renderList() {
$.getJSON("/search", function(response) {
$.each(response, function(index, value) {
$('ul').append($('<li>')
.append(value.task)
.append('<input type="checkbox"/>')
.append('<span>x</span>'))
})
});
}
I would like to add a conditional statement for the checkbox value of "checked"
When I add .attr('checked', true), it is added to the li and not the checkbox.
You can do something like this:
function renderList() {
$.getJSON("/search", function(response) {
$.each(response, function(index, value) {
var checkedString = '';
if( value == 'something'){
checkedString = 'checked="checked"';
}
$('ul').append($('<li>')
.append(value.task)
.append('<input type="checkbox" ' + checkedString + '/>')
.append('<span>x</span>'))
})
});
you can try
$.each(response, function(index, value) {
var valueChecked = (value.checked)? ' checked ': '';
$('ul').append($('<li>' + value.task +
'<input type="checkbox" '+ valueChecked +' />' +
'</li>')
valueChecked get ' checked ' value if value.checked (the property choosed by you) is true;
there's no need to write .append('li') .... .append('
Hope this help you!