I'm working on a school project for a digital menu for a restaurant. What I've done so far is this Pop-UP:
It shows up when a button is pressed and I also added an 'X' icon to close it. The problem is that it's static and this is how I store it inside the index.html file:
<div class="menu">
<h2>Our Menu</h2>
<ul>
<li>
<label>
<input type="checkbox" name="">
<span class="icon"></span>
<span class="list">Fried Fish With Souce</span>
</label>
</li>
</ul>
</div>
As you can see, the data is stored in a static way and the problem is that I must have Pop-UPS for a lot of other categories. A solution would be to use Javascript to create the Pop-UP:
function showMenu()
{
const storedMenu = [{name: "Fried Fish With Souce", checked: false}, {name:"anotherName", checked: false}];
var content=`<div class="menu"><h2>Our Menu</h2>`;
storedMenu.reduce((accumulator, currentItem) => {
accumulator += `<ul><li><label>
<input type="checkbox" name="">
<span class="icon"></span>
<span class="list">${currentItem.name}</span>
</label><li><ul>`;content+=accumulator;
}, '' );
content+="</div>";
document.write(content);
}
This is the OUTPUT from the source code above:
The problem is that document.write seems to create a whole new page and thus, the CSS doesn't get applied, it OVERWRITES the index.html! My question is, how can I create the Dynamic Pop-UP using Javascript in this case but retaining the CSS, also the Pop-UP should simply appear on top of the index.html, but it should still be visible.Thanks in advance!
document.write only works during rendering of the page.
If you want dynamic lists, then use (example)
<div id="docwrite"></div>
<script>
var str = "<ul><li>abc</li><li>klm</li><li>xyz</li></ul>";
document.querySelector("#docwrite").innerHTML = str;
</script>
Related
I am new in Javascript and trying to change the HTML content of a line.
I've been helped a little by a friend who made this code for me, but I'm running into major issues.
The situation is:
I'm creating a FAQ in SharePoint 2013, and this code is supposed to read a list, read 3 informations (Category, Question and Answer) and then substitute the HTML where I want it to.
The issue is that it is running on every '.cd-faq__trigger' that is inside it's "i.category", changing them all to the same "i.question"
function ChangeHTML(){
var items = GetListItems("X", "Y", "Z")
items.forEach(function(i){
$('#'+i.category+' .cd-faq__trigger').html(i.question)
});
}
}
-----------------HTML ------------------
<div class="cd-faq__items">
<ul id="Compras_TI" class="cd-faq__group">
<li class="cd-faq__title"><h2>Compras TI</h2></li>
<li class="cd-faq__item">
<a id="trigger" class="cd-faq__trigger" href="#0"><span id="texto"></span></a>
</li>
</ul>
</div>
Finally figured out how to do it... Made the script write the whole HTML from scratch and then no need to substitute nothing.
SCRIPT:
function AddCategory(){
var items = GetListItems("ListID", "caml", "url")
items.forEach(function(i){
$('#'+i.Categoria).append('<li class="cd-faq__item"><a id="trigger" class="cd-faq__trigger trigger" href="#0"><span>'+i.Pergunta+'</span></a><div class="cd-faq__content"><div class="text-component"><p>'+i.Resposta+'</p></div></div></li>')
});
}
'i.Categoria' = each category from the list.
'i.Pergunta' = each question posted on the list.
'i.Resposta' = each answer posted on the list.
HTML:
<div class="cd-faq__items">
<ul id="Compras_TI" class="cd-faq__group">
<li class="cd-faq__title"><h2>Compras TI</h2></li>
</ul> <!-- cd-faq__group -->
</div>
So it looks for the Category of the post, and inside of it it appends the HTML adding in it the question and answer posted.
Thank you for who helped!
I have a form.
Please note I must use divs for creating the form drop down and not the select option method etc. It just has to be done that way. The code is below.
<form action="url.asp" method="get">
<div class="search-button"><i class="fa fa-search"></i><input type="submit" /></div>
<div class="search-drop-down">
<div class="title"><span>Choose Category</span><i class="fa fa-angle-down"></i></div>
<div class="list">
<div class="overflow">
<div class="category-entry" id="Category1">Category One</div>
<div class="category-entry" id="Category2">Category Two</div>
</div>
</div>
</div>
<div class="search-field"><input type="text" name="search-for" id="search-for" value="" placeholder="Search for a product" /></div>
<input type="hidden" id="ChosenCategory" name="ChosenCategory" value="CATEGORY1 OR CATEGORY2 (WHICHEVER SELECTED)" />
</form>
As shown in the code above I need to populate the hidden field value as per the chosen option which the user selects in the drop down.
I have used about 20 different variations of getElementById or onFocus functions but cannot get it to work.
The only thing I can get to work is the following JavaScript and it just populates the hidden field value with the first id ignoring completely which one has actually been selected(clicked) by the user;
var div = document.getElementById('DivID');
var hidden = document.getElementById('ChosenCategory');
hidden.value = div.innerHTML;
I'm running classic asp so if there is a vbscript way then great, otherwise if I have to use JavaScript to do it then as long as it does the job I'll be happy still.
A click handler on the options could be used to update the value.
No jQuery or any other external library is needed. Below is a working example. Of course, in your case the input element could be of type hidden, but I made it text here for the sake of demonstration.
//Add the click handlers
var options = document.getElementsByClassName('option');
var i = 0;
for (i = 0; i < options.length; i++) {
options[i].addEventListener('click', selectOption);
}
function selectOption(e) {
console.log(e.target);
document.getElementById('output').value = e.target.id;
}
div {
padding: 10px;
}
div.option {
background-color: #CCC;
margin: 5px;
cursor: pointer;
}
<div>
<div class="option" id="Category1">Category One</div>
<div class="option" id="Category2">Category Two</div>
</div>
<input type="text" id="output" />
You should be able to achieve what you're after with a fairly simple setup involving listening for clicks on two separate <div> elements, and then updating an <input> based on those clicks.
TL;DR:
I've put together a jsfiddle here of what it sounds like you're trying to make work: https://jsfiddle.net/e479pcew/5/
Long version:
Imagine we have 2 basic elements:
A dropdown, containing two options
An input
Here's what it might look like in HTML:
<div class="dropdown">
<div id="option-one">Option 1</div>
<div id="option-two">Option 2</div>
</div>
<input type="text" id="hidden-input">
The JavaScript needed to wire these elements up should be fairly easy, but let me know if it doesn't make sense! I've renamed things throughout to make things as explicit as possible, but hopefully that doesn't throw you off.
One quick thing - this is an incredibly 'naive' implementation of this idea which has a lot of potential for refactoring! However I just wanted to show in the most basic terms how to use JavaScript to make this stuff happen.
So here we go - first things first, let's find all those elements we need. We need to assign variables for the two different dropdown options, and the hidden input:
var optionOne = document.getElementById("option-one");
var optionTwo = document.getElementById("option-two");
var hiddenInput = document.getElementById("hidden-input");
Cool. Next we need to make a function that will come in handy later. This function expects a click event as an argument. From that click event, it looks at the id of the element that was clicked, and assigns that id as a value to our hiddenInput:
function valueToInput(event) {
hiddenInput.value = event.target.id;
}
Great - last thing, let's start listening for the clicks on specific elements, and if we hear any, we'll fire the above valueToInput function:
optionOne.addEventListener("click", valueToInput, false);
optionTwo.addEventListener("click", valueToInput, false);
That should get you going! Have a look at the jsfiddle I already linked to and see if it makes sense - get in touch if not.
Are you allowed to use JQuery in this project? It would make your life a lot easier. You can detect when a div is clicked and populate the hidden field.
This could do it:
$(document).ready(function() {
$('.category-entry').click(function() {
$('#ChosenCategory').val($(this).text()); }); });
I have a setup that I have replicated here:
http://codepen.io/anon/pen/EjrPbV
<div id="fac_content">
<input class="search" placeholder="Search">
<ul class = "list" id="fac_list" style="display: block;">
<li>
<p class="fac_name">CheckOneTwo</p>
</li>
<p></p>
<li>
<p class="fac_name">FiveThreeOne</p>
</li>
<p></p>
</ul>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script>
var options = {
valueNames: [ 'fac_name']
};
var userList = new List('fac_content', options);
</script>
The problem is that when I am implementing it in my website, when I enter in the search field, everything inside of <ul></ul> gets deleted, no matter the character I input. I realize that there must be something else that is causing this in my code, the question is, what could cause code to be deleted? Note that the list elements are being generated on startup in my website using AJAX and the innerHTML property.
Note, for me, I get an error:
Uncaught TypeError: Cannot read property 'values' of undefined
Same answer as found here: Why are some rows disappearing when I sort or filter listjs table
(Referencing answer by brymcbride)
Issue was that I was making the list in listjs before the AJAX call. When I put the code right after the call was being made, everything worked out perfectly!
At work I'm just starting out with JavaScript, MVVM, and Kendo's JS framework, all at once, and I have a fairly simple problem.
I've created a View Model that allows Superheroes to be registered.
The JSBin I'm working in: http://jsbin.com/gewu/3/edit?html,js,output
Here's the HTML(view):
<div id="view">
Superhero: <input data-bind="value: name" /><br/>
Superpower: <input data-bind="value:power"type="text">
<label for="">from Earth?<input type="checkbox" data-bind="checked:fromEarth"></label>
<button data-bind="click: registerHero" >Display User Info</button>
<div id="array-display"></div>
<p>Entries: <span data-bind="text: knownHeroes.length"></span></p>
</div>
And here's the JS (viewModel):
var viewModel = kendo.observable({
knownHeroes : [],
name: "Hulk",
power:"Stength",
fromEarth: true,
registerHero: function() {
var name = this.get("name");
var power = this.get("power");
var fromEarth = this.get("fromEarth");
this.knownHeroes.push({"name":name,"power":power,"fromEarth":fromEarth});
}
});
kendo.bind($("#view"), viewModel);
Now, I'm trying to get the View to loop through and display the array of knownHeroes. But it won't render anything. I know the data is being pushed to the array, because I can see the array.length increasing, and I can look up specific values in the array. I'm assuming the problem has to do with how I'm referencing the array in the view. But I'm not sure. Here's the template I've written:
HTML:
<script id="registry-view" type="text/x-kendo-template">
<ul>
# for (var i=0; i < knownHeroes.length; i++) { #
<li>
<ul>
<li>#= knownHeroes[i].name #</li>
<li>#= knownHeroes[i].power #</li>
<li>#= knownHeroes[i].fromEarth #</li>
</ul>
</li>
# } #
</ul>
</script>
<script type="text/javascript">
var template = kendo.template($("#registry-view").html());
$("#array-display").html(template); //Append the result
</script>
You have got some mistakes.
First of all you got script wrote in html portion of this jsbin as well as in javascript section. Html part executes first so the viewModel isn't defined yet (check console for errors)
Also the object you pass to the template is stored always in "data" variable.
Last mistake is when using your desing, anytime you add any new data row, whole template needs to be reloaded (including all previously added data rows)
I corrected some of your mistakes in following jsbin: http://jsbin.com/jomemuko/1/edit (actually you need to hit the Run with JS button to make it work - some script loading issue I don't have time for)
Ideally you should use a listView widget and assign it a template for only one item. Also in your viewModel you should create a kendo dataSource and pass it as an option to newly created listView. Then in the viewModel you should refine your registerHero function to make it add the hero to the dataSource. Widget should automatically refresh.
Hope it helps
I'm trying to hide and show HTML Elements by using javascript. It all works well, but the result isn't longer available then 1 Second. After one second, the element, that is displayed by default appears and the element that should be shown is hidden.
Here below I posted my sample code. I created an element called selected, that keeps a value, that tells which paragraph is actually shown. If I click on next, I want the next Paragraph to be shown.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<selected id="displayedResults" value="0">
</selected>
<div>
<p id="results_0" style=""> Result 0 </p>
<p id="results_1" style="display: none;"> Result 1 </p>
<p id="results_2" style="display: none;"> Result 2 </p>
<p id="results_3" style="display: none;"> Result 3 </p>
<p id="results_4" style="display: none;"> Result 4 </p>
<p id="results_5" style="display: none;"> Result 5 </p>
<a onclick="previousResults()" href="">Previous</a>
<a onclick="nextResults()" href="">Next</a>
</div>
<script type="text/javascript">
function previousResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index>0)
{
document.getElementById(rslString.concat(index)).style.display='none';
index=index-1;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
<script type="text/javascript">
function nextResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index<5)
{
document.getElementById(rslString.concat(index)).style.display='none';
index++;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
</body>
</html>
Your links are reloading the page when you click on them, so you're seeing the results of your JavaScript, then the page reloads and it resets back to the starting state. The simplest solution would be to modify your HTML for the <a> elements to this:
<a onclick="previousResults(); return false;" href="">Previous</a>
<a onclick="nextResults(); return false;" href="">Next</a>
The return false will prevent the default behaviour of that action - in this case following the link - thereby preventing the page reload.
In addition to that, there's no <selected> element in HTML. You'd be better served by using a hidden input, so replace this:
<selected id="displayedResults" value="0">
</selected>
with
<input type="hidden" id="displayedResults" value="0"/>
<selected id="displayedResults" value="0"></selected>
That ain't gonna work ;-)
- Edit: Oke, yes it can work but it's not valid HTML...
<select id="displayedResults">
<option value="0">zero</option>
</select>
It is because your page is reloading in each click. Change that anchor tag to another tag like span or something..
<span onclick="previousResults()">Previous</span>
<span onclick="nextResults()">Next</span>
add
return false;
on each function
use jquery than traditional javascript
to hide result 1
$('#results_1').hide();
to unhide just use
$('#results_1').show();
please tell what you are trying to achieve. I think you are doing it in a complex way.
The page is reloaded once you click the previous and next link. So please do as follows :
<a onclick="previousResults()" href="javascript:">Previous</a>
<a onclick="nextResults()" href="javascript:">Next</a>
Add return false; in the onclick attributes, in order to prevent the browser refreshing the page.
See http://jsfiddle.net/xZSyz/