How do you make an iframe appear when you click a button - javascript

<center>
<button type= "button" onclick="myFunction()">Things To Do in Miami</button>
<div id="loadiframehere">
<iframe id="myframe"src="https://thingstodo.expedia.com/miami-florida-activities/" width="450" height="275" > </iframe>
</div>
</button>
<script>
function myfunction(){
var x = document.createElement("IFRAME")
set.attribute("src","http://www.miamigov.com/home/");
set.attribute("width","600")
set.attribute("height","400")
document.getElementByID("myframe").src="http://www.miamigov.com/home/"
document.getElementByID("myframe").width="300";
document.getElementByID("LOADHERE").appendchild(x);
}
</script>
</center>
</section>
This was the code my teacher gave us to copy but I did and the button isn't working. iframe only appears beside it before I click the button.

Here's the fix. Your code was completely wrong. You have to be aware of that Javascript is Case sensitive. getElementByID is different than getElementById.
also, you created a "x" element to be an iframe, but you also created an iframe in the html and your "set" attributes were not attached to any element. You created a function called "myFunction", but on the buttong you were calling "myfunction". Again, javascript is Case Sensitive.
You should study Javascript syntax.
function myfunction(){
var x = document.createElement("IFRAME");
x.setAttribute("src","http://www.miamigov.com/home/");
x.setAttribute("width","600");
x.setAttribute("height","400");
document.getElementById("loadiframehere").appendChild(x);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button type= "button" onclick="myfunction()">Things To Do in Miami</button>
<div id="loadiframehere">
</div>
</center>

Related

update div content of iframe on button

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;
}

How to append a script using javascript inside a div

