I send a ajax request to have the different option for my select tag.
$.ajax({
type: 'GET',
url: '/first_line_benefits',
data: { tablename: tablename },
success: function(data) {
var dataArray = data[0];
var ret = "";
for (var j = 1; j < dataArray.length; j++) {
ret += "<div class=\"filter_button col-md-4\">";
ret += "<select class=\"selectpicker\" multiple><option value='0' selected>Nothing selected</option>";
for (var i = 0; i < dataArray[j].length; i++)
{
ret += "<option>"+ dataArray[j][i] + "</option>";
}
ret += "</select></div>";
}
$('#filter').html(ret);
}
});
The problem is : nothing appears on the page.
But if I remove the selectpicker class, a basic multiple select appears.
I tried to instance the selectpicker on the JS
$('.selectpicker').selectpicker();
And I tried to show the selectpicker with the method "show"
$('.selectpicker').selectpicker('show');
EDIT :
Screenshot of the homepage (selectpicker class is here but nothing appears on the webpage
Browser console log
Related
I am trying to call my function in controller class from JavaScript with the parameter
success: function(data) {
var output = '';
$("#dropdwn_cari").html(output);
for (var i = 0; i < data.length; i++) {
var buku = data[i];
console.log(buku['value']);
output += "<a class='dropdown-item' href='<?= site_url('data/buku/" + buku['value'] + "')?>'><a/>";
$("#dropdwn_cari").html(output);
PHP is a server-side language it runs before the browser renders your page. You can not pass a value to a PHP function in the way you are trying, because the PHP will consider it as a string i.e buku['value']. PHP will not pick the value inside buku['value'].
I'm rewriting it for you to try it.
success: function(data) {
var output = '';
$("#dropdwn_cari").html(output);
for (var i = 0; i < data.length; i++) {
var buku = data[i];
console.log(buku['value']);
output += "<a class='dropdown-item' href='<?= site_url('data/buku/')?>" + buku['value'] + "'><a/>";
$("#dropdwn_cari").html(output);
Code: Fetch JSON and create cart contents. Create a list of each products info, and have a form required for each product to update qty
$.ajax({
url: "myurl",
type: 'POST',
dataType: "json"
}).done(function(response){
$.each(response,function(k,v){
//UL this products info list was here
var otions = '';
for( i=1; i<20; i++ ){
options += '<option value="'+i+'">'+i+'</option>';
}
var form = '<form action="myurl" method="post" accept-charset="utf-8"><label for="products_qty">Quantity</label>'
+'<select name="products_qty>'
+options
+'</select>'
+'<input type="hidden" name="row_id" value="17e62166fc8586dfa4d1bc0e1742c08b" />'
+'<input type="submit" name="submit_item" value="Update" /></form>';
$('#formWrapper').append(form);
});
});
The code runs well. In the for loop I need to add selected=selected to a particular option tag.How and where will this be added.
Can a if statement be achieved inside for loop?
var otions = '';
for( i=1; i<20; i++ )
{
if(i=7)
{
var select = 'selected="selected"';
}
options += '<option value="'+i+'" '+select+'>'+i+'</option>';
}
Ive seen the following link and tried adding their stuff just before my apped, and no luck.
set option "selected" attribute from dynamic created option
Try this changes,
var otions = '';
for( i=1; i<20; i++ ){
if(i==7){
options += '<option value="'+i+'" selected="selected">'+i+'</option>';
}
else
options += '<option value="'+i+'" +select+>'+i+'</option>';
}
The problem with your code:
var otions = '';
for( i=1; i<20; i++ )
{
if(i=7)
{
var select = 'selected="selected"';
}
options += '<option value="'+i+'" '+select+'>'+i+'</option>';
}
... is that select only exists inside the if statement, because that's where you're defining it.
So:
var otions = '';
for( i=1; i<20; i++ )
{
var select;
if(i=7)
{
select = 'selected="selected"';
}
else
{
select = "";
}
options += '<option value="'+i+'" '+select+'>'+i+'</option>';
}
Maybe this is what you want:
var select = i === 7 ? " selected='selected'" : '';
options += "<option value='"+i+"'"+select+'>'+i+'</option>';
i have the following ajax:
$.ajax({
type: 'POST',
url: myBaseUrl + 'Products/ajax_get_subcategories',
dataType: 'json',
data: {
id: id
},
success: function (data) {
var length = data.length;
var div_subcategory = $('#subcategory');
div_subcategory.html('');
div_subcategory.append(
"<select id='subcategory' name='data[Product][subcategory_id]'>"
);
for (var i = 0; i < length; i++) {
var id = data[i]['Subcategory']['id'];
var name = data[i]['Subcategory']['name'];
$('#subcategory').append(
"<option value=''+id>" + name + "</option>"
);
}
div_subcategory.append("</select>");
}
});
Now as you can see it appends a select into a div block.
But! there is a catch here is the output of the HTML after the ajax has been called:
div id="subcategory" class="subcategory">
<select id="subcategory" name="data[Product][subcategory_id]"></select>
<option +id="" value="">Telte</option>
<option +id="" value="">Toilet</option>
<option +id="" value="">Service</option>
<option +id="" value="">Borde</option>
<option +id="" value="">Stole</option>
<option +id="" value="">Lyd og lys</option>
</div>
As you can see it closes the select tag before adding the options.
Can anyone tell me why this is happening?
When you write:
div_subcategory.append("<select id='subcategory' name='data[Product][subcategory_id]'>");
jQuery will insert
<select id='subcategory' name='data[Product][subcategory_id]'></select>
And becasue div_subcategory will have the same id as the select you will be matching the div instead.
Instead I would write this by creating the html in a string and injecting it all at once.
var html += "<select id='subcategorysel' name='data[Product][subcategory_id]'>";
for (var i = 0; i < length; i++) {
var id = data[i]['Subcategory']['id'];
var name = data[i]['Subcategory']['name'];
html += "<option value=''+id>" + name + "</option>";
}
html += "</select>";
div_subcategory.append(html);
This snippet updates your code to use different ids and appends the html all in one go which should be quicker.
Try
change your success code
success: function (data) {
var length = data.length;
var div_subcategory = $('#subcategory');
div_subcategory.html('');
var select_append = "<select id='subcategory' name='data[Product][subcategory_id]'>";
for (var i = 0; i < length; i++) {
var id = data[i]['Subcategory']['id'];
var name = data[i]['Subcategory']['name'];
select_append += "<option value=''" + id + ">" + name + "</option>";
}
select_append += "</select>"
div_subcategory.append(select_append);
}
create a variable select_append and concatenate all your code in that and append that variable in the end.
Try
$(div_subcategory).find('select').append(...)
when you write this syntex
div_subcategory.append(
"<select id='subcategory' name='data[Product][subcategory_id]'>"
);
DOM automatically detects an HTML element like this
<select id='subcategory' name='xxx'></select>
and then you are appending other option elements after this
so solution is first make a string of an HTML and then append like
var html = "<select id='subcategory' name='data[Product][subcategory_id]'>";
for (var i = 0; i < length; i++) {
var id = data[i]['Subcategory']['id'];
var name = data[i]['Subcategory']['name'];
html += "<option value='' + id>" + name + "</option>";
}
div_subcategory.append(html);
I have a form based menu which automatically populates the select options with the contents of a primary-nav UL. It wonderfully increments the with dashes reflecting the positions of the menu.
However, it doesn't populate the with the HREFs of the links within the ULs.
This is the code that I have:
<script>
$(function() {
var options = '<option selected></option>';
$('#primary-nav').find('a').each(function () {
var text = $(this).text(),
depth = $(this).parent().parents('ul').length,
depthChar = '',
i = 1;
for (i; i < depth; i++) { depthChar += '– ';
}
options += '<option>' + depthChar + text + '</option>';
});
$('<select id=\'mobile-menu\' />').append(options).appendTo('#mobile-nav');
$("#primary-nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
</script>
I need to somehow add the below to the above so that when clicked the selected option goes to a url, and not a url based on the displayed value;
$("#primary-nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("#primary-nav select");
});
Can anyone advise me how I can do this?
Thank you.
You can just add the value attribute in your current code:
$('#primary-nav').find('a').each(function () {
var text = $(this).text(),
href = $(this).attr('href'),
depth = $(this).parent().parents('ul').length,
depthChar = '',
i = 1;
for (i; i < depth; i++) {
depthChar += '– ';
}
options += '<option value="'+href+'">' + depthChar + text + '</option>';
});
$('<select id=\'mobile-menu\' />').append(options).appendTo('#mobile-nav');
function buildOrder(data) {
var $fragment;
$fragment = $('<div/>');
for (var i = 0; i < data.length; i++) {
$fragment.append('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div></div>');
}
$('#review-section').append($fragment);
}
I essentially want to add a tag with 50 options being dynamically created using a for loop. But I'm not sure what the syntax would be to add it to the <div class="row-container"/> I know in php I would just throw the loop in the middle and echo the options, however that doesnt work in javascript.
EDIT:
It would look like this:
$fragment.append('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><select><option value="1">1</option> etc...</select><div class="clear"></div></div>');
You could pass a function to .append and do your loop there:
$("<div>").append(function() {
var $select = $("<select>");
for(var i = 1; i <= 50; i++) {
$("<option>").text(i).val(i).appendTo($select);
}
return $select;
});
// returns a jQuery object with one div element (with children):
// <div>
// <select>
// <option value="1">1</option>
// ...
// </select>
// </div>
Mixed into your code it would be along the lines of:
var $fragment = $("<div>");
for (var i = 0; i < data.length; i++) {
var $container = $("<div>").addClass("row-container")
.appendTo($fragment);
$("<div>").addClass("row cupcake-row")
.text(data[i].name)
.appendTo($container);
$("<div>").append(function() {
var $select = $("<select>");
for(var i = 1; i <= 50; i++) {
$("<option>").text(i).val(i).appendTo($select);
}
return $select;
}).appendTo($container);
$("<div>").addClass("clear")
.appendTo($container);
}
$("#review-section").append($fragment);
Try something like this
function buildOrder(data) {
var $fragment = $('<div></div>');
var options = [];
for (var i = 0; i < data.length; i++) {
options.push('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div></div>');
}
$fragment.html(options.join("\n"));
$('#review-section').append($fragment);
}
According to your posted code:
function buildOrder(data) {
var $fragment;
$fragment = '<div><div class="row-container">';
for (var i = 0; i < data.length; i++) {
$fragment += '<div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div>';
}
$fragment += '</div></div>';
$('#review-section').append($fragment);
}
But in your posted code doesn't match with your post title, where you mentioned about select tag and in your code you're trying with div.
If you want to create a select, then something like:
function buildOrder(data) {
var $fragment;
$fragment = '<div class="row-container"><select>'; // taking select within your div
for (var i = 0; i < data.length; i++) {
// adding options to select
$fragment += '<option value="'+ data[i].name +'">' + data[i].name + '</option>';
}
$fragment += '</select></div>'; // end select and div
$('#review-section').append($fragment);
}