How to put jQuery Dialog popup div into the jQuery code? - javascript

I have a very simple message to display in one jQuery popup and I just want to generate it without adding extra divs into my HTML.
What I'd like to do is just open a dialog box with a message and thats it.
Here is something like that I want:
$("<div>Hello sir</div>").dialog("open");
But that doesn't work. Should it? It seems like that should just open a simple dialog box, shouldn't it?
Thanks!!

You don't need to call open, simply:
$('<div />').html('Hello sir').dialog();
And here's a live demo.

Have you made sure you have included jQuery.UI library in addition to core jQuery ?
see example here :
http://jqueryui.com/demos/dialog/

$("<div>This is a test</div>").dialog();
works fine for me http://jsfiddle.net/fyMct/

Related

Generate javascript code bootstrap tooltip issue

I need to generate some results using ajax. The problem is by displaying this results I want to have an info icon with some information. For that purpose I am using the Bootstrap Tooltip. So fine so good, but when i generate the code dynamically using Javascript it does not show the tooltip like before, it is just like a title effect on a link.
The text inside is not fancy I have tried with the same text on the same page not using Javascript and it works fine.
Any suggestions ?
Thanks in advice
Try this:
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
Add the data-toggle='tooltip' and title to the elements you want.
Hover over me
And in a .js File or inline tag
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
Needed it yesterday -> http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

use ckeditor in bootbox

is there a way that I can use ckeditor as the textarea within a bootbox dialog? I am using bootbox for other areas with inputs but the only bit I cannot get to work is the textarea. The textarea does show in the dialog, but it is not replaced with ckeditor. Any help with this would be appreciated.
Thanks
you can try to use this:
CKEDITOR.ui.dialog.textarea(dialog, elementDefinition, htmlList)
or visit here:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.textarea.html
hope it helps.
I managed to do this by loading the form with the textarea into the bootbox dialog using AJAX.
I just needed to include the following in my ajax response.
<script>CKEDITOR.replaceAll(function( textarea, config )</script>

Loading a complete HTML Page in Modal Box

Ok so now it has been a day almost in searching about Modal box to display a complete .HTML file in Modal box rather opening it in new window or tab.
More precisely:
example
This ajax.html file should open in "modal box" in the same window.
How can I acheive it through anchor tag?
I have searched thoroughly but found no good solution except this one(Example#4). This works on site but doesn't work when I download it.
.
P.S: I do not want to use iframe.
There are a few different ways to do this, but the best way is to use an AJAX request to the page using jQuery:
$.post("ajax.html", function(data){
$("#myModalDiv").html(data).fadeIn();
});
Then to bind this to your anchor, assign it an ID and do this in your $(document).ready():
$(document).ready(function(){
$("a#someId").on("click", function(){
//Put the code from above here.
});
});
Note that this will only work for files on the same domain.
If you want to use files on a different domain, you will have to use an iframe, therefore I cannot put this into a fiddle because there are no local files to pull on a fiddle.
You can use bootstrap for the thing you want to do.
http://getbootstrap.com/javascript/
Check out the modal section.

is there anyway to open href links in message box?

i want to open html href link files in message box or any display box.( sorry i dont know, exact word for box.)
is there any way to open href links in any kind of display boxes.? i need answer only in JavaScript technology. Help me
I don't think an alert() or confirm() or any other built-in browser dialog box can display more than just simple text. But you can have any HTML content you want in a modal div dialog. The jQuery UI Dialog is a popular example. You don't need to use that plugin, though it would make it easy.
Essentially you just render a hidden element to the page (commonly a div) and respond to some page event by styling the element to "float" over the rest of the page. That element, since it's part of the DOM like anything else, can contain any HTML you'd like.
Take a look at jQuery's fancybox -> Fancy Box
well depending on how you building your web app. You could integrate twitter bootstrap, it has tons of great JavaScript plugins. a modal might solve your problem.
http://getbootstrap.com/2.3.2/javascript.html#modals
Alternative you can uses a lightbox, I see someone has already mentioned fancybox. The second version is now out.
its supports images, iframe, and divs as conetent
http://fancyapps.com/

jQuery simple dialog not working

I'm trying to figure out why my jQuery dialog is not working properly on this page:
http://bit.ly/nOKwYz
This is the code snippet:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#dialog22").dialog();
});
</script>
and I also have:
<div id="dialog22">test</div>
For some reason it does not load the dialog, any ideas?
It's gotta be the library order. See this fiddle. Your sample works just fine if you have the library order right:
http://jsfiddle.net/mikethomsen/a25gw/
The way it works is you need to load jQuery.js, jQuery UI's JS and then the jQuery UI CSS, then throw in your custom code.
Edit
I replaced my fiddle's libraries with your sample and Firefox says jQuery('#dialog').dialog is not a function. That means you are missing the dialog code from the build of jQuery UI you made. You need to go back to the jQuery UI site and build a new distribution of jQuery UI that includes the other pieces you need.
To show the dialogo you should first hide it i think:
<div id="dialog22" style="display:none;">test</div>
and then show it with a button for example
EDIT - look at the fiddle here : http://jsfiddle.net/LCPJe/
Where do you load jQuery (and jQuery UI) on that page? You need to reference those libraries in the page (specifically before any code that uses them). Unless I'm just not seeing the reference, you do have quite a few script tags in the header.
You don't have to host a copy, though. You can reference a CDN link.

Categories