show HTML in alert window same like iframe? - javascript

i want to show HTML in alert window same like iframe..? can i do this...
<script>
alert("<html><body><h1>this is alert heading</h1></html></body>")
</script>
how can i do this..?

Instead of using alert, I would use a Pop Up. And I recommend you to use something like jQuery Dialog , look at http://jqueryui.com/demos/dialog/
Sample :
First, create a div to wrap your html elements,
<div id='my-dialog-id' title='my dialog title'>
<h1>this is alert heading</h1>
</div>
Then include some javascript with jQuery and jQueryUI
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#my-dialog-id").dialog(); //Here I select a div with id my-dialog-id and start the plugin.
} );
</script>
And it's ready!

If your asking how to display the HTML markup per se in the alert box, escape it:
alert("\<html\>\<body\>\<h1\>this is alert heading\</h1\>\</html\>\</body\>")
If you are asking how to format the alert box using HTML you cannot. You need to create a modal dialog box as one of the other answers indicates.

You can't do it via alert().
You can mimic it using a modal dialog. There are lots of modal dialog libraries - jQuery UI has a pretty powerful one.

Related

Javascript HtmlUnit

I have a submit button that I can't click on..
<div class="button_green">
<span>Send SMS</span>
</div>
I have tried this:
page = (HtmlPage) form.getInputByValue("Send SMS").click();
but that won't work.
Is there a way to click on this or run the Javascript with Java and HtmlUnit?
And it is not my site, so can't do anything with the html-code..
You can use XPath:
page = htmlPage.<HtmlDivision>getFirstByXPath("//div[#class='button_green'").click();
Which means: search for the first div with a class attribute of button_green, and click it.
W3schools has a good XPath tutorial.
This should work.
<script>
function sendSMS(){
alert('your sms function work here~~');
}
</script>
<span>Send SMS</span>
You will need to use the button tag like this:
<button type="button">Send SMS</button>
If you cannot edit HTML then you can do this using jquery. Try following code.
$( ".button_green" ).click(function() {
alert( "Handler for .click() called." );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="button_green">
<span>Send SMS</span>
</div>
To enable jquery first add a script line in the HTML page.

How to .append text to a div using jQuery?

I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.

Jquery css show div link not working? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Jquery css show div?
Ok this is my problem that no one can seem to answer. I have two javascripts in use. Once is for the popup I have and tells it to stay closed for 24hrs when closed. The other is to put a link some where on the page to display this popup until refreshed and kept hidden till the cookie expires. Now the div popup is set to display:none. The cookie tells it to be shown until the close button is pressed. No matter what I seem to rework in my javascript to tempoarly show the popup from a link, it will not show. Some how the cookie javascript is going to have to be modified and thus having to remove css:display:none on the popup div. I have no idea what to do.
This is the current code:
http://jsfiddle.net/Dv7DR/-
http://pastebin.com/fHvv5spn
<script type="text/javascript">
$("#linkshow").click(function {
$("#window").show()
});
</script>
Submit a comment
<div id="window">
...
<div>
<script type="text/javascript">
...cookie popup hide for 24hr on close
</script>
Note: I have already tried:
$(document).ready(function() {
$("#linkshow").click(function(e) {
e.preventDefault();
$("#window").show();
});
});
and...
$(document).ready(function() {
$("#window").hide();
$("#linkshow").live('click', function(e) {
e.preventDefault();
$("#window").show();
});
}); ​
and...
$(function() {
$("#linkshow").click(function() {
$("#window").show()
});
});
and...
<div id="window" style="display:none;">
to
<div id="window">
Then the other 24hr cookie javascript doesn't keep the popup hidden. I am assuming I need to take out the id="window" style="display:none; and some how advanced the javascript cookie at the bottom the code so it will hide when asked to be hidden for 24hr and show when needed to be shown on the current page until refresh but I am at blank on what to do.
$(document).ready(function() {
$("#window").hide();
$("#linkshow").live('click', function(e) {
e.preventDefault();
$("#window").show();
});
}); ​
for live demo see this link: http://jsfiddle.net/nanoquantumtech/wTmCL/
you should load jquery library first :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
if you want to do the popup, you may look into jquery dialog. The code above will only show the div but not poping it up.
Jquery dialog will do the popup and make sure you referent jquery ui. http://jqueryui.com/demos/dialog/
also your html is incorrect and also , hiding a element using css is better than hiding by jquery when page loading
use
<div id="window" style="display:none;">
...
</div>
instead of
<div id="window">
...
<div>

Add button after script tag

I have a javascript that I want my users to be able to put on their sites. In this javascript, I want to generate a simple button, that is located exactly where the javascript has been pasted into the site. How can I do this? It would be simple if I could give my <script> tag an id and then just getting the element with the specific ID and appending after it, but I can't.
For example if I have something like this:
<body>
<p>test para</p>
<p>test para</p><p>test para</p><p>test para</p>
<p>test para</p>
<div>test div</div>
<script src="embed.js" type="text/javascript"></script>
<div>last div</div>
</body>
I want my button to be placed right between test div and last div (before or after the script tag, it doesn't matter). Can I do this?
Could you just use after -
$("div:contains('test div')").after('<input type="button"/>');
This would obviously be better if you could give the 'div' an id or a class rather than finding it by the text it contains.
jQuery can find a script tag using -
$("script[src='embed.js']").after('<input type="button"/>')
Demo - http://jsfiddle.net/7GPx7/1
embedding JavaScript something you may want to consider is your visitors may not have jQuery enabled on their sites, so you could bloat the call by loading jQuery or construct your requirement in pure JavaScript.
The embed snippet for your visitors
<script id="eduard_luca" src="http://cdn.example.com/embed.js" type="text/javascript"></script>
embed.js
var element = document.createElement('a');
element.setAttribute('href','http://google.com');
element.innerHTML = 'Click Me';
document.getElementById("eduard_luca").appendChild(element);
I Hope this help you with your project.

Can I assign an action from javascript dynamically?

Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.

Categories