The java script only get the first id. The 2nd id ignores the code. Are there anyway to make both IDs using the same java script ?
Add Item
List Items
<div id="add_item" class="tabcontent">
<div id="subcatchooser"></div>
<div id="list_item" class="tabcontent">
<div id="subcatchooser"></div>
Java Script here
function showsubcat(str) {
if (str.length == 0) {
document.getElementById("subcatchooser").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("subcatchooser").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "ajax.php?action=showsubcat&parent_id=" + str, true);
xmlhttp.send();
}
}
</script>
That is the main difference between classes and IDs. Classes are designed to be used multiple times, while IDs are designed to be unique. So you can change the divs to look like this:
<div class="subcatchooser"></div>
And then change the JavaScript to look like this:
var elements = document.getElementsByClassName("subcatchooser");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "";
}
Related
I am using Js xmlHttpRequest to display the same menu on different pages of my site. Lately I found out that some functions are not executed when the site is online, like a quiz I made.
I had also tried to use fetch, or put the scripts in different files, but the same thing kept happening.
(The quiz does work when checking locally, where the xml request cannot be satisfied.)
//load the menu
onload = function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementsByTagName('body')[0].innerHTML +=
this.responseText;
}
};
xhttp.open("GET", "mnu.html", true);
xhttp.send();
}
//check the quiz
const checkBtn = document.getElementById('checkBtn')
checkBtn.onclick = function quizCheck() {
//right answers
var score = 0;
if (q1a1.checked) {
score = score + 1;
}
if (q2a1.checked) {
score = score + 1;
}
alert("your score: " + score);
}
<li>
Check the right answer:
<br>
<input type="checkbox" id="q1a1">Right
<br>
<input type="checkbox">Wrong
</li>
<li>
Check the right answer:
<br>
<input type="checkbox" id="q2a1">Right
<br>
<input type="checkbox">Wrong
</li>
<button id="checkBtn">Check</button>
Anybody knows why and/or has some solutions?
The problem is this line which is wrong and that's why js is not working.
document.getElementsByTagName('body')[0].innerHTML += this.responseText;
You can't just add to innerHtml like that.
Instead you should create an html element and add it to body like this:
if (this.readyState == 4 && this.status == 200) {
var p = document.createElement("p");
p.innerText = this.responseText;
document.body.appendChild(p);
}
edit: of course you want to add an html menu instead of just a text inside a <p>, so you will have to add it like this:
var nav = document.createElement('nav');
nav.innerHTML = this.responseText;
document.body.prepend(nav); // always at the top
I'm trying with ajax to send innerhtml. Some attributes must be deleted before sending. When I click the buttton I delete the attributes and send..., and everything works fine, but my attributes are deleted in html as well.
They should only be deleted within the function and sent, but should not be deleted in html!
HOW TO AVOID IT.
Code:
<div id="container" class="container" >
<div id="parent1" class="parent">
<div id="child1" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
</div>
<div id="parent2" class="parent">
<div id="child2" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
</div>
<div id="parent3" class="parent">
<div id="child3" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
</div>
</div>
<button onclick="myFunction()">Click me</button>
function myFunction() {
var divsclass = Array.prototype.slice.call(document.getElementsByClassName("parent"));
var parenthtml = "";
divsclass.forEach(function(div){
Array.from(document.querySelectorAll(".parent [ondrop]")).forEach((elem) => elem.removeAttribute("ondrop"));
Array.from(document.querySelectorAll(".parent [ondragover]")).forEach((elem) => elem.removeAttribute("ondragover"));
var parenthtmlsend = div.innerHTML;
parenthtml += "&PARENTHTML"+ n++ +"=" + parenthtmlsend;
});
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xmlhttp.open("GET", "same-page.php? "+ encodeURI(results) + parenthtml, true);
xmlhttp.send();
}
I tried copying the code to another div and then deleting atributes, but even then the attributes in the html code were deleted.
var containercopy = document.getElementById("container").innerHTML;
document.getElementById("container-copy").innerHTML = containercopy;
My code is big so I rewrote and give a brief example, maybe along the way I made a mistake ...
I'm not sure this is good way, but you can clone deeply your element in array and then do your changes with it.
see the code
function myFunction() {
var divsclass = Array.prototype.slice.call(document.getElementsByClassName("parent"));
var parenthtml = "";
divsclass.forEach(function(div){
// clone
var clonedDiv = div.cloneNode(true);;
Array.from(clonedDiv.querySelectorAll(".parent [ondrop]")).forEach((elem) => elem.removeAttribute("ondrop"));
Array.from(clonedDiv.querySelectorAll(".parent [ondragover]")).forEach((elem) => elem.removeAttribute("ondragover"));
var parenthtmlsend = clonedDiv.innerHTML;
parenthtml += "&PARENTHTML"+ n++ +"=" + parenthtmlsend;
});
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xmlhttp.open("GET", "same-page.php? "+ encodeURI(results) + parenthtml, true);
xmlhttp.send();
}
It seems in your code n is undefined, but i didn't change it
I have a function that is responsible for updating the values in some <div>, the code looks like this:
file.js
window.onload = function makeRequest() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
calcPreco(xmlHttp.responseText);
}
xmlHttp.open("GET", "_config/buscar_valor.php?id="+document.getElementsByName("cloud")[0].getAttribute("cloudid")+"&periodicidade=monthly", true); // true para asynchronous
xmlHttp.send(null);
}
function calcPreco(preco) {
console.log(preco);
preco = preco.replace(",", ".");
preco -= document.getElementsByName("cloud")[0].getAttribute("desconto");
document.getElementsByClassName("mostrar_valor").textContent = preco;
}
index.php
<div name="cloud" cloudid="1" desconto="5">
<span class="mostrar_valor"></span>
</div>
<div name="cloud" cloudid="2" desconto="10">
<span class="mostrar_valor"></span>
</div>
<div name="cloud" cloudid="3" desconto="15">
<span class="mostrar_valor"></span>
</div>
Note that only the cloudid anddesconto attributes are changed in each <div>, the remainder remains the same.
The script will only do a calculation by searching for the value in "buscar_valor.php", through the cloudid attribute, which is the ID of each plan.
The desconto attribute is the amount it will subtract from the account.
The problem is that it is doing this only for the first <div>, how can I make it work for all <div>?
You have to loop over all cloud elements as:
for(const cloud of Array.from(document.getElementsByName("cloud"))) {
To then retrieve the related preco from the API I would use the new fetch method as that is way more easy to handle:
fetch("_config/buscar_valor.php?id=" + cloud.getAttribute("cloudid")+ "&periodicidade=monthly")
.then(res => res.text())
.then(preco => {
Now the desconto can be applied to preco:
preco -= cloud.getAttribute("desconto");
To get the mostrar_valor insode that cloud, just use querySelector:
const valor = cloud.querySelector(".mostrar_valor");
then you can change the textContent of that element.
Currently, when a div is clicked, jQuery detects it sends request to fetch data from mysql via Ajax.
What I'm actually fetching is, sub categories for the item clicked and display them in html page.
Now all is done in procedural way, so when another sub level needed to be displayed, I have to copy paste the ajax function. But how do make it into objects so that I don't have to repeat myself?
I just need to know how to bring in OOP into this context..Any help will be greatly appreciated. Thank you.
HTML
<!--append the default top level items starts-->
<div id="default"></div>
<!--append the default top level items ends-->
<hr>
<!--append the default top level items starts-->
<div id="sub"></div>
<!--append the default top level items ends-->
Jquery/AJax
<!--select top level items and append to default id starts-->
$("#clickme").on("click",function()
{
var xmlhttp = getXmlHttp();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (this.responseText !== null) {
var data = JSON.parse(this.responseText);
//console.log(this.responseText);
//console.log(JSON.parse(this.responseText));
for (i = 0; i < data.length; i++)
{
var id=data[i].id;
var name=data[i].item_name;
/*check if sub item exist*/
checkSubExist(id);
/*append to div*/
$("#default").append("name= "+name+", ");
}
}
}
}
xmlhttp.open("GET", "selectTopLevel.php");
xmlhttp.send();
});
<!--select top level items and append to default id ends-->
function checkSubExist(param)
{
//alert(param);
var xmlhttp = getXmlHttp();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (this.responseText !== null) {
var data = JSON.parse(this.responseText);
//console.log(this.responseText);
//console.log(JSON.parse(this.responseText));
for (i = 0; i < data.length; i++)
{
var id=data[i].id;
var name=data[i].item_name;
//alert(name);
$("#sub").append(name+", ");
}
}
}
}
xmlhttp.open("GET", "checkSubExist.php?sub="+param);
xmlhttp.send();
}
I would use $.ajax to wrap the xmlHttpRequest.
If you want a more "OOP" like approach, I would suggest you define some kind of Request Wrapper Objects which you then create upon event binding, naive example:
var RequestWrapperProto = {
getSubnodes: function(){
//handle request
}
//etc
}
var requestWrapper = Object.create(RequestWrapperProto)
$('.sub').on('click', requestWrapper.getSubNodes);
i have an auto-suggest url from that i need to write a JavaScript code through which i will be able to see the auto-suggest data.
i tried the below code but i am not able to get through it.
<!DOCTYPE html>
<head>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://***.poc.xxxxx.com/v1/staples/suggest?authKey=baef7f8e39c512342c8a14b7f6018b58&q=wat&rows=8";
var words = []
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
var data = JSON.parse(response);
var req_data = data.suggestions[0].suggestion;
console.log(req_data);
//document.getElementById("id01").innerHTML = words;
}
</script>
</head>
<body>
<!-- <div id="id01"></div> -->
</body>
</html>
the thing i am getting in response is:-
{"suggestions":[{"suggestion":"\u200B\u200B\u200B<b>wat</b>er","categories":[{"name":"Water & Juice","filter":"category_id%3A4606"},{"name":"Water Dispensers & Filters","filter":"category_id%3A16896"}]},{"suggestion":"\u200B\u200B\u200B<b>wat</b>er cooler","categories":[{"name":"Water Dispensers & Filters","filter":"category_id%3A16896"},{"name":"Kitchen Storage & Organization","filter":"category_id%3A1303"}]},{"suggestion":"\u200B\u200B\u200B<b>wat</b>er bottle","categories":[{"name":"Lunch Totes & Water Bottles","filter":"category_id%3A8812"},{"name":"Water & Juice","filter":"category_id%3A4606"}]},{"suggestion":"\u200B\u200B\u200B<b>wat</b>er cups","categories":[{"name":"Disposable Plates & Cups","filter":"category_id%3A992"},{"name":"Disposable Cups","filter":"category_id%3A13302"}]},{"suggestion":"\u200B\u200B\u200B<b>wat</b>er bottle labels","categories":[{"name":"Labels","filter":"category_id%3A997"},{"name":"Mailing & Shipping Labels","filter":"category_id%3A6118"}]},{"suggestion":"\u200B\u200B\u200B<b>wat</b>er dispenser","categories":[{"name":"Water Dispensers & Filters","filter":"category_id%3A16896"},{"name":"All Kitchen","filter":"category_id%3A60479"}]},{"suggestion":"\u200B\u200B\u200B<b>wat</b>ch","categories":[{"name":"Pedometers & Fitness Trackers","filter":"category_id%3A2554"},{"name":"Smart Watches","filter":"category_id%3A62030"}]},{"suggestion":"\u200B\u200B\u200B<b>wat</b>ercolor","categories":[{"name":"Abstract Art","filter":"category_id%3A12645"},{"name":"Wall Art/Decor","filter":"category_id%3A26678"}]}]}
from that response i need to find all the product name which coming after suggestion not suggstions like suggestion for wat water cooler etc.
It is hard to discern what exactly you're asking for. If what you want is just a list of all the "name" properties that are returned as suggestions, you could collect those like this:
function myFunction(response) {
var data = JSON.parse(response);
var items = data.suggestions;
var names = [], cat;
// iterate array of suggestions
for (var i = 0; i < items.length; i++) {
cat = items[i].categories;
// iterate array of categories in each suggestion
for (var j = 0; j < cat.length; j++) {
names.push(cat[j].name);
}
}
console.log(names.join(","));
}
Working demo: http://jsfiddle.net/jfriend00/trdppth0/
Now that you've clarified what output you want, you can get the list of suggestion words like this:
function myFunction(response) {
var data = JSON.parse(response);
var items = data.suggestions;
var suggestions = items.map(function(item) {
return item.suggestion;
});
console.log(suggestions.join(","));
}
Working demo: http://jsfiddle.net/jfriend00/bv3yfkwr/