I'm storing a value inside a javascript variable, now I want to run a if statement to change the data-icon on a select option.
<script type="text/javascript">
$(document).ready(function(){
$("#fds_gender").change(function () {
var gender = $(this).val();
$.ajax({
type: "POST",
data: {
"username" : "<?php echo $user->username; ?>",
"gender" : gender
},
url: "ajax/fds_categories_ajax.php",
success: function(data){
$("#fds_categories").empty();
$.each($.parseJSON(data), function(index, element) {
if(element.p == 0){
$("#fds_categories").append(
$('<option data-icon="man"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
);
}else{
$("#fds_categories").append(
$('<option data-icon="man"></option>').val(element.id).html(element.name + ": " + element.p + ' Zcard')
);
}
});
}
});
});
});
</script>
gender does contains one of the following values: stud or babe.
What I want to create:
In case gender contains stud:
$('<option data-icon="man"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
In case gender contains babe:
$('<option data-icon="babe"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
What I have tested:
$('<option data-icon="' + if(gender == 'stud'){}else{} + '"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
Just got no clue how to echo out a value such as man or woman. Is there such a Javascript echo function as in PHP?
You can use ternary operator.
$('<option data-icon="' +( (gender == 'stud')?'man':'babe')+ '"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
Related
I have two loops:
table loop: fills the table rows
dropdown loop: fills the dropdowns with typeid.data[i].TypeId, add a select in the last dropdown
My dropdown does not fill according to its record and I don't understand why.
var QuestionId = data[i].QuestionOid;
var fkid = data[i].FkSource;
var selectdata = data[i];
var selectinnerhtml = "<span><select id = \"answer" + QuestionId + "\" name = \"answer" + QuestionId + "\" class=\"answer" + QuestionId + " form-control input-small\" > </select></span>";
$.ajax({
type: "GET",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: '/MYaPI/EmployeeDetails/' + data[i].TypeId,
success: function(datasa) {
var optionhtmls = '<option value="' +
0 + '">' + "--Select--" + '</option>';
$(".answer" + QuestionId).append(optionhtmls);
$.each(datasa, function(j) {
var optionhtmls = '<option value="' +
datasa[j].Oid + '">' + datasa[j].Title + '</option>';
$(".answer" + QuestionId).append(optionhtmls);
});
}
});
var newRows2select = "<tr class='rows'><a href = '' >" +
" <td QuestionCategoryTitle = " + selectdata.QuestionCategoryTitle + " QuestionHeader = " + selectdata.QuestionHeader + " ContentTypeId=" + selectdata.FkSource + " QuestionTypeId=" + selectdata.FkQuestionType + " QuestionOID=" + selectdata.QuestionOid + " CategoryOID=" + selectdata.FkQuestionCategory + " class=\"question-block\"><small style=\"color:slateblue;font-weight: bolder;display:none\">CATEGORY: " + selectdata.QuestionCategoryTitle + ",</small>" +
" <i class=\"deleteRow fas fa-trash float-right\"></i> " +
"<p> " + selectdata.QuestionHeader + "</p>" + selectinnerhtml + " </td></a> \"</tr>";
$("#table23").append(newRows2select);
I don't know the jQuery way, however it is easily achievable with plain JavaScript
var select = document.createElement("select");
var selectinnerhtml = document.createElement("span");
selectinnerhtml.appendChild(select);
$.each(datasa, function(j) {
//create a new option element
var option = document.createElement("option");
//set the value attribute
option.setAttribute("value", datasa[j].oid);
//fill the HTML tag
option.value = datasa[j].Title
//add the option to the select dropdown
select.add(option);
});
I have a problem with this code :
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function update() {
$.ajax({
type: 'GET',
url: "http://192.168.4.2/home/api/stato/ambiente/living",
dataType: "json",
success: renderList
}).then(function() {
setTimeout(update, 200);
});
})();
function renderList(data) {
var list = data == null ? [] : (data instanceof Array ? data : [data]);
$.each(list, function(index, data) {
if (data.stato ==1) {
$('#statoList').append('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_on.png " + '</div>');
$('#Switch').append('<button type="button">' + " OFF " + '</button>');
}
else {
$('#statoList').append('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_off.png " + '</div>');
$('#Switch').append('<button type="button">' + " ON " + '</button>');
}
});
}
</script>
</head>
<body>
<div id="statoList"></div>
<div id="Switch"></div>
</body>
</html>
I wish to execute a DIV refresh every 200 ms but the problem is that each time creates a new DIV below the previous one.
How can I solve this?
Thank you.
the append function is not the right one for what you are expecting i suggest you to use .html() so it will translate all your code (new div) to an html code
function renderList(data) {
var list = data == null ? [] : (data instanceof Array ? data : [data]);
$.each(list, function(index, data) {
if (data.stato ==1) {
$('#statoList').html('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_on.png " + '</div>');
$('#Switch').html('<button type="button">' + " OFF " + '</button>');
}
else {
$('#statoList').html('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_off.png " + '</div>');
$('#Switch').html('<button type="button">' + " ON " + '</button>');
}
});
}
If there are more than one of each type empty() the containers before appending
$('#statoList').empty();
$.each(list, function(index, data) {
if (data.stato ==1) {...
I have the rss titles going into a dropdown box and they change when each one is clicked on but i want about 4 rss feeds showing on the page so i dont need the dropdown box.
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "rss_warriors.php",
dataType: "xml",
cache: false,
success: parse_rss
});
function parse_rss(rss_feed)
{
console.log(rss_feed);
$('#output').append('<select>');
$(rss_feed).find("item").each(function()
{
$('select').append('<option value="' +
$(this).find('title').text() + '">' +
$(this).find('title').text() + '</option>');
});
line_record(0,rss_feed);
$("select").on("change", function(evt)
{
line_record( $("select option:selected").index(),rss_feed)
});
}
function line_record(sel_index,rss_feed)
{
var local_index = sel_index;
var image_url;
var item_title;
var item_description;
var item_pubDate;
image_url = $(rss_feed).find("item").eq(local_index).find("thumbnail").last().attr("url");
item_title = $(rss_feed).find("item").eq(local_index).find("title").text();
item_description = $(rss_feed).find("item").eq(local_index).find("description").text();
item_pubDate = $(rss_feed).find("item").eq(local_index).find("pubDate").text();
$("#img_warriors").empty();
$("#txt_warriors").empty();
$("#img_warriors").append("<img src='" + image_url + "'>");
$("#txt_warriors").append("<span class='title_large'>" + item_title + "</span>");
$("#txt_warriors").append("<p>" + item_description + "</p>");
$("#txt_warriors").append("<p>" + item_pubDate + "</p>");
}
});
Not sure if it is what you mean, but what about :
$(rss_feed).find("item").each(function(i) {
if (i <=3) {
$('select').append('<option value="' +
$(this).find('title').text() + '">' +
$(this).find('title').text() + '</option>');
}
});
I have 2 select.
<select name="paketart" id="paketart">
<!--Via Jquery-->
</select>
<select name="terminart" id="terminart">
<!--Via Jquery-->
</select>
And the Javascript code.
$(document).ready(function() {
$("#kundenselectid").change(function() {
$('#terminart').empty();
$('#paketart').empty();
$.getJSON( "/Daten/GetPakete.php", {id : $('#kundenselectid').val()},function( data ) {
var first = true;
$.each( data, function( key, val ) {
if (first)
{
$('#paketart').append('<option value="' + val['geId'] + '" selected>' + val['paName'] + ' - ' + val['Rest'] + '</option>');
$.getJSON( "/Daten/GetTerminart.php", {id : $('#paketart').val()},function( data ) {
$.each( data, function( key2, val2 ) {
$('#terminart').append('<option value="' + val2['taId'] + '">' + val2['taName'] + ' - ' + val2['taDauer'] + '</option>');
});
});
} else {
$('#paketart').append('<option value="' + val['geId'] + '">' + val['paName'] + ' - ' + val['Rest'] + '</option>');
}
});
});
$('#terminart').selectmenu('refresh', true);
$('#paketart').selectmenu('refresh', true);
});
});
But the Problem is it doesn't select the first option.
The options are added but I cant select them.
Any suggestions?
have big problem.
have jquery multiselect plugin from here
$.ajax({
url: 'my url',
type: 'post',
data: {'data': data1, 'data2': 'data2'},
dataType: 'json',
success: function(data){
if(data.length >= 1){
$('#selector').find('option').remove();
$.each(data, function(key, value) {
if ($("#selector option[value='" + value.email + "']").length == 0){
$("#selector").append('<option value="'+ value.email +'" data-id="'+value.id+'" data-name="' + value.name + '" data-surname="' + value.surname + '">'+ value.name + ' ' + value.surname + ' ' + ' (' + value.email + ') sent (' + value.sent + ')' +'</option>').multiselect("destroy").multiselect( { sortable : false } );
}
});
}else{
$('#selector').find('option').remove();
$('#selector').append('').multiselect("destroy").multiselect( { sortable : false } );
}
}
});
and after change (call this function, whitch selecting cantacts from other list) my selected values disapears