We Keep Coding

Using Blaze.render inside of a bootbox dialog - getting weird bug

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!

Bootstrap popover manual close requires two clicks to reopen [duplicate]

This question already has answers here:
need click twice after hide a shown bootstrap popover
(8 answers)
Closed 6 years ago.
I've got a Bootstrap popover which contains an element with JS that when clicked, closes the popover using the manual method as shown on the Bootstrap website, i.e.
$('#element').popover('hide')
However, it then takes two clicks on the element the popover is opened from to re-open it. It's as if it still thinks the popover is on show and so the first click is to toggle it closed and the second click then toggles it open again. Does anyone know how to properly close a popover using JS to avoid this? I've created the following fiddle that demonstrates the problem.
http://jsfiddle.net/fxqzn4xd/1/
Thanks very much.
Update: This issue isn't a duplicate of the proposed question
Thanks as always to the SO community for keeping the place tidy and relevant. However, this isn't a duplicate of the proposed question. The problem in that question was that the popovers weren't initialised until the first click. Therefore, the first click did not open the popover, but did initialise it so the second and all subsequent clicks worked.
That is not the problem I found. Popovers are initialised on page load so my first click does open the popover. When closed using the manual .popover('hide') method, the second click then does not work. i.e. every other click works in my scenario. These are different issues caused by different problems. The issue in the linked post is to initialise popovers before the first click, which I already do.
I reported the issue I found on the twbs bootstrap project on GitHub and it turns out it is a known bug, first reported in version 3.3.5 back in July. It had a milestone fix of 3.3.6 but this slipped (3.3.6 came out recently) and now has a milestone of 3.3.7. Full details on Github here:
Calling .popover('hide') prevents popover from open on next click #18860
Good news though, there is a simple workaround that can be applied while waiting for it to be committed to 3.3.7. I'll post it as a solution.
Update 2
Agreed: this is a duplicate of the newly proposed 'duplicate of' question. Looks like the asker encountered the issue just before me! I'll leave the question here though as clearly I (and others) didn't find that one at the time of looking so hopefully it can be of help.

Thanks go to GitHub user 'julesongithub' for providing this workaround. Putting this on the same page as a popover you wish to close using .popover('hide') solves the issue. Essentially it works by resetting the 'inState.click' variable for the popover which the hide method isn't doing.
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});

The workaround I use is the click() function on the element that fires the popover, because of the following rationale: You just want to 'hide' the popover when it is being shown and the element to show the popover is also the element to hide it. That being said, click() will make it disappear. Instead of
$('#element').popover('hide')
I use
$('#element').click()
It works well so far...

I fixed this by changing the trigger option when instantiating the popover.
$('#element').popover({ trigger: 'manual' });
Note that the this option requires you to both show and hide the popover.
Source Thread
More popover options

CKEditor TextArea Refresh And Destroy

I'm running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.
I used the following code:
$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();
However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.
Also, if a somewhat related, but separate issue.
I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can't seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don't have to refresh the page whenever the change the dropdown selection. I've already tried the built in destroy method. It doesn't seem to do anything visually, the editor does not revert back to a simple textarea.
Just in case you were going to ask for some more code, here is what my HTML page looks like:
<textarea id="mtxDescription" name="mtxDescription"></textarea>
Here is how I initialize the editor
CKEDITOR.replace('mtxDescription', {
sharedSpaces: { top: 'ed-top'}
});

I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data('key')) I still need a way to remove the editor at runtime.

How to get a return value from a KendoUI modal window

A have a KendoUI window that gets its content from a partial view.
That content can be, for example an input box.
What is the best way to get the value entered on that input box, when the window is closed?
I guess some kind of callback function must be used along the window's close event; if this is right, is it possible to post an example of the code?

You're on the right track. Here's an quickly drawn up sample that should help you get going:
http://jsfiddle.net/latenightcoder/DmAMc

Changing FORM element values with JavaScript only works once

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).