TinyMCE reload editor - javascript

I have simple modal window with textarea:
<div class="box-modal" id="product_modal">
<div class="box-modal_close arcticmodal-close"><img id="closePopupImage" src="/images/icons/popup_icon_close.png"></div>
<div id="product_fields">
<span class="product_label">{'TEXT_PRODUCT_NAME'|tr}:</span>
<input type="text" class="product_name">
<span>{'TEXT_PRODUCT_PRICE'|tr}:</span>
<input type="text" class="product_price">
<span>{'TEXT_PRODUCT_AMOUNT'|tr}:</span>
<input type="text" class="product_amount">
<br>
<span class="product_label pr_comment">{'TEXT_PRODUCT_COMMENT'|tr}:</span>
<textarea id="product_comment" class="product_comment"></textarea>
<img class="add_one_more" src="/images/icons/add_button.png" title="{'TEXT_ADD_ONE_MORE'|tr}">
</div>
</div>
I have table with button with class .add_products_btn.
My js:
function makeTinyMceEditor() {
tinymce.init({
selector: "#product_comment",
plugins: "link"
});
}
$(".add_products_btn").click(function () {
$("#product_modal").arcticmodal();
makeTinyMceEditor();
});
So when I click in button in first time my tinymce works fine. But when I click on the second button my tinymce doesn't work (think because textarea's ids are the same every time when I click on the button).
How can I remove old id instanse from editor for use them again?
Thanks.

You need to use the remove() API to detach TinyMCE from the DOM before you close your Modal window. You can then use init() again when the modal is recreated.
https://www.tinymce.com/docs/api/tinymce/root_tinymce/#remove

Related

Colorbox breaking <form>

I'm using Colorbox.js for the first time and am having issues with placing a newsletter signup inside of the popup. I am assigning colorbox to my element .newsletter-popup and it is working correctly, however as mentioned the <form> within does not work. I have tested the form and it works correctly when not loading via colorbox?
Also, in the source code of my page I can see some automatically generated colorbox code #cboxOverlay and #colorbox, why do these appear when I've already assigned colorbox to my own element? I'm also not able to set options for colorbox on my element, as they don't work. Have a got this setup incorrectly?
Working Example (Appears after 3 seconds): http://development.ozonecoffee.co.uk/our-journal/
JS
setTimeout(function(){
jQuery('.newsletter-popup').colorbox({
trapFocus: false,
closeButton: true,
onComplete: function(){ $("#email").focus(); }
});
}, 3000);
// Close button
$( ".close-popup" ).click(function() {
$.colorbox.remove();
});
HTML
<div class="newsletter-popup">
<div class="modal">
<div class="close-popup"><span>X</span></div>
<div class="container">
<h4>Title</h4>
<form class="mailing-list-signup" id="subscribe-form" action="http://ozonecoffee.us14.list-manage.com/subscribe/post-json?u=93b92e23751a1d94fe6e57dc9&id=3caae1521b" method="get">
<input id="email" type="email" placeholder="Sign up for our newsletter" value="" name="EMAIL" >
<input type="submit" value="Sign up" name="subscribe" >
</form>
</div>
</div>
</div>

Open On button without access to JS File. Klaviyo. JQuery

I have an issue with js code. I'm trying to call a Pop-Up Box on click of the certain button and it's not working.
My aim is to assign an action to a certain button to open the pop-up when customer clicks on certain button. But the problem is that Klaviyo Pop-Up Box is set to open on page load by default settings are set in JS File that is located on Klaviyo side and i'm not able to change them directly.
Here is a problem similar to my, but not exactly what i was looking for.
Another option i was thinking about is to break the function that opens a pop-up onPageLoad and then to add this function to assign open action to a button.
This is how i thought i could call the pop-up onButtonClick.
My JS code
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$('.button').on('click',function(){
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
});
</script>
or
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$(':button').click(function() {
if (this.id == 'button') {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
$('.button').popup('open');
}
</script>
Button Html Code
<input type="button" class="button" value="Input Button" />
My Pop-Up HTML Code
<div class="klaviyo_modal" id="MainPage_PP" style="display:none;">
<div class="klaviyo_inner">
×
<form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
<input type="hidden" name="g" value="LIST_ID">
<div class="klaviyo_fieldset">
<p class="klaviyo_header">Interested in our Newsletter?</p>
<p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
</div>
<div class="klaviyo_fieldset">
<div class="klaviyo_field_group">
<label for="MainPage_PP_$email">Email Address</label>
<input type="email" id="MainPage_PP_$email" name="email"></div>
</div><div class="klaviyo_fine_print"></div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">
<span>Subscribe</span>
</button>
</div>
<div class="klaviyo_below_submit" ></div>
</form>
<div class="error_message" ></div>
<div class="success_message" ></div>
</div>
</div>
I assigned id="target" to the button to let the JS to make manipulations with it.
The important thing is that the Klaviyo JS file should be load after all actions to let the embedded button work properly.
HTML Code. Button
<input type="button" class="button" id="target" value="Input Button" />
JS Code
<script>
$( "#target" ).click(function() {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP', {
//some var for Klaviyo
...
});
// It is essentially important to load the Klaviyo JS file after all actions
$.getScript("//www.klaviyo.com/media/js/public/klaviyo_subscribe.js")
});
</script>

Show nonunique div class on button click jquery

I want to show the div class of .unhideme on a button press. This class is dynamically generated so there are multiple divs with the same class name. Using JQuery how do I show this block correctly?
<div id="negativeButtons">
<div class="unhideme" name="unhideme" style="display:none">
<h3>Comments</h3>
<textarea name="unhappymanager" id="unhappymanager"></textarea>
</div>
<input type="submit" class="excused" name="negativexcused" value="Excused">
<input type="button" class="unexcused" name="unexcused" value="Unexcused">
<input type="submit" class="commentpushDB" name="commentpushDB" style="display:none" value="Submit">
</div>
Here I have jquery which works for the other buttons but I can't seem to find a function that will show the div.
$(document).ready(function() {
$(".unexcused").click(function() {
$(this).closest(".unhideme").show();
$(this).closest(".unexcused").hide();
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
});
Instead you have to use .siblings() method:
$(".unexcused").click(function() {
$(this).siblings(".unhideme").show();
$(this).siblings(".unexcused").hide(); // <---- ?? why hide the buttons.
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
It's because the buttons and the div are siblings not parents.

On Checkbox click show hide div having same class dynamically

I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance
Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});
Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO

How to use jquery to show hidden form fields

I have three input fields for collecting telephone numbers from users. I display one field and hide the other two. I have placed a link(Add home number) below it and when you user clicks on the link it shows the hidden input field. And I have placed one more link below it when clicked displays the last input field.
<input type="text" />
<a href="#" class="show" >Add Home Number</a>
<div style="display: none">
<input type="text" />
<a href="#" class="show" >Add Office Number</a>
</div>
<div style="display: none">
<input type="text" />
</div>
And the jquery looks like this..
<script>
$(function(){
$(".show").click(function () {
$(this).next("div").show("slow");
});
});
</script>
The first link works fine, But the second one does not work.
I appreciate all help.
Thanks.
you have to use the each function:
like this:
$(".show").each($(this).click(function () {
$(this).next("div").show("slow");
})
);
.next() only selects the next sibling element. You links have no subsequent siblings, because you close the parent element (the div) immediately after. You need to select the next sibling of the div:
<script>
$(function(){
$(".show").click(function () {
$(this).parent().next("div").show("slow");
});
});
</script>

Categories