I have an app (jQuery mobile 1.4.3) with a List View, I'm dynamically loading the list with AJAX.
I'm using the same list view to load 2 different types of ajax data, what I need is to remove/change the css so that the buttons and left side space will disappear when click/load the button 2222.
jsfiddle: JSFIDDLE (CLICK the button 2222 to show list)
Some sample code:
function func1111() {
var $menuList = $("#suggestions-list");
$menuList.empty();
var listItem = document.createElement("li");
var divForButtons = document.createElement("div");
var anchor = document.createElement("a");
var buttonAdd = document.createElement("a");
var buttonDelete = document.createElement("a");
var header1 = document.createElement("h1");
var header = document.createElement("h3");
var paragraph = document.createElement("p");
anchor.setAttribute("href", "");
anchor.setAttribute("data-id", "hey");
header.textContent = "something";
header1.textContent = "hello";
paragraph.textContent = "10" + "€";
buttonAdd.setAttribute("href", "#");
buttonAdd.setAttribute("id", "btnUserSugAdd");
buttonAdd.setAttribute("data-id", "1");
buttonAdd.setAttribute("class", "ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all");
buttonDelete.setAttribute("href", "#");
buttonDelete.setAttribute("id", "btnUserSugDel");
buttonDelete.setAttribute("data-id", "2");
buttonDelete.setAttribute("class", "ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all");
divForButtons.setAttribute("class", "editBtns");
divForButtons.appendChild(buttonAdd);
divForButtons.appendChild(buttonDelete);
anchor.appendChild(header);
anchor.appendChild(header1);
anchor.appendChild(paragraph);
listItem.appendChild(anchor);
listItem.appendChild(divForButtons);
$menuList.append(listItem);
$menuList.listview('refresh');
}
I hope I was't too confusing with my question, thanks in advance.
In one function add the class has-editBtns to the UL in the other remove it:
function func1111() {
var $menuList = $("#suggestions-list");
$menuList.empty().addClass('has-editBtns');
...
function func2222() {
var $menuList = $("#suggestions-list");
$menuList.empty().removeClass('has-editBtns');
...
Updated FIDDLE
Related
Ok,for testing purposes lets say i have a function where it appends <li> elements inside an <ol>
container,and i want to keep all list items i've added,is there a way to store them in Local Storage (or any other way,locally) so i can retrieve them every time i reload the page ?
I've studied a little bit in Window.localStorage api,i did'nt find a method to store a dynamic element like that,but again if there is something i would'nt know to recognize the right practice to do it,since i'm still a student.Any ideas?
var textcounter = 1;
var inputcounter = 1;
function addText() {
var div = document.getElementById("div");
var texttobestored =document.createElement("li");
texttobestored.id = "text" + textcounter;
texttobestored.style.color="red";
texttobestored.innerHTML = "<p>I WANT TO KEEP THIS TEXT</p>";
div.appendChild(texttobestored);
textcounter++;
}
function addInputs() {
var div = document.getElementById("div");
var inputstobestored =document.createElement("li");
inputstobestored.id = "input" + inputcounter;
inputstobestored.innerHTML = "<input placeholder = ContentsToBeSaved>";
inputstobestored.style.color = "blue";
inputstobestored.style.width = "600px";
div.appendChild(inputstobestored);
inputcounter++;
}
#div{
width:600px;
}
<html>
<body>
<ol id="div">
<button onclick="addText()" style="height:100px;width:100px">ADD TEXT</button>
<button onclick="addInputs()" style="height:100px;width:100px">ADD INPUTS</button>
</ol>
</body>
</html>
Here is a working fiddle: https://jsfiddle.net/3ez4pq2d/
This function calls saveInput to save the data to localstorage. Then it also generates the
inputs that are saved via loadInput.
This just stores the ID, COLOR and WIDTH. But using this as a base you can save additional fields also.
function saveinput(obj) {
saved = localStorage.getItem("items") || "[]"
saved = JSON.parse(saved)
saved.push(obj)
localStorage.setItem("items", JSON.stringify(saved))
}
var textcounter = 1;
var inputcounter = 1;
function addText() {
var div = document.getElementById("div");
var texttobestored = document.createElement("li");
texttobestored.id = "text" + textcounter;
texttobestored.style.color = "red";
texttobestored.innerHTML = "<p>I WANT TO KEEP THIS TEXT</p>";
div.appendChild(texttobestored);
textcounter++;
}
function addInputs() {
var div = document.getElementById("div");
var inputstobestored = document.createElement("li");
inputstobestored.id = "input" + inputcounter;
inputstobestored.innerHTML = "<input placeholder = ContentsToBeSaved>";
inputstobestored.style.color = "blue";
inputstobestored.style.width = "600px";
saveinput({
id: "input" + inputcounter,
color: "blue",
width: "600px"
})
div.appendChild(inputstobestored);
inputcounter++;
}
function loadInput() {
inputs = localStorage.getItem("items") || "[]"
inputs = JSON.parse(inputs)
inputs.forEach(function(input) {
var div = document.getElementById("div");
var inputstobestored = document.createElement("li");
inputstobestored.id = input.id;
inputstobestored.innerHTML = "<input placeholder = ContentsToBeSaved>";
inputstobestored.style.color = input.color;
inputstobestored.style.width = input.width;
div.appendChild(inputstobestored);
inputcounter++;
})
}
loadInput();
I want to make it so i append a link at the end of each row, but it says "Click Here", and then it openes a link? Ill show you my code below but i dont know really how to work this out, iv been thinking for 2 hours now and came up with nothing...
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellMovieName = row.insertCell(1);
var cellPrice = row.insertCell(2);
var cellLink = row.insertCell(3);
cellId.appendChild(document.createTextNode(childKey));
cellMovieName.appendChild(document.createTextNode(childData.Title));
cellPrice.appendChild(document.createTextNode(childData.Price));
cellLink.appendChild(document.createTextNode("CLICK ME" with the href attribute of childData.Title));
rowIndex = rowIndex + 1;
I think you need to do like this
You can't append child like that you need to do like
var list = document.getElementById("idhere");
var button = document.createElement('button');
button.value = "Click Me";
list.appendChild(button);
Now you can add attributes
var attribute = document.createAttribute("id"); // Can be class data-id whaterver you want onclick, anything you want
attribute.value = "time"; // can be anything
button.setAttributeNode(attribute);
// Some Examples
var span2 = document.createElement('span');
span2.innerText = snapshot.val().message;
var span_2_ID = document.createAttribute("id");
span_2_ID.value = "post";
// Time
var span3 = document.createElement('span');
span3.innerText = snapshot.val().time;
var span_3_ID = document.createAttribute("id");
span_3_ID.value = "time";
span1.setAttributeNode(span_1_ID);
span2.setAttributeNode(span_2_ID);
span3.setAttributeNode(span_3_ID);
var break1 = document.createElement('br');
var break2 = document.createElement('br');
I hope this helps you
Ok I figured it out... with a little bit of both of your guys's knowlage you have provided, i made a solution to this check below:
var text = document.createTextNode("This is link");
var link = document.createElement('a');
link.setAttribute('href', "https://google.com");
link.setAttribute('html', "test");
link.setAttribute('target', "_blank");
link.appendChild(text);
cellLink.appendChild(link);
rowIndex = rowIndex + 1;
So I Made The Text, Added It To The Column And Then Added The Attributes I Appreciate Everyone Helping Me!
My JavaScript code works up to the last append. This I checked with alert messages. All the alerts except for the last one get displayed. So I assume the problem is with the last append. Can someone please help?
var node = document.createElement("li");
var d0 = document.createElement("div");
var d1 = document.createElement("div");
var L1 = document.createElement("label");
d1.append(L1);
L1.innerHTML = "datah[key]";
var d2 = document.createElement("div");
var L2 = document.createElement("label");
d2.append(L2);
L2.innerHTML = "datah1[key]";
console.log("test1");
d0.append(d1);
d0.append(d2);
node.append(d0);
console.log("test2");
document.getElementById("speclist").appendChild(node);
// The following alert doesn't get printed
console.log("test3");
<div>
<ul id="speclist">
</ul>
</div>
There is no problem with last append problem is that you are not wrapping "test3" in any html.you want to show test3 then you have to wrap it with node(li).
var node = document.createElement("li");
var d0 = document.createElement("div");
var d1 = document.createElement("div");
var L1 = document.createElement("label");
d1.append(L1);
L1.innerHTML = "datah[key]";
var d2 = document.createElement("div");
var L2 = document.createElement("label");
d2.append(L2);
L2.innerHTML = "datah1[key]";
alert("test1");
d0.append(d1);
d0.append(d2);
node.append(d0);
alert("test2");
//document.getElementById("speclist").appendChild(node);
// The following alert doesn't get printed
alert("test3");
node.appendChild(document.createTextNode("test3"));
document.getElementById("speclist").appendChild(node);
<div>
<ul id="speclist">
</ul>
</div>
and one more thing when i am running your code it is showing me 3 alerts test1,test2 and test3.
I am building a small todo list and want to do the following: each text input (or actually a copy of the text input) should be added to an empty string (copy because it should not disappear when added). Then I have a function which is called when user clicks on a button and then I want to pick a random todo thing.
I didn't even get to the point when I pick out a random todo thing because my code just doesn't work- It seems like the adding does happen, but instead of adding a todo thing, thats being added:[object HTMLInputElement]
Anyone has an idea?
My javascript code:
var totalItems=0;
var listOf="";
function randomItem(){
document.getElementById("randomArray").innerHTML=listOf;
}
function updatingItem() {
var cbId = this.id.replace("cb_", "");
var textItem = document.getElementById("item_" + cbId);
if (this.checked) {
textItem.style.textDecoration = "line-through";
textItem.style.background="pink";
}
else {
textItem.style.textDecoration = "none";
textItem.style.background="white";
}
}
function addItem() {
totalItems++;
var entry = document.createElement("li");
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.id = "cb_" + totalItems;
checkBox.onclick = updatingItem;
var span = document.createElement("span");
span.id = "item_" + totalItems;
span.innerHtml = textItem;
var textItem = document.getElementById("textItem");
span.innerText = textItem.value;
var location = document.getElementById("todoList");
entry.appendChild(checkBox);
entry.appendChild(span);
location.appendChild(entry);
var listOfItems=textItem;
listOf+=listOfItems;
}
var item = document.getElementById("add");
item.onclick = addItem;
document.getElementById("lastButton").onclick=randomItem;
HTML:
<body>
<div class="table">
<h1>To Do List</h1>
</div>
<p>
<input type="text" id="textItem"/>
<button id="add"><b>Add</b></button>
</p>
<ul id="todoList"></ul>
<h3>Pick a random to do thing to do for today</h3>
<button id="lastButton">Go!</button>
<p id="randomArray"></p>
</body>
Your randomItem() function is working incorrectly, as you are trying to create String from Object directly while using listOfItems. Either use its value or try using following code instead for proper view. Also add one list element in HTML with id="myList". IT will work fine.
JS:
function randomItem(){
var counter = 0;
var textItems = document.getElementsByTagName("input");
var done = [];
for (var i=0; i<textItems.length; i++)
{
if(textItems[i].type == "checkbox")
{
if(textItems[i].checked)
{
document.getElementById("item_"+i);
done.push(document.getElementById("item_"+i).innerHTML);
var list = document.getElementById('myList');
var data = document.createElement('li');
data.appendChild(document.createTextNode(done[counter]));
counter++;
list.appendChild(data);
}
}
}
}
HTML:
<ol id = "myList"></ol>
try
var listOfItems=textItem.value;
rather than
var listOfItems=textItem;
I'm trying to get a script to delete a table row.
var i = 1;
function addURL() {
var tr = document.createElement('tr');
tr.setAttribute("id", "url_row_" + ++i);
var td = tr.appendChild(document.createElement('td'));
td.style.valign = 'middle';
td = tr.appendChild(document.createElement('td'));
var input = td.appendChild(document.createElement('input'));
input.name = 'url[]';
input.type = 'text';
input.size = '40'
var node = document.getElementById('myTable').tBodies[0];
node.insertBefore(tr, node.children[3]);
var link = document.createElement("a");
link.setAttribute("href", "");
link.setAttribute("style", "text-decoration: none;");
link.setAttribute("onClick", "removeURL('');return false;");
td = tr.appendChild(document.createElement('td'));
td=td.appendChild(link)
td.appendChild(document.createTextNode('-'));
}
function removeURL(divNum) {
var d = document.getElementById('myTable').tBodies[0];
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
This can produce as many url_row_(number) text fields as I want. I just don't know how to delete those rows.
I know doing
link.setAttribute("onClick", "removeURL('url_row_2');return false;");
will delete url_row_2, but what can I put at url_row_2 that will grab whatever id that the row is or what is the correct code to do this?
To do it that way, you would use string concatenation to concatenate i into the handler string to target the given tr.
link.setAttribute("onclick", "removeURL('url_row_" + i + "');return false;");
Don't use setAttribute for event listeners. Have a look at the Introduction to event handling at quirksmode.org, and especially on the simple event registration model. Also, you can just use the information from the event object to identify the row to remove:
function clickHandler(event) {
var anchor = this; // == event.targetElement
var tr = anchor.parentNode.parentNode;
tr.parentNode.removeChild(tr);
event.preventDefault(); // do not follow the href
}
function addURL() {
…
var link = document.createElement("a");
link.setAttribute("href", "#");
link.setAttribute("style", "text-decoration: none;");
link.onclick = clickHandler;
td = tr.appendChild(document.createElement('td'));
td.appendChild(link)
link.appendChild(document.createTextNode('-'));
}