Here's my code for a section of my page that i want to change
let existinguser = document.querySelector('#existing-user');
let table= document.querySelector('#table-contents');
existinguser.addEventListener('click', () => {
table.innerHTML = '';
});
since innerHTML only accepts string, how do i display content from another page
eg. new_page.html using .innerHTML
I dont't know if this will be required but here are the #existing-user snippets
<div class="col-xl-3 col-md-6">
<div class="card bg-primary text-white mb-4">
<div class="card-body">Existing User's requests</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#" id="existing-user">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
You should use iframe for adding html pages
You can do hacky stuff. You can use Javascript to fetch another html.
fetch('new_page.html').then(res=>res.text()) and add the response to the innerHTML.
Use jQuery .load(url) or any other method of Ajax in general.
$(".container").load("https://jsonplaceholder.typicode.com/");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1>next content is loaded from another html page</h1>
<div class="container" style="background:#eee"></div>
<h1>previous content was loaded from another html page</h1>
Related
I am trying to add a button but it is showing me this error.
here is my html code
<div card-container>
<template class="mainTemplate">
<div class="cards">
<div class="card">
<img data-image src="" alt="">
<div data-title class="header"></div>
<div data-body class="body"></div>
<button data-button class="btn">read more</button>
<p data-paragraph class="fullText"></p>
</div>
</div>
</template>
</div>
here is the javascript code
let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);
function showMore(){
alert("e")
}
You're using the <template> tag, which is an element that holds html markup but it's not rendered on page load.
In order to render its contents, one has to handle the <template> element via javascript, using the html structure as - in fact - a template for filling another structure (a table, a divs grid, etc.).
Since the sub-elements of <template> are not part of the DOM yet, let showDitail = document.querySelector(".btn"); will result in null. That's why you cannot bind events to it.
Either change the tag to something else (a div maybe), or handle the template properly via javascript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);
function showMore(){
alert("e")
}
<div card-container>
<div class="mainTemplate">
<div class="cards">
<div class="card">
<img data-image src="" alt="">
<div data-title class="header"></div>
<div data-body class="body"></div>
<button data-button class="btn">read more</button>
<p data-paragraph class="fullText"></p>
</div>
</div>
</div>
</div>
Hi I'm new to web development and I'm trying to practice by making a small site for my mom!
So basically I have this div that I want to replicate multiple times only changing the image url & the h3 caption.
<div class="col-lg-4 mb-5 col-md-6">
<div class="wine_v_1 text-center pb-4">
<a class="thumbnail d-block mb-4"><img src="images/im.jpg" alt="Image" class="img-fluid"></a>
<div>
<h3 class="heading mb-1">Us</h3>
</div>
</div>
</div>
I was thinking of using JavaScript to copy the div as a string to be something like ( pseudocode )
for image.length {
getelementbyid.print (div1 + imageArray(i) + div2 + caption(i) + endofDiv )
}
Would this be possible? Would it make sense to do it this way or is there a more simple way?
Example
The example works by having a data object, which stores the captions and image URLs. Then, there is a clone template. It loops through each and clones the template, and replaces each element with the correct content. Then it adds it to the HTML with .appendChild.
You can write a function doing this job. Creating copies of your element and change the attributes corresponding to your new data.
function copyAndChangeImageAndCaption(){
const images = [
{imageUrl: "images/de.jpg", caption: "De"},
{imageUrl: "images/it.jpg", caption: "It"},
{imageUrl: "images/fr.jpg", caption: "Fr"}
];
images.forEach(image => {
const el = document.getElementsByClassName('col-lg-4 mb-5 col-md-6');
let copy = el[0].cloneNode(true)
copy.getElementsByClassName('thumbnail')[0].childNodes[0].src=image.imageUrl;
copy.getElementsByClassName('heading')[0].childNodes[0].innerHTML = image.caption;
document.getElementsByClassName('container')[0].appendChild(copy);
});
}
<div class='container'>
<div class="col-lg-4 mb-5 col-md-6">
<div class="wine_v_1 text-center pb-4">
<a class="thumbnail d-block mb-4"><img src="images/im.jpg" alt="Image" class="img-fluid"></a>
<div>
<h3 class="heading mb-1">Us</h3>
</div>
</div>
</div>
</div>
<button onClick="copyAndChangeImageAndCaption()">Add images</button>
I am trying to build a search engine for my website and I need to store to data-content of the popovers in a variable so that I can search for them afterwards.
I already tried this:
var popover = $('.companyRoster').data('bs.popover');
popover.getContent();
but it is not working, as expected..
An example of my html containing the popover will be:
<div id="companyRoster" class="companyRoster container">
<div class="row mb-2">
<div class="col-lg-1 col-md-2 col-sm-3 col-6">
<img src="images/john-doe.jpg" alt="..." class="img-fluid rounded-circle padding-0" data-toggle="popover" title="John Doe" data-placement="top" data-content='<b>Position:</b> Team Leader Integration Services <br> <b>Department:</b> IT <br> <b>Email:</b> some.email#aaa.aa <br> <b>Skype:</b> johndoe'>
</div>
</div>
</div>
Can you tell me how can I make console.log() to display the data-content of the popover?
You're looking in the '#companyRoster' element for the data, which that element doesn't have. The data-content is in one of the child elements.
You should be able to get the data-content like so:
var dataContent = $(".img-fluid").data('content');
document.getElementById('other_div').innerHTML = dataContent;
I hope this helps!
I've got a problem to open Bootstrap 4 modal using element generated by Javascript.
There are two very similar cards (identical but with diffrent id). First is hard coded in html doc (and work correctly). Another is generated by simple JS script. I try to use the same class name "openEditModal" but it doesn't work. Then I declared "data-toggle" "data-target" attributes for both but still work only hard coded card. Is there any possibility that Bootstrap JS file work only with hard coded element?
HTML Coded Card
<div class="row" id="all-contacts-box">
<!-- ____EXIST_ADDRESSES____ -->
<!-- addressBoxWrapper -->
<div class="col-xl-3 col-md-4 col-sm-6 col-12 mt-2 d-flex">
<!-- addressBox -->
<div class="card bg-light openEditModal label flex-fill">
<!--contactHeader-->
<div class="card-header pl-2 pt-1 font-weight-bold text-muted label-title">
Office Address
</div>
<!-- contactBody -->
<div class="card-body row pt-0">
<!-- contactBodyLeft -->
<div class="col-4 d-flex justify-content-center align-items-center maps-pin">
<i class="fas fa-map-marker-alt"></i>
</div>
<!-- contactBodyRight -->
<div class="col-8">
<h4 class="label-title font-weight-bold">Main Name</h4>
<h5 class="label-address font-weight-normal">Street 22</h5>
<h5 class="label-address font-weight-normal">City, Country</h5>
</div>
</div>
</div>
</div>
Part of JS Code that generate new card
var createContactBox = function(dataToDisplay, idCounter) {
var mainAddressContainer = document.getElementById("all-contacts-box");
var addNewBox = document.getElementById("add-new-box");
var addressBoxWrapper = document.createElement("div");
var addressBox = document.createElement("div");
mainAddressContainer.insertBefore(addressBoxWrapper, addNewBox);
addressBoxWrapper.appendChild(addressBox);
addressBoxWrapper.classList = "col-xl-3 col-md-4 col-sm-6 col-12 mt-2 d-
flex";
addressBox.classList = "card bg-light openEditModal label flex-fill";
addressBox.setAttribute("data-toggle", "modal");
addressBox.setAttribute("data-target", "editBoxModal");
};
$(".openEditModal").click(function() {
$("#editBoxModal").modal();
});
The problem with dynamically created elements, is that they aren’t born with the same event handlers as the existing elements.
In order to fix it, you need to "refresh" the listeners after you add a dynamically element.
So I add events handlers to a function and turn it off before I turn it on (something like restart). If you don't turn it off, the event will triggered as many times this function is called, and you don't want it.
function refreshEvents() {
$(".openEditModal").off();
$("#add-new-box").off();
$(".openEditModal").click(function() {
$("#editBoxModal").modal();
});
$("#add-new-box").click(function() {
$("#addNewBoxModal").modal();
});
}
Now you can call this function whenever you create another element.
So I call it after you created the element.
This is a working fiddle
I apologize in advance for being weak English :(
My website looks like this:
https://scr.hu/LoDJpD
<div class="container-fluid">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 text-center">
<div class="card col-md-6 col-sm-6 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('kwadrat.jpg');"></div>
<div class="title"><h1><hr>DNI OTWARTE<hr></h1></div>
<div id="big" class="text">#string/big</div>
</div>
</div>
<div class="card col-md-3 col-sm-3 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('dlugi.jpg');"></div>
<div class="title"><h1><hr>PROJEKTY<br>UNIJNE<hr></h1></div>
<div id="small1" class="text">#string/small1</div>
</div>
</div>
<div class="card col-md-3 col-sm-3 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('maly1.jpg');"></div>
<div class="title"><h1><hr>BUSINESS<br>ENGLISH<hr></h1></div>
<div id="small2" class="text">#string/small2</div>
</div>
</div>
<div class="card col-md-12 row-1">
<div class="card-bg">
<div class="image" style="background-image: url('banner.jpg');"></div>
<div class="title"><h1><hr>CZECHOMANIA<hr></h1></div>
<div id="bigwidth" class="text">#string/bigwidth</div>
</div>
</div>
</div>
</div>
I would like to convert the "#string/text" text to a variable from the database.
In the database, the variable also has the name "#string/text".
Right now I have a simple script, but I know it will be ineffective
text = document.getElementById("big").innerHTML;
lang = document.getElementById("jezyk");
function en(){
document.getElementById("jezyk").className="flag flag-gb";
}
function pl(){
document.getElementById("jezyk").className="flag flag-pl";
}
function useen(){
if(lang.className == "flag flag-gb" && text == "#string/big"){
document.getElementById("big").innerHTML="GB variable form database";
}
}
function usepl(){
if(lang.className == "flag flag-pl" && text == "#string/big"){
document.getElementById("big").innerHTML="PL variable form database";
}
}
setInterval(function jezyk(){
usepl();
useen();
jezyk();
}, 10);
Is there an easier way to retrieve text and replace it from the database?
Can somebody suggest some better and faster functions?
Use an object ( maybe retrieve it from server via JSON), like this:
var translate={
lang:["en","pl"],
values:{
curr_lang:["english","polish"],
info:["english text","polish text"]
}
};
So you can easily display a language chooser:
translate.lang.map(function(language){
var button=document.createElement("button");
button.textContent=language;
button.onclick=changeLanguage.bind(this,language);
document.body/* or a custom element*/.appendChild(button);
});
Traversing the whole dom is not that fast, so may just do it once, and replace all #identifier# with spans (may do this on serverside already and cache it):
document.body.innerHTML=document.body.innerHTML.split("#").reduce(function(part,i){
if(part%2===0) return part;
return "<span id='"+part+"' class='replace'>...</span>";
}).join("");
So the actual replacing is quite easy:
function changeLanguage(lang){
var index=translate.lang.indexOf(lang);
document.querySelectorAll(".replace").forEach(fumction(el){
var select=el.id;
el.textContent=(translate.values[select]||["error","error"])[index];
});
}
A sample text
This site is currently in #curr_lang# ...
The good way
Use some javascript frame work as Angular or React. It'll take some time to learn, but will be nice for you.
I'm not understanding what you want to do on this page, will those texts change frequently? Use setInterval will freeze your page, don't use it.