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);
Related
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
I got an array from json and I need to put each item in a <li> on my html
something like this :
names : {john, paul, ringo,george}
into <li>john</li>..
my code:
<div id="demo"></div>
script:
function onLocationsReceived(data) {
console.log("recievd");
for (var i = 0; i < data[0].Sensors.length; i++) {
var sensorNames = data[0].Sensors[i].Name;
document.getElementById("demo").innerHTML = sensorNames;
console.log(sensorNames);
}
}
on the concole.log it prints just fine..
document.getElementById("demo").innerHTML = '<li>' + sensorNames '</li>
something like that???
Using something like below
function onLocationsReceived(data){
var html="";
for (var i = 0; i < data[0].Sensors.length; i++) {
var sensorNames = data[0].Sensors[i].Name;
html+="<li>"+sensorNames+"</li>";
console.log(sensorNames);
}
document.getElementById("demo").innerHTML=html;
}
You can use syntax below
document.getElementById('demo').innerHTML ='<li>' + sensorNames + '</li>'
You should cache the iterative sensorNames into a var with the li and then replace the innerHTML:
var content = "",
sensorNames;
for (var i = 0; i < data[0].Sensors.length; i++) {
sensorNames = data[0].Sensors[i].Name;
content += "<li>" + sensorNames + "</li>";
}
document.getElementById("demo").innerHTML = content;
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 am unable Show Parsed Response from Xml Service in JQuery Mobile List View. I unable to get were the Problem is,what i have Tried is.
First i took all the Response to theXML var then iam Trying to append to ListView Which i have Dynamically Created in javaScript Code. Here is my Code,
function processXML(theXML) {
var nodeTree = theXML.documentElement.getElementsByTagName('Employee');
var output = "";
output += "<ul data-role='listview' class='ui-listview'>";
var length = nodeTree.length;
for (var i = 0; i < length; i++) {
var empName = nodeTree[i].getElementsByTagName('name')[0].firstChild.nodeValue;
var empFName = nodeTree[i].getElementsByTagName('Fathername')[0].firstChild.nodeValue;
var empAddr = nodeTree[i].getElementsByTagName('Address')[0].firstChild.nodeValue;
output += buildRow(empName, empFName, empAddr);
}
output += "</ul>";
document.getElementById('result').innerHTML = output;
}
function buildRow(empName, empFName, empAddr) {
var row = "<li><a href='#'>";
row += empName;
row += empFName;
row += empAddr;
row += "</a></li>";
return row;
}
$("result").html(output).trigger("create");
$(".ui-listview").listview('refresh');
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);
}