i want to update div content (content form textarea of main page) of iframe on button click.
up till now i'm able to update div content (content from textarea of main page) of iframe but its done only on page load, i want to change content on button.
my script working on page load
$(function(){
var x = document.getElementById("myTextarea").value;
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').append(x);
})
})
my script not-working on button click but alert called with latest text from textarea
function myFunction() {
var x = document.getElementById("myTextarea").value;
alert("called" + x);
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').append(x);
})
}
iframe in modelpopup
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg" style="width:90%;height:100%!important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Html Preview</h4>
<button type="button" class="btn btn-default" onclick="myFunction()">Refresh</button>
</div>
<div class="modal-body">
<iframe id="prev" src="http://localhost:8084/page/htmlpreview" style="border:none;width:100% !important;height:1025px!important;"><p>Your browser does not support iframes.</p></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
any suggestions...
In the OP code there's no <textarea> just a BS modal. According to the OP code the <textarea> should be on the parent page (in demo: index.html) and the div#demo is on the child page (in demo: htmlpreview.html.) So in the demo we have:
the parent page (index.html) with textarea#text0 and a <button>
and the child page (htmlpreview.html) that resides within iframe#prev
on the child is div#demo
When the <button> is clicked the onevent attribute invokes the event handler xFunction().
When xFunction() is invoked it will:
get the value of textarea#text0 [var x = $('#text0').val();]
access iframe#prev contents [$('#prev')..contents()...]
then find div#demo [....find('#demo')...]
and set div#demo text content to the value of textarea#text0 [....text(x)]
The demo doesn't function due to SO security measures. Review this Plunk instead.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id='text0' rows='5' cols='70'></textarea>
<button type="button" onclick="xFunction()">Refresh</button>
<iframe id="prev" src="htmlpreview.html"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function xFunction() {
var x = $("#text0").val();
$('#prev').contents().find('#demo').text(x);
}
</script>
</body>
</html>
htmlpreview.html
<!DOCTYPE html>
<html>
<head>
<style>
#demo {border:3px solid red}
</style>
</head>
<body>
<div id='demo'></div>
</body>
</html>
The above two scripts change to this one script and its working perfect
i have to reload iframe the make desire div empty then edit content.
below is the working script.
function myFunction() {
var ifr = document.getElementsByName('Right')[0];
ifr.src = ifr.src;
var x = document.getElementById("myTextarea").value;
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').empty();
f.contents().find('#demo').append(x);
})
}
I am not sure this can be done by handling the DOM of the iframe as you might expect. According to this answer
However according to some other answers in the above link or this you could change the entire content of the iframe with what the content you want. (Including the change that you want.) I know this doesn't seem as the best solution but keep it in mind in case you don't find anything else.
One link with such a logic is this. Here you can get the innerHTML of the iframe and possibly find from the string the literal you want to change and set the new content as the iframe content.
The helping code from the link that shows the logic is this:
function get_iframe(ifr_id) {
// gets the object that refers to the iframe, uasing its id
var myIFrame = document.getElementById(ifr_id);
// Apply the property "contentWindow" to myIFrame object
// In this way we get the iframe content
var content = myIFrame.contentWindow.document.body.innerHTML;
alert("Content: \n" + content); // Displays an Alert with the data from iframe
// Define a new text that will replace the content of the iframe
content = '<font color="blue">Text added with Javascript, from the main page</font>';
// Modify the iframe content
myIFrame.contentWindow.document.body.innerHTML = content;
}
Related
I am making a chrome extension. I want to update a h3 element in popup.html with some text after click a submit button with id submit.
<!-- popup.html -->
<div class="row">
<h3 id="status"></h3>
</div>
// popup.js
function saveClass() {
var status = document.getElementById('status')
status.innerText = 'success';
}
document.getElementById("submit").addEventListener("click", saveClass);
The function populates the element with the text, and I see the text, but it disappears immediately, within some microseconds. Where I am going wrong ?
For me its' working fine. You can refer the following code snippet
<html>
<body>
<!-- popup.html -->
<div class="row">
<h3 id="status"></h3>
</div>
<button id="submit">Submit</button>
<!-- popup.js -->
<script>
function saveClass() {
var status = document.getElementById('status')
status.innerText = 'success';
}
document.getElementById("submit").addEventListener("click", saveClass);
</script>
</body>
</html>
The form refreshes the page by default upon submission, due to which the populated text vanishes. Just add an event listener to disable it, which keeps the DOM intact.
var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);
I'm kind of stuck at the moment. Would really appreciate if someone can help me with this.
First time asking a question, so please bear with me :)
I have a main page with a few buttons. Each button opens a bootstrap modal. I am able to load dynamic content into the modal. Also inserting external HTML works, but here's the catch.... The HTML content I insert also has some 'fancy' features like my main page has (ex. animated progress bar/skills) For the external HTML to work I need to reference the same script as my main page has, but if so, things on my main page gets broken.
My question is, is there any way that I can insert HTML into my modal and have the inserted HTML be able to use the existing functions on my main page?
var iModal = document.getElementById('iModal');
iModal.addEventListener('show.bs.modal', function handler() {
// Button that triggered the modal
var button = event.relatedTarget;
var modalTitleArg = button.getAttribute('data-bs-title');
var modalId = button.getAttribute('data-bs-id');
var modalTitle = iModal.querySelector('.modal-title');
var modalBody = iModal.querySelector('.modal-body');
modalTitle.textContent = modalTitleArg;
if (modalId == 1) {
$('.modal-body').load('Content1.html', function() {
$.getScript("js/functions.js") //get script, modal works, broken mainpage.
});
} else if (modalId == 2) {
$('.modal-body').load('Content2.html', function() {
//$.getScript("js/functions.js") //script reference in html, modal works broken mainpage
});
} else {
$('.modal-body').load('Content3.html', function() {
//$.getScript("js/functions.js") // no script at all, broken modal, mainpage works fine
});
}
this.removeEventListener('show.bs.modal', handler);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="1" data-bs-title="Title1">Click me 1</button>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="2" data-bs-title="Title2">Click me 2</button>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="3" data-bs-title="Title3">Click me 3</button>
<!-- modal -->
<div class="modal fade" id="iModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="myModalLabel">Title</h3>
<!-- data-bs-title -->
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="modal-body">
<!-- external html content -->
</div>
<div class="modal-footer">
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
</div>
</div>
</div>
<script src="js/functions.js"></script>
If in your "Content1.html", "Content2.html" etc. there is already an attached <script src="js/functions.js"></script> (as in a simple web page), then you can add content simply through an iframe tag (via the src attribute). Sample part of the code from your example:
...
<div class="modal-body">
<iframe class="modal-body-frame"></iframe>
</div>
...
<script>
...
const modalFrame = document.querySelector('.modal-body-frame');
if (modalId === 1) modalFrame.src = 'Content1.html';
...
</script>
...
But if you need to embed the script into the content every time, then you can use the srcdoc attribute of the iframe tag. Example below:
...
<div class="modal-body">
<iframe class="modal-body-frame" srcdoc=""></iframe>
</div>
...
<script>
...
const modalFrame = document.querySelector('.modal-body-frame');
if (modalId === 1) {
$.get('Content1.html', function(data) {
modalFrame.srcdoc = data.replace('</head>', '<script src="js/functions.js"></script></head>');
})
}
...
</script>
...
When using frame, it is important not to forget about Feature Policy and the ability to add permission via the allow attribute (Example: <iframe srcdoc="<p>Example test page</p>" allow="fullscreen"></iframe>).
I have two buttons, both without links, and want to add a link to one when the other is clicked. How can I make one button with an onclick give a link attribute to something else on the page? If not a button, maybe a div?
The following is my current code:
<div class="container">
<div class="jumbotron" style="background-color:#000000 !important;">
<img id="myImage" src="images/closed.png" style="width:100%">
<p id="texthere"></p>
<div class="container">
<div class="row">
<div class="col">
<button onclick="document.getElementById('myImage').src='images/open.png'" class="btn btn-primary active btn-block">Open Eyes</button>
</div>
<div class="col">
<button onclick="document.getElementById('myImage').src='images/closed.png'"class="btn btn-primary active btn-block">Close eyes</button>
</div>
</div>
</div>
Thank you in advance for your help.
*Edited to clarify and pose as a question.
I think you may be confused about how HTML links work. HTML has the a tag for elements that a user can click to go to a different URL. The (worse) alternative is to use an onclick handler to redirect the user by setting the value of window.location.
To make a button that creates a link on the page, put a script tag at the bottom of the body that attaches a listener to a button that, when called, places a link on the page.
<script type="text/javascript">
var button = document.getElementById('my-button'); // This button has to exist.
button.addEventListener('click', function() {
var link = document.createElement('a');
link.href = 'google.com'; // Or wherever you want the link to point.
document.body.appendChild(link);
});
</script>
While there are many ways to do what you want, without knowing what programming skills you have and what you want to see on the screen, perhaps this sort of structure would help you. Replace your current onclick handlers on the BUTTONs:
<button id="open" class="btn btn-primary active btn-block">Open Eyes</button>
<button id="close" class="btn btn-primary active btn-block">Close eyes</button>
<script>
document.getElementById("open").addEventListener("click", function() {
changeState('open');
});
document.getElementById("close").addEventListener("click", function() {
changeState('closed')
});
function changeState(state) {
document.getElementById("myImage").src = 'images/' + state + '.png';
var new_para = document.createElement("p");
var new_link = document.createElement("a");
new_link.setAttribute("href", "https://www.google.com/search?" + state);
var new_link_text = document.createTextNode("Search for '" + state + "'");
new_link.appendChild(new_link_text);
new_para.appendChild(new_link);
document.body.appendChild(new_para);
}
</script>
I'm trying to understand modals and js better. I have tried to use buttons that are realated to php files in order to make the content of the php files appear in a modal window once the button is clicked.
so...
button_1 gets file_1 and puts it in modal once it is clicked.
button_2 gets file_2 and puts it in modal once it is clicked.
etc.
I have acheived most of this but for some reason, each button needs to be clicked twice (for the first appearence of the modal window) for the modal to work. Afterwards, a simple click works fine, until the page is refreshed. At that point, two clicks are again needed.
My code works fine if I don't try to insert the information from the php file into a modal window. So... I'm guessing it is releated to the fact that the button has to do two things. 1. get the info and 2. open the modal window.
How do I combine both in one click?
I have tried to prefech files.
<link rel="prefetch" href="/folders/to/php/files/1.php">
I have also tried to pre-insert the modal in the html .
I have tried to use the load instead of click in the function.
I my tries have not changed the fact that I need to double click the buttons at first.
Any help appreciated!!
BONUS:
If I could get the buttons to dynamically find their related file, that would be bonus. Meaning I could simply add or remove buttons and they would find the correct files. All I would need to do is to add as many files as buttons.
Thanks for your time and help!
Here are the codes:
$("#liste > button").on('click', apar);
function apar() {
$(this).addClass("active").siblings().removeClass("active");
$('#main_p').load("/folders/to/php/files/" + (1 + $(this).index()) + ".php");
$(document).ready(function() {
// Do something with the DOM
$('.active').click(function() {
});
});
}
function renderHTML(data) {
var htmlP = data.url;
$('#main_p').html(htmlP);
}
// On page load, click on the first `btn` to automatically load the data for it
$('#liste > button:first').click(renderHTML);
.btn {
margin: 5px;
padding 0px 5px;
text-align: center;
background-color: #0095ff;
color: #FFF;
border: none;
}
.btn:hover,
.btn:focus {
outline: none !important;
color: #FFF;
}
.active {
background-color: #891;
}
<!doctype html>
<html>
<head>
<title> Modals </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="liste">
<button class="btn" data-toggle="modal" data-target="#myModal_1">
<div class="tree">to file 1</div>
</button>
<button class="btn" data-toggle="modal" data-target="#myModal_2">
<div class="tree">to file 2</div>
</button>
<button class="btn" data-toggle="modal" data-target="#myModal_3">
<div class="tree">to file 3</div>
</button>
<h4 id="main_tit"></h4>
<div class="main_p" id="main_p"></div>
<div id="main_ima"></div>
<script src="js/main.js" async></script>
</body>
</html>
here is the example of a 1.php file:
<div id="myModal_1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Look 1</h4>
</div>
<div class="modal-body">
<?php
echo "I have the 1.php <br>";
echo "its a go!";
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
UPDATE: I have added the automatic selection on button. So I have removed the button attributes in the html and have added this at the top of the JS:
var idVar = $("#liste").find("button").each(function(index){
$(this).attr("data-target","#myModal_" + (1+$(this).index()));
$(this).attr("data-toggle","modal");
$(this).attr("class","btn");
});
At the top of your js file there is $("#liste > button").on('click', apar);
Try to change it to:
$('body').on('click', '#liste > button', apar);
And put it at the end of your code after your $('#liste > button:first').click(renderHTML);
Let me know if this doesn't fix it.
Edit: Try creating new custom class for those buttons in HTML. It is good to set a marker to your custom classes, something like l-custom-class, or customClass, try to follow this example:
HTML:
<div id="#liste">
<button type="button" class="l-liste-button">btn1</button>
<button type="button" class="l-liste-button">btn2</button>
<button type="button" class="l-liste-button">btn3</button>
</div>
JS:
function apar(){
//some code for apar function..
}
function renderHTML(){
//some code for renderHTML function
}
$('body').on('click', '.l-liste-button', apar);
$('body').on('click', '.l-liste-button:first', renderHTML);
Here is JSFiddle
I made this html test website to test show/hide javascript.
When I load the page, I would like to show the first page but in my website everything is hidden 'till I click on a button'.
<html>
<head><title>Test</title>
<script>
function toggle(target){
var artz = document.getElementsByClassName('article');
var targ = document.getElementById(target);
var isVis = targ.style.display=='block';
for(var i=0;i<artz.length;i++){
artz[i].style.display = 'none';
}
targ.style.display = isVis?'none':'block';
return false;
}
</script>
</head>
<body>
About Us
Contact
Products
<div class="article" id="about" style="display:none;">ABOUT PAGE...</div>
<div class="article" id="contact" style="display:none;">CONTACT PAGE...</div>
<div class="article" id="products" style="display:none;">PRODUCTS PAGE...</div>
</body>
</html>
Well, that's because all your elements are hidden and the toggle-function is only invoked on click.
Use this:
window.onload = function(){
toggle('about'); //or whichever page you'd like to show on startup
}
This function is invoked on page-load and calls the toggle-function, providing the content that shoud be shown.
Alternatively, you could just change your style="display:none;" to style="display:block;" in the HTML for the content that should be shown on page-load.