So I have a bootbox dialog that I need to have a button on that will create another bootbox dialog box. My issue is though the second bootbox dialog has a lot of javascript code so I was trying to use
Blaze.render Template.templateName, $('#dialogNode')[0]
to create the second dialog box, but this causes the second dialog box to have the same styling width as the first and disabling all buttons to be pressed (must hit esc twice to close both dialogs at the same time. If I try to render the second dialog box by following the Custom HTML example on http://bootboxjs.com/examples.html there is no issue, but I need to be able to use Blaze.render to use a certain template with its js code. Any thoughts about the error I am having? Thank you
Found my issue everyone! Both of my dialog boxes were called with the same id #dialogNode, so I just changed one of them!
Related
I have recently used Semantic UI to display a modal box in my app. In the modal box is a for, when the form is submitted the values of the forms feilds go on to be used in various ways. My issue is when the page posts back the form feilds are losing their values? For instance a text box that was filled out just appears as empty? However if I move the logic outside the Modal Box it all works fine? Also I have a link that when clicked fires an event in a code behind page, however when in the modal box the event does not fire?
Does anyone have any idea what might be causing these strange issue? It would seem from some things I have tried that its the javascript showing the Modal Box which is causing issues. If I manually add a class to show the modal box and disable the javascript which was causing it to show previously my logic then works fine?
Any help one this would be great im running out of things to try.
For Reference:
Heres the modal box im using http://semantic-ui.com/modules/modal.html#/definition
Here is how to show it according to the docs $('.ui.modal').modal('show'); this is what i believe to be causing the issues
EDIT:
It looks like something in the javascript is rendering the modal just below above the closing body tag regardless of where it is in the context of the website?! This certainly part of the issue, however I fell there is still something else going on
I am using the leanModal plugin and I like to add some code, in order to meet my needs.
What I did, is to use it as a modal dialog, and I have two buttons. The one button closing the modal dialog, and it is fine. The second button is responsible to use the data inserted into the dialog, and then to close the dialog.
What I am looking now, is when I click the second button, first to validate the data, and then to close the dialog, but this functionality does not exists in the plugin. So, how can I add something like the following:
$('selector').leanModal('close');
Is there a way ?
Note : I hope that my description is ok.
The following function to change the text of an input box works perfectly. but when I try and fire it again with a different parameter, it does not change.
function changeForm(name)
{
$("#the-input-box").val(name);
}
This also happens when I try change the selectedIndex on a select tag.
Also, the form is located on a modal box using Twitter's bootstrap, could that be the issue?
Any suggestions?
I think it's the way you are using the modal box. I've experienced the exact same thing before.
The thing about the id attribute is that there can only be ONE at any given time within the HTML DOM.
You may want to check whether you are 'destroying' your modal box after closing it. The first time you open the modal box, calling the function works without any problems. There could be a chance that after opening the modal box again, the function doesn't work anymore. This is because you are spawning multiple instances of the modal box and this causes multiple instances of #the-input-box to appear in the DOM.
Give that a try and let me know. The key is to DESTROY the modal box when it is closed (maybe closing it is fine, but I prefer the more drastic approach of destroying).
if I have more than one tinymce editor on a page, every action I do goes to the last editor unless I explicitly click on the editor I want to edit. For example, I made a plugin, which displays a dialog box, I type something in the dialog box and it should go to the first editor (I launch the dialog box from the first editor) but it goes to the last one, as it is the currently active editor.
How do I make the first editor active, once the page is loaded?
try this
tinyMCE.execInstanceCommand("mce_editor_0", "mceFocus");
taken from here
If you have multiple tinyMCE forms on one page, I recommend
Command: runScript
Target: tinyMCE.get('textarea_id').setContent('Your Text')
I'm interested in alert boxes such as,
http://www.visual-blast.com/javascript/nice-alert-box-with-jquery-impromptu/
and
http://woork.blogspot.com/2008/08/design-stunning-alert-box-using.html
but with a different functionality, the user should be able to interact with the page even with the alert box present, so it needs to be movable and not obscure the underlying page, as in this example,
http://www.open-lab.com/mb.ideas/index.html
Alert box should be generated automatically on page view plus the title and message of the alert box should change with each page refresh from expandable library.
Is there anything out there like this?
Thanks
Sounds like the jQuery UI dialog widget might do what you need?
http://jqueryui.com/demos/dialog/
Here is an example with mootools. You easily can extend any element on the page to be draggable. You may use this plugin as a sample of alerts and you'll just need to remove some functionality and add make it draggable.
There are few custom dialogs in moo.rd. One of them is the Custom.Alert:
http://www.moord.it/examples/custom_alert