I'm attempting to display a modal dialog as a test run before I try to perform a more difficult task. However, I seem to be doing something wrong as the code I copied from the demo site is not working when I set it up and run it locally.
Here is my source:
<html>
<head>
<script type="text/javascript" src="lib/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
$dialog.dialog('open');
});
});
</script>
</head>
<body>
<button id="opener">Press</button>
</body>
</html>
So far, I have primarily been thinking the problem may have been a relative path problem with the way I'm bringing in the external libraries. But I tried variations, and nothing changed.
I am still new to Javascript, so I may be doing some very noob-ish here. Any help would be appreciated. Thank you.
Here are some things you could try firstly add a link tag for the css
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
secondly make sure that you have the dialog component selected in your custom ui js package.
$(document).ready(function() {
var $dialog = $('<div></div>').appendTo(document.body);
});
Related
I'm trying to follow this basic jquery dialog article on how to open a modal dialog. The code goes like so.
<!doctype html>
<html>
<meta charset="utf-8">
<title>Basic usage of the jQuery UI dialog</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
</head>
<body>
<p>This is an example from the Nemikor Blog article Basic usage of the jQuery UI dialog.</p>
<button id="opener">Open the dialog</button>
</body>
</html>
(where I've skipped a page counter in the sake of brevity). The original example works fine; a modal dialog is displayed.
Now I'd like to combine this awesomeness with my rails app, creating a modal dialog as indicated in chourobin's answer. I've added a
<div class="modal" style="display:none;">
<h1>Test</h1>
</div>
part to the body, and changed my $('#opener') to
$('#opener').click(function() {
$(".modal").dialog('open');
//$('.modal').css( "border", "3px solid red" );
return false;
});
Unfortunately, no dialog is opened. Yet, when I set the modal div to be displayed by default, and comment out the dialog call and uncomment the css call in the above code, jquery successfully identifies the modal class and paints a 3 pixel, red, solid border around my div.
My question is: why aren't jquery displaying the (clearly identifiable) div in a dialog as in my initial attempt?
$(".modal").dialog();
Is what you're looking for
Since the <div class="modal"> is not visible when the page is loaded you need to use the .on() method and bind the event to the parent to the <div>.
Try something like
$('body').on('click','.modal',function(){
//your code here
});
You have two different calls for the dialog. On the first call you have set some parameters. On the second call you have not.
I would suggest to remove the inline style attribute (since this is keeping it hidden) and add a param for the dialog. like your working example did.
<!-- Removed the inline style -->
<div class="modal" title="Testing the Modal Code">
<h1>Test</h1>
</div>
//-- Adding this
$('.modal').dialog({
autoOpen: false
});
//-- Using the same call
$('#opener').click(function() {
$(".modal").dialog('open');
//$('.modal').css( "border", "3px solid red" );
});
This should provide the result you want.
The dialog will open with:
$(".modal").dialog();
Here is an example: http://jsfiddle.net/nH339/
I have a simple question. I have the following code:
alert("Are you sure you want to add: \n" + redirURL + "?");
the variable redirURL is an actual working url. I would like it to be 'clickable'
thank you in advance
use window.confirm instead of alert
if (window.confirm('If you click "ok" you would be redirected . Cancel will load this website '))
{
window.location.href='https://www.google.com/chrome/browser/index.html';
};
You can only display text in the alert function. If you want to put an url, you can do it by using jquery's dialog function. Here are some code examples: http://jqueryui.com/dialog/#default
If you want to open the Link on alert and that too in new window, Use the code below:
if (window.confirm('Ok to Confirm, Cancel to Stay here'))
{
window.open('http://www.google.com', '_blank');
};
Note that most browsers will treat these links as popup.
🙄
There is an alternative too, Both works same, find it below:
//write this above first
let a=document.createElement('a');
a.target='_blank';
a.href='https://www.google.com';
//then use this code for alert
if (window.confirm('Ok to Confirm, Cancel to Stay here'))
{
a.click();
};
👍
That's not possible to put clickable links in alert windows.
The closest thing you could do is using a modal window, like this: http://twitter.github.io/bootstrap/javascript.html#modals
You can't put clickable URLs in a standard alert() box. Instead you could use a "lightbox", which is an HTML popup - there are any number of them available, and you should choose one that fits well with the rest of your site/applicaiton.
It's not possible in any "standard" web browser that I'm aware of.
I'd suggest using a more robust approach like jQuery UI's dialog.
It is not possible with window.alert that you are using. Instead you can try using dialog plugins like modal plugin from bootstrap or jquery ui dialog. Your hyperlink is an html where as alert box is non html component of the browser generated by browser's javascript.
The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.
Reference
This is a method with Jquery's Dialog
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style></style>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src='template/js/jquery.textarea-expander.js'></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready(function() {
var regex,v,l,c,b,i,contapara=3;
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Link": function() {
location.href="http://stackoverflow.com/questions/16973240/link-in-alert-boxes-javascript";
return false; },
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: {}
});
$( "#wnd_Addparam" ).dialog( "open" );
});
</script>
<body>
<div id="wnd_Addparam" title="Information" ></div>
</body>
</html>
I am using [tinyMCE][1] and [tinybox2][2] i can get both to work independently but what i am tryng to achieve is that i click on edit button tinybox2 opens the url with the relevant id string on the page the link opens up this has tinyMCE on it with the update form, but i dont understand why tinymce does not load within the popup.
Is there a way to allow javascript to go to this popup of tinybox? or why is it preventing more javascript to load?
Thanks for any help :D
I have done this so far:
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
get test.php content via $.ajax(); -no idea on this one-
<p><a class="Forumusername" onclick="TINY.box.show({url:'test.php',width:750,height:300})">CLICK ME</a>
reinit TinyMCE editor with tinyMCE.init call. -i dont know how to implement this either-
Edited links but question is answered.
I'm not good in updating old code, so I will rewrite it completely. That's content of two my files test.php and edit.php:
test.php
<!doctype html>
<link rel="stylesheet" href="js/tinybox2/style.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="js/tinybox2/tinybox.js"></script>
<script type="text/javascript">
$(function(){
$('#open_editor').click(function(){
$.get(this.href).done(function(html){
TINY.box.show({
html: html,
width: 500,
height: 400,
openjs: function(){
tinyMCE.init({ mode: 'textareas', theme: 'advanced' });
}
});
});
return false;
});
tinyMCE.init({ mode: 'textareas', theme: 'advanced' });
});
</script>
<a id="open_editor" href="edit.php">Open editor</a>
<textarea></textarea>
edit.php
<textarea name="body" rows="10" cols="50"></textarea>
Correct paths to stylesheets and scripts before running test.php.
These scripts are checked and tested.
I just can't figure this one out. The Dialog Box doesn't popup. I've tried all sorts of things but it just doesn't work. Here's my code:
<head>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
</script>
Open Dialog
<div id="dialog">This should popup</div>
</body>
What's wrong here? Any help appreciated.
Try to use this it might be work.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
Where is jquery.ui.dialog.js in this scode?????
Please add this file into code as script tag....
you can put this JS file from here :
http://jqueryui.com/ui/jquery.ui.dialog.js
<script></script> is not enough. Should be <script type="text/javascript"></script>
I think the script tag just after body missing type="text/javascript". ie. <body><script type="text/javascript">...
You have to include the script block after the
Open Dialog
<div id="dialog">This should popup</div>
block just before the body element and it should work.
You have to include also all the styling of the jQuery UI so that it looks nicer.
I have a same problem.
It is probably a compatibility issue, try including the below instead of what you have
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
Also to display the dialog properly, replace jquery-ui-1.8.xx.custom.css to match the jquery-ui.min.js version, I could not find a google ajax link.
I want to find an alternative solution but no idea if I can find one.
I'm juuuuuust trying to get an pop up displaying test when the document is ready. I've managed to get google maps working on another page but somehow this is a lot of pain.
Here's the code:
<html>
<head>
[...]
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function () {
alert ("test");
});
</script>
{/literal}
</head>
[...]
</html>
What should I do to get that popup message? I also tried copy pasting from my working jquery page without much success.
Changing <script href=...> to <script src=...> works like a charm for me.
Does you javascript is enabled in your browser ?
You can type this:
$(function() {
alert("test");
});