I want to append a script generated in javascript inside a div created before in HTML, the problem is that only works if
$("<script />", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location":"http://en.parkopedia.co.uk/parking/" + search_field2,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"650:400",
"id":"script_map",
"type":"text/javascript"
}).appendTo("body")
but if I change that for "$('#divId')" does not work, so the questions are:
How can I append that script generated inside a div when you click into a button?
How can I prevent to duplicate the script when I click twice in the button? Because it's working inside the body, but when I click again it shows two script windows. So i should remove the script before create a new one or if I get to put inside the div, clean all the childs inside.
I've created a demo here:
Update:
The main aim is to update the data-location when you click on the button and send the text inside the box to the data location to search there and show the script map below the textbox. Maybe it is another simple way to do it.
This will answer your first question.
.appendTo("#map")
And for second question.
if ($("#script_map").length > 0) {
$("#map").html("");
}
DEMO :
http://jsfiddle.net/kishoresahas/oosttuc0/4/
Code :
window.scripting = function () {
if ($("#script_map").length > 0) {
$("#map").html("");
}
var src_fld = document.getElementById('txt_f').value;
$("<script />", {
"src": "//en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location": "//en.parkopedia.co.uk/parking/" + src_fld,
"data-options": "l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size": "650:400",
"id": "script_map",
"type": "text/javascript"
}).appendTo("#map")
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tab-pane carpark" id="main_view">
<input type="text" id="txt_f" name="txt_f">
<input type="submit" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
<div id="map" name="map"></div>
<iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>
Look this:
function scripting(){
var src_fld = document.getElementById('txt_f').value ;
$("#main_view").find("script[id='test']").remove();
console.log("Size: " + $("#main_view").size());
$("<script id='test'/>", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location":"http://en.parkopedia.co.uk/parking/" + src_fld,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"650:400",
"id":"script_map",
"type":"text/javascript"
}).appendTo($("#main_view"))
console.log($("#main_view").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane carpark" id="main_view">
<input type="text" id="txt_f" name="txt_f">
<input type="button" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
<div id="map" name="map"></div>
<iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>
Run the Date input line
DateInput('creneau_2',true,'DD-MON-YYYY');
you could just try and do it all in jQuery rather than mixing javascript selectors.
$("#test").append("<script type='text/javascript'>DateInput('creneau_2',true,'DD-MON-YYYY');</script>");

Trying to make a button in JavaScript but it's not working

I'm new in JavaScript and I took an app here to learn how to use the language.
So, In my index.html I have this code here:
<div data-role="collapsible">
<h3>Reset Score</h3>
<button type="button" id="resetscore">Reset</button>
<script type="text/javascript">
function reset() {
localStorage.setItem('total_win', 0);
localStorage.setItem('total_lose', 0);
}
</script>
</div>
and this as footer:
`<div id="scores" class="ui-grid-b">
<div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
<div class="ui-block-b">Total win:<span id="total_win">0</span></div>
<div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
</div>`
What I'm basically trying to do is just reset the score to zero. But It's not working...
I tried to put some alert() inside reset() function but didn't work also.
Does someone has a clue why this is happening?
Thanks for helping!
Use onclick property:
<div data-role="collapsible">
<h3>Reset Score</h3>
<button type="button" id="resetscore" onclick="reset()">Reset</button>
<script type="text/javascript">
function reset() {
localStorage.setItem('total_win', 0);
localStorage.setItem('total_lose', 0);
}
</script>
</div>
You are declaring the function but not calling it anywhere. So you need to call the function at onclick event of button.
You should add an event listener for the click event.
Because of your comment, you can change the DOM by changing the inner HTML, see below snippet and code:
document.getElementById('resetscore').addEventListener('click',function() {
//localStorage.setItem('total_win', 0);
//localStorage.setItem('total_lose', 0);
document.getElementById('total_win').innerHTML = 0;
document.getElementById('total_lose').innerHTML = 0;
});
document.getElementById('win').addEventListener('click',function(){
var a = parseFloat(document.getElementById('total_win').innerHTML);
document.getElementById('total_win').innerHTML = (a+1).toFixed(0);
});
document.getElementById('loss').addEventListener('click',function(){
var b = parseFloat(document.getElementById('total_lose').innerHTML);
document.getElementById('total_lose').innerHTML = (b+1).toFixed(0);
});
<div data-role="collapsible">
<h3>Reset Score</h3>
<button type="button" id="resetscore">Reset</button>
<button type="button" id="win">+1 Win</button>
<button type="button" id="loss">+1 Loss</button>
</div>
<div id="scores" class="ui-grid-b">
<div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
<div class="ui-block-b">Total win:<span id="total_win">0</span></div>
<div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
</div>
your script tag can't be inside a div. You need to move all your javascript to the end of your body, right before its closing tag, after all the html
Just add this:
<button type="button" onclick="reset()" id="resetscore">
You need to tell which one of your functions to use, notice the onclick, it does just that, so reset executes on click
Your button needs to call reset
<button type="button" id="resetscore" onclick="reset()">Reset</button>

if jQuery element hasClass() change different element link text

I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');

Show function in Jquery not responding

I am trying to use some show hide functions in my js file:
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
});
});
for some reason, when i click the id="send" button, the id="me"(a picture)
is not showing up again(though it disappears):
<div id="me">
<img src="Me.JPG" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>
help please?
please let me know if i have to add more code to make myself clear...
thank you!
EDIT:
here is the code for the send button:
<input type="submit" id="send" value=" Send " class="submit" />
I would say the most likely answer is the send button does not yet exist when your page is loaded. Is this button being created dynamically, or through some other mechanism? To debug, I would say:
$(document).ready(function() {
$('#me').hide();
alert(document.getElementById('send')); //Test if it exists
$('#send').click(function() {
$('#me').show("slow");
});
});
If you get a popup with null, then you'll have to track down where this button gets generated and bind the event there.
Other than that, as you can tell from:
jsfiddle.net/zs7W2/
Your code works fine.
UPDATE:
I believe your FORM is actually submitting itself. You should change your code to:
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
return false; //Prevent submit
});
});
Or, use a <button type="button"> or <input type="button">
Example: http://jsfiddle.net/zs7W2/7/
<div id="me">
<img src="Me.jpg" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>
<input type="button" id="send" value="Submit">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
});
});
</script>
I've used something like this. It works. I guess that some problem with image align. Try to change it.

Categories