Javascript array of object section if than else statement - javascript

Hey all this is the first time I've ran into this problem with javascript/jquery. Below I have a part of code that I am trying to place an IF/Than else statement in order order to decide what type of class I need to place into the DIV it creates:
Select3.Templates = {
dropdown: function (options) {
var extraClass = (options.dropdownCssClass ? ' ' + options.dropdownCssClass : ''),
searchInput = '';
if (options.showSearchInput) {
extraClass += ' has-search-input';
var placeholder = options.searchInputPlaceholder;
searchInput = (
'<div class="select3-search-input-container">' +
'<input class="select3-search-input"' + (placeholder ? ' placeholder="' + escape placeholder) + '"'
: '') + '>' +
'</div>'
);
}
return (
'<div class="select3-dropdown' + extraClass + '">' + searchInput + '<div class="select3-results-container"></div>' +
'</div>'
);
},
loading: function () {
return '<div class="select3-loading">' + Select3.Locale.loading + '</div>';
},
loadMore: function () {
return '<div class="select3-load-more">' + Select3.Locale.loadMore + '</div>';
},
multipleSelectInput: (
'<div class="select3-multiple-input-container">' +
'<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="select3-multiple-input">' +
'<span class="select3-multiple-input select3-width-detector"></span><div class="clearfix"></div>' +
'</div>'
),
[ect...ect..]
I'm trying to insert my if than else statement into the multipleSelectInput area but I am unsure how to go about doing that since it seems to be some type of array (or object array) or something I don't know what it's called :)?
If I place my if than else statement above the if (options.showSearchInput) { will that work within the multipleSelectInput area?
What I need to changed within the multipleSelectInput is:
'<div class="select3-multiple-input-container">' +
to
'<div class="select3-multiple-input-containerADMIN">' +
depending on the if statement else path.
So how can I insert the if than else statement where I need to?

You're defining an object literal (Select3.Templates), and multipleSelectInput seems to be a string property. You can't put statements into an object literal directly, but you can calculate a variable ahead of time and then set the property value to the value of that variable.
Example:
var multiSelectClass = "select3-multiple-input-container";
if (something == "admin")
multiSelectClass += "ADMIN";
Select3.Templates = {
// stuff
multipleSelectInput: '<div class="' + multiSelectClass + '"....."
}

Related

How to pass argument from parsed json value to onclick function?

We have a table with data. My goal is to pass an argument from parsed JSON value to another javascript function - named newStory(value['stories']) from onclick method.
Tried a lot of different methods with no success..
json[key]['date'] = '<span class="' + styleBlock + '">' + value['date'] + '</span>';
json[key]['category'] = '<span class="' + styleCatDefault + '">' + value['category'] + '</span>';
json[key]['subcategory'] = '<span class="' + styleSubcatDefault + '">' + value['subcategory'] + '</span>';
json[key]['stories'] = '<span>' + value['stories'] + '</span>';
Any help appreciated!
Edit:
Line with many quotes finally worked:
json[key]['stories'] = '<span>' + value['stories'] + '</span>';
Just add value in string like this:
var str = `${jsvar}`
json[key]['stories'] = `<span>` + value['stories'] + '</span>';
Or
json[key]['stories'] = `<span>${value['stories']}</span>`;

Regex.test is giving me an error

I have the following javascript...
$.post(url, data, function (json) {
var patt = new RegExp('/^\[{"dID":/');
if (patt.test(json)) {
//output json results formatted
} else {
//error so output json string
$('#diaryTable').replaceWith(json);
}
}, 'json');
Basically my json should either be a valid json which begins with
[{"dID":
or it will be
[{ the ex.Message from try catch exception... }]
Unfotunately I get the error JavaScript runtime error: Expected ']' in regular expression
I have check my RegEx /^[{"dID":/ at RegEx101.com with some test data and my test worked as expected. Any ideas anyone?
Ok thanks to all who tried to help... I think my explanation of the problem was not too clear...
I've fixed my issue by checking if I have a valid object... a valid object will have a dID value so I have used...
if (typeof json[0].dID != 'undefined') {
// valid object
var out = "";
var i;
var a = "N"
for (i = 0; i < json.length; i++) {
out += '<div class="dOuter' + a + '">';
out += '<div class="dInner">' + json[i].dDate + '</div>';
out += '<div class="dInner">' + json[i].dRef + '</div>';
out += '<div class="dInner">' + json[i].dTeam + '</div>';
out += '<div class="dInner">' + json[i].dCreatedBy + '</div>';
out += '<div class="dType ' + json[i].dType + '">' + json[i].dType + '</div>';
out += '<div class="dServer">' + json[i].dServer + '</div>';
out += '<div class="dComment">' + htmlEncode(json[i].dComment) + '</div></div>';
if (a == "N") {
a = "A";
} else {
a = "N";
}
}
$('#diaryTable').replaceWith(out);
}
else {
//error so output json string
$('#diaryTable').replaceWith(json);
}

Javascript html gallery

Im editing/creating the following script for my website.
As you can see below I want him to add a <div class="row"> at the start of every row. (Hard to explain).
Then with the var "getal" I want him to END this DIV tag after 4 items in it (4x the foreach loop)
But the way I'm trying to do it with the If loops is not working. Any ideas? (The code is working fine without the <div class="row">, if loops and var getal.
function show_albums (response) {
var getal = 0;
//hide main loader
$('#loading_gallery').hide();
$.each(response.data, function(key, value) {
//create html structure
//rijen teller
if (getal = 0 ) {
var html = '<div class="row">';
$('#albums').append(html);
}
//albums
var html = '' +
'<div class="col-lg-3 col-md-3 col-xs-3 thumb" id="album_' + key + '"> ' +
'<img class="img-thumbnail" id="album_cover_' + key + '" />' +
'<img id="loading_' + key + '" src="images/ajax-loader.gif" />' +
'<h2>' + value.name + '</h2>' +
'<p>' + value.count + ' foto's</p>' +
'</div>';
getal++;
if (getal = 4) {
var html = '</div>';
$('#albums').append(html);
getal = 0;
}
$('#albums').append(html);
}
}
You are using the assignment operator = instead of the comparison operator == in your if statements. Try replacing those.

Remove code duplications

I have some simple code. The problem im facing is that how you can see the code is not very clean because in every line where a string gets added to var text i would like to check if the data i want to add really is defined. Now i would like to know how i can write this more cleaner? Thanks
var text = '<br><address><strong>' + data.vorname + ' ' + data.name + '</strong><br>';
if(data.strasse != null && data.strasse != ''){
text += data.strasse + '<br>' + data.plz + ', ' + data.wohnort ;
}if(data.telefon != null && data.telefon != ''){
text += '<br><strong>Tel: ' + data.telefon + '</strong>';
}
text += '<br><strong>Handy: ' + data.handy + '</strong><br>';
text += '<a href="mailto:#">' + data.mail;
text += '</a></address><address><strong>GEB: </strong>';
text += Data.datum(data.geburtsdatum) + '<br>';
text += data.gewicht + '<strong> GK';
........
You could rewrite your lines like this:
text += (data.handy)? '<br><strong>Handy: ' + data.handy + '</strong><br>' : '';
This is shorthand for this:
if (data.handy) {
text += '<br><strong>Handy: ' + data.handy + '</strong><br>';
} else {
text += '';
}
That way, if data.handy isn't defined or is null then nothing gets added to text.

Making multiple elements with jquery each() and jquery function

Well, I have a table with multiple text nodes I'm getting through the .text() function and linking to another table with one row that I'm using as a timeline.
I tried to input in a single td of the text values that corresponds to the correct data, but I only managed to grab the last value I in my loop, instead of getting them all. Here is my code:
var tHold, divLine, id, dataTitle, dataDescription;
$(".class1").each(function(){
tHold = $(this);
$(".class2").each(function(){
if ($(this).text() == tHold.attr("value")){
if($('#1').children("div#" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="' + tHold.attr("name") + '" class="b" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#1").append(divLine);
}
if($('#2').children("div#id" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="des' + tHold.attr("name") + '" class="c" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#2").append(divLine);
}
}
});
});
It's been simplified and cut out of a whole context , but all that matters is there. How can I set dataDescription to be multiple divs with diferent values instead of just the last I loop through?

Categories