I am generating a clickable list dynamically using jquery. here is the code that generates the list.
for(dayint=0;dayint < day_arr.length;dayint++){
var temp_pass = JSON.stringify(day_arr[dayint]);
//alert(temp_pass);
$("#itin_list").append('<b>Day '+ dayint + ' of Trip from '+ start_n +' to '+ end_n +' </b> <button data-toggle="modal" data-target="#dirModal" style="position:absolute;bottom:5px; right:5px;float:right" class="btn btn-primary">Show Directions</button><br>');
}
The problem I have is when passing the json array to my sethidddendiv function. The code sample for the function is as below:
window.sethiddendiv = function(str) {
//var nisal = $.parseJSON(str);
alert(str);
}
When the list item is clicked, instead of giving the json array, it alerts "undefined" all the time.
Here is the html that is generated in the page when I inspect element:
<b>Day 0 of Trip from Colombo to Kandy </b> <button data-toggle="modal" data-target="#dirModal" style="position:absolute;bottom:5px; right:5px;float:right" class="btn btn-primary">Show Directions</button>
What could be the issue here?
I already tried using single quotes for the onclick, but it didnt work. Any help would be very welcome. I'm stuck.
Related
I have the following HTML:
<div class="dropdown" data-offers-filter-segments="">
<button class="toggle--dropdown" name="toggle-segment-cagetories-list">
<span class="dropdown__label" id="dropdown__labelAllCategories">All Categories</span>
</button>
<div class="dropdown__content" hidden="hidden">
Which renders a dropdown, when clicked a new class is appended which is called is-dropped so the parent div will look like this once its been clicked on class="dropdown is-dropped"
Now using Javascript I'm trying to retrieve name="toggle-segment-cagetories-list" which we will use within DTM (Adobe Tag Manager) as an eVar value but I'm uncertain how I go about retrieving that name value, so far I have the following javascript:
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
if(hasClass(document.getElementsByClassName('dropdown')[0], 'is-dropped')){
// Now get the name value ?
}
else {
alert("false");
}
Now I'm pretty new to javascript so if someone can shed some light in how I go about getting the name value and passing it to DTM I would highly appreciate it.
use document.querySelector:
<div class="dropdown is-dropped" data-offers-filter-segments="">
<button class="toggle--dropdown" name="toggle-segment-cagetories-list">
<span class="dropdown__label" id="dropdown__labelAllCategories">All Categories</span>
</button>
<div class="dropdown__content" hidden="hidden">
<script>
var button=document.querySelector('div.is-dropped button.toggle--dropdown');
var name=button&&button.name||'';
alert(name);
</script>
if you want to use your own data-attributes, you need start your attribute name with 'data':
<button class="toggle--dropdown" data-name="toggle-segment-cagetories-list">
In order to retrieve the value of the attribute, you can do as shown in the example below:
var article = document.getElementsByClassName('toggle--dropdown');
article[0].dataset.name // article[0] because getting elements by className returns an array
I have commas between my HTML buttons and i don't know where they come from.
The div in which i create the buttons is empty before the buttons are being created.
In my JavaScript, i don't have any commas that could be put between the buttons as you can see below.
Here is a picture:
I create the buttons with JavaScript like so:
var f = "'";
contents[0]='<button class="btn" onclick="check('+ f + randomChar0 + f +');">' + randomChar0 + '</Button>';
contents[1]='<button class="btn" onclick="check('+ f + randomChar1 + f +');">' + randomChar1 + '</Button>';
contents[2]='<button class="btn" onclick="check('+ f + randomChar2 + f +');">' + randomChar2 + '</Button>';
ranNum0 = randomize(2);
document.getElementById("response").innerHTML = contents;
My HTML looks like this before i insert the buttons:
<div id="response" class="center-children">
</div>
And like this after i insert the buttons:
<div id="response" class="center-children">
<button class="btn" onclick="check('B');">B</button>,
<button class="btn" onclick="check('S');">S</button>,
<button class="btn" onclick="check('E');">E</button>
</div>
If i check in the Browser, it looks like this:
I checked my whole JavaScript, even tried to delete all the CSS and HTML but the commas remain there...
Does anyone have a clue what might cause this?
The problem is that you are assigning the string value of your array to .innerHTML and the string value of an array has commas between the elements.
In order to combine the values in your array, use .join():
document.getElementById("response").innerHTML = contents.join('');
Or better yet, don't use string manipulation to create DOM elements.
You're setting innerHTML to be an array, but it's supposed to be a string. Implicitly, .toString() is being called on your array, which leaves commas. Try it out, [1,2,3].toString() evaluates to "1,2,3".
I am trying to workout the following JavaScript if statement:
<script>
if ($crs_date2 != '0000-00-00'){
document.write('No other course date available');
} else {
document.write(<button class='btn btn-danger data-toggle='modal' id='actionButtonOrange'>$crs_date2</button>);
}
</script>
I am encountering two issues:
The button is not being displayed.
the function does not seem to be working as intended.
Essentially what would happen is that if no date is available (by default it displays 0000-00-00 if no date is available but it is not aesthetically pleasing), the JavaScript message appears.
You are missing delimiters around the string:
document.write("<button class='btn btn-danger data-toggle='modal' id='actionButtonOrange'>" + $crs_date2 + "</button>");
To shorten up the post this is all the info needed for my problem, so i made a button that gives +1 rating and a button for -1 rating when clicked and this is its HTML code,
<p>
<strong>Rating: </strong> {{ album.rating }}
<button class="btn btn-small" ng-click="upVoteRating(album)">+</button>
<button class="btn btn-small" ng-click="downVoteRating(album)">-</button>
</p>
Nothing unusual, heres the angularjs code using scope and the function for the button.
$scope. upVoteRating = 'upVoteRating';
$scope. downVoteRating = 'downVoteRating';
function upVoteRating(album) {
album.rating++;
}
function downVoteRating(album) {
if (album.rating > 0)
album.rating--;
}
So theres no problem with the code by my guessings but everytime i click the button on my page, it says this on the console:
"TypeError: string is not a function
at http://localhost:1234/lib/angular/angular.min.js:168:37
at http://localhost:1234/lib/angular/angular.min.js:186:167
at g.$eval (http://localhost:1234/lib/angular/angular.min.js:104:308)
at g.$apply (http://localhost:1234/lib/angular/angular.min.js:105:48)
at HTMLButtonElement.o.event.dispatch (http://localhost:1234/lib/jquery-2.1.0.min.js:3:6055)
at HTMLButtonElement.r.handle (http://localhost:1234/lib/jquery-2.1.0.min.js:3:2830) angular.js:9507"
I've got no idea how to fix this, i've been looking for an hour, so please, if you need more code to help you out to find the problem out ask right away!
Thanks again!
You're setting it as a string here:
$scope.upVoteRating = 'upVoteRating';
and trying to call it as a function here
<button class="btn btn-small" ng-click="upVoteRating(album)">+</button>
Remove the quotes in the controller and you should be good:
$scope.upVoteRating = upVoteRating;
$scope.downVoteRating = downVoteRating;
I'm developing a webpage with a form that is created dynamically by means of javascript (jquery). For each (repetitive) set of form elements a Show/hide function is added to show and hide the elements, and I dont get this show/hide code working - I suspect the error is located as indicated within the code below, and I think I struggle to put the quotes at the right place (?) The console indicates an error "Uncaught SyntaxError: Unexpected token } " which I dont understand; when excluding the suspected erroneous line there are no further errors and I dont see where this '}' shows up where it's not supposed to show up.
Javascript code:
function ShowHide(id) {
$(id).toggle();
}
$(document).ready(function () {
var buildform = function () {
var form ='<div id="form">'
for (var i = 0; i < 2; i++) {
form += '<div id="filename"' + i + '> Document </div> </td>';
//error in next line (?)
form += '<button onclick="ShowHide(\'#filename'+ i +'\')"> Show/hide document </button> </td> </tr>';
} //for i
form += '</div>'; //id="form"
console.log('FORM: '+form);
return
} //buildform()
$("#wrapper").append(form);
}); //$(document).
HTML code:
<div id="wrapper"></div>
Output by javaconsole():
<div id="form"><div id="filename"0> Document </div><button onclick="ShowHide('#filename0')"> Show/hide document </button></div><div id="filename"1> Document </div><button onclick="ShowHide('#filename1')"> Show/hide document </button></div>
You're quotes are wrong.
form += '<td> <button onclick="ShowHide(\'#filename'+ i + '\')"> Show/hide document </button> </td> </tr>';
I matched the quotes in parenthesis, and escaped them with \. Also, you're saving your created html, but never show anywhere that it would actually output the html to the page. You need to actually output the information created. For example:
The HTML:
<div ="outputContainer"></div>
Inside your function:
$("#outputContainer").html(form);
Escape the quotes correct
Please change the line:
form += '<td> <button onclick="ShowHide("#filename'+ i +')"> Show/hide document </button> </td> </tr>';
to this:
form += '<td> <button onclick="ShowHide(\'#filename'+ i +'\')"> Show/hide document </button> </td> </tr>';
^ ^