I want to create an alert box with some details but my code is not working, please help me.
<script>
alert('<ul>
<li>Language must be in english .</li>
<li>Topic's must be on Digitalcoin.</li>
<li>Write a good title.</li>
<li>Don't give <b>Read More</b> button with other sites link.</li>
</ul>',{
ok : 'Ok'
})
</script>
Sorry but you can't put html in the native JavaScript's alert. You can use jquery's dialog or bootstart's alert, here examples:
https://jqueryui.com/dialog/
http://www.w3schools.com/bootstrap/bootstrap_alerts.asp
You can create your own custom alert box to allow html markup. Or you can use a library like #epascarello has mentioned. Here is a great article on how to create your own modal box with html5 and css3. I have gone ahead and created a starting point.
Here's the jsfiddle.
Related
I'm using JavaScript's prompt() function.
var favorite = prompt('What is your favorite color?', 'RED');
I'm using IE 7 and the prompt box that opens has a title bar that says : 'Explorer User Prompt' and further text that says 'Script Prompt:' Then beneath this is my text : 'What is your favorite color?' Also the 'OK' and 'Cancel' buttons appear in the far right side of the prompt box and the text entry box appears at the very bottom of the dialogue.
Is there any way to change the title bar, remove the text 'Script Prompt', and put the OK and cancel buttons beneath the text entry box?
Yes. By not relying on browser UI (which is actually disabled by default in some browsers) and instead making your own.
All it takes is a simple modal dialog with a form in, and you're all good. The only downside is that it won't be blocking anymore (if you can consider that a downside), so you need to put the rest of the code inside a callback that the prompt calls when it's closed.
No I don't believe so. The problem was that people would use prompts maliciously so microsoft added that to make it look more like it was a page specific prompt and not a IE prompt.
You can do an in page dialog with jQuery or something:
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs
Short answer: no.
Longer answer: No, but you can roll your own popups with jQuery's UI library or by hacking up something with the DOM yourself.
No, there isn't.
The closest you can come is to mock up a fake one using DOM elements.
Not exactly what's being asked, but the only way I found to give the prompt box some formatting...
Using this answer, this answer and these HTML symbols, one can get creative and achieve this:
Demonstration:
var balls = '\u25CD'.repeat(24),
blue = '\u27BF',
red = '\u274C',
yellow = '\u2728',
green = '\u2705',
arrow = '\u25B8';
window.prompt(balls+' \u25C9 '+balls+'\rWhat is your favorite color?\r\t'+arrow+' B\u0332lue '+blue+'\r\t'+arrow+' R\u0332ed '+red+'\r\t'+arrow+' Y\u0332ellow '+yellow+'\r\t'+arrow+' G\u0332reen '+green);
Here is the jsbin.
http://jsbin.com/OnatOhE/3/ (just right click, view source to see source code)
I'm trying to display the results that the user chose on the same page after hitting the button. I've messed around with this for a while and I haven't found a simple way to do this.
All help is greatly appreciated. Thank you!
I'm sure if you look at any documentation for javascript libraries they would have an example of this but a very very simple way to do it could be like this using jQuery...
$( "#favColor" ).change(function() {
$("#bottomText").append(' '+$("#favColor option:selected").val());
});
You add to this by making a function that finds all select boxes and does the above to all of them, instead of having 5 functions that do the same thing.
See:
http://api.jquery.com/change/
http://api.jquery.com/val/
I am using the Javascript alert box:
function shareConfirm() {
if(!confirm('Are you sure want to unshare?')) return false;
}
However, the title give the URL says and the alert box but I want to edit the title. It turns out javascript title can't be edited. So I best bet is to use jquery simple alert box with the same css as the custom javascript alert box. How can I do that?
Would you mind to use jQueryUI ? Then solving your problem will be easy as butter :)
Step 1:
Include jQueryUI in ur page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Step 2:
Create a div. The text in this div will display as alert. You need to hide this div in $(document).ready()
<div id='myAlertbox'></div>
Step 3:
Here you go:
$("#myAlertbox").html('Are you sure want to unshare?');
$("#myAlertbox").dialog({
title: "yourRequiredTitleHere",
modal: true,
buttons : [{
text : "Ok",
click : function() {
$(this).dialog("close");
//You can do whatever you want here.
}
}],
});
This is not possible, as you say, from a security stand point. The only way you could simulate it, is by creating a modeless dialog window.
the style of confirm() and alert() boxes depend on the browser and operating system. therefore it will be a nearly impossible to create a css for jquery alert boxes to match each browser/os combination
I have the following javascript code:
var result = ("Please enter your name","Andrew");
and i wanted to underline the word "name" in the above message.
This is trivial but i have no clue after searching for escape code representation for underline. Or is the above possible in javascript ?
If the example code given had a typo and should've read like this:
var result = window.prompt("Please enter your name","Andrew");
then the answer is that you can't format the text or change the labels on the buttons or anything. This applies to the built-in alert() and confirm() as well as to prompt().
It's a bit more work, but you can implement your own equivalent dialog by building one from HTML using a transparent <div> to cover the rest of your page so that users can't interact with the rest of the page until the dialog closes. (Or use a translucent <div> to make it more obvious to the user that the rest of the page is "disabled".)
I would not bother coding this from scratch when there are lots of JS libraries that do it for you. The jQuery dialog is pretty easy to use, to name just one option.
If this is ending up on a web page you should just be able to use:
var result = ("Please enter your <u>name</u>","Andrew");
...but I'm not exactly sure what it is you're intending to do. Can you add more detail to your question?
var result = ("Please enter your <u>name</u>","Andrew");
I looked into previous questions, but they didn't seem to answer what's happening to me.
In my real code i'm creating a form on the fly and adding to it two buttons, one for submission and another for other function. For this I'm setting the "type" attribute of the buttons to "submit" for one and "button" for the other. The problem is that in Chrome both buttons submit the form.
Code for the form:
form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);
Code for the buttons:
form.append(
$(document.createElement('div')).
attr('class', classesHash.buttonsContainer).
append(
$(document.createElement('button')).
attr('type', 'submit').
addClass(classesHash.submitButton).
attr('title', i18n('Filter')).
attr('value', i18n('Filter')).
append(i18n('Filter'))
).
append(
$(document.createElement('button')).
attr('type', 'button').
addClass(classesHash.addButton).
attr('title', i18n('Add filter')).
attr('value', i18n('Add filter')).
append(i18n('Add filter')).
click(addFilter)
)
);
I made a more simple test with this HTML code:
<form action="" method="get"><button id="test">test</button></form>
When Chrome doesn't finds a submit button, any button submits the form.
The following doesn't works, the form gets submitted on button click:
$('#test').attr('type', 'button');
The following does works, the form does not submit on button click:
document.getElementById('test').setAttribute('type', 'button');
The form and the button are being generated dynamically and I'm using jQuery so attr() is the most obvious method. Is something wrong with the jQuery core and Chrome's JS specification? It works fine in Firefox. Thanks a lot.
First, the correct approach:
To do what you want in this case, go with the vanilla JavaScript solution, but test it in IE!
The why:
The reason type doesn't work is because it fails in IE (you can't chagne the type of an input after it's added to the DOM, and it's handled in this same way), so jQuery throws an error when you try. It does this specifically for <input> and <button> elements when changing the type attribute.
If you look in your console you'll see this:
Error: Uncaught type property can't be changed
Here's a quick test showing this, check the console to see the error jQuery throws.
Use prop instead of attr. It`ll work for sure.
Please look at the below sample code:
$("input[name='email']").focusin(function() {
console.log("alert");
$('#email').prop('type','number');
});
Let me know your thoughts on this.
Thanks
jQuery is working fine for me in Chrome ... all the functions I've thrown at it today are running just fine, including .attr()...
I'm not 100% sure what you're asking, but I think you're asking about preventing the submission of a form with a button click in Chrome. If that is the case, why not use preventDefault?
$("#test").click(function(e) {
e.preventDefault();
//more work here....
});
EDIT:
I agree with Nick that in order to do what you are trying to do, go with the straight JavaScript approach. But in that case, you're applying attributes to a button that don't make sense (or at least aren't valid). Since you're already using jQuery, why not handle it properly and prevent the default action of a button click in a form?
So this post was helpful to me, but my solution was to clone the button in question and replace it
$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();