We Keep Coding

Show/Hide inputs, and selecting approproate inputs

I have a row of links, and depending on which one is clicked, a certain file gets loaded inside the "main" #DIV_main area where things are seen/clicked/viewed.
The HTML file, say HOME.HTML is:
HOME.HTML
<DIV id="DIV_TOP_LINKS">
<a class="nav_links" id="a_a" href="File_one.php">one</a>
<a class="nav_links" id="a_b" href="MAIN_UI.php">MAIN</a>
<a class="nav_links" id="a_c" href="File_two.php">two</a>
</DIV>
<DIV id="DIV_main ">
<!-- files MAIN_UI.php, File_one/two.php etc go here -->
</DIV>
the Javascript is:
$(document).ready(function(){
$("#DIV_TOP_LINKS a").click(function(e){
e.preventDefault();
$("#DIV_main").load(e.target.href);
});
$("#BTN_a").click(function(e){ //these dont work
alert("helo a");
});
$("#BTN_c").click(function(e){ //these dont work
alert("helo b");
});
});
function CH_ANGE(th, txt)
{ switch(txt)
{ case "a_click":
$("#DIV_A_inputs").show();
$("#DIV_B_inputs").hide();
$("#DIV_C_inputs").hide();
break;
case "b_click":
$("#DIV_A_inputs").hide();
$("#DIV_B_inputs").show();
$("#DIV_C_inputs").hide();
break;
case "c_click":
$("#DIV_A_inputs").hide();
$("#DIV_B_inputs").hide();
$("#DIV_C_inputs").show();
break;
}
MAIN_UI.php file is as follows:
<div id="DIV_post_type">
<div id="BTN_a" onclick="CH_ANGE(this, 'a_click')">Button A</div>
<div id="BTN_b" onclick="CH_ANGE(this, 'b_click')">Button B</div>
<div id="BTN_c" onclick="CH_ANGE(this, 'c_click')">Button C</div>
<button id="BTN_Post_Wall" onClick="POST_AJAX_INP_to_PHP_BUTTON()">POST</button>
</div>
<div id="DIV_abc">
<div id="DIV_A_inputs">Div_A and other content
<input TYPE="TEXT" ID="inp_A" NAME="INP_A">
</div>
<div id="DIV_B_inputs">Div_B and other content
<input TYPE="TEXT" ID="inp_B_1" NAME="INP_B_1">
<input TYPE="TEXT" ID="inp_B_2" NAME="INP_B_2">
<input TYPE="TEXT" ID="inp_B_3" NAME="INP_B_3">
</div>
<div id="DIV_C_inputs">
<input TYPE="TEXT" ID="inp_C_1" NAME="INP_C_1">
<input TYPE="TEXT" ID="inp_C_2" NAME="INP_C_2">
</div>
</div>
So the issues which I do not know how to implement are:
If you see the $(document).load function, there are 2 more event handlers for $("#BTN_a").click and $("#BTN_c").click. These two did not work, and then I thought its because essentially, they are 'linked' when the document HOME.HTML loads. The items BTN_a and BTN_c will only be there on the main page if the "MAIN" link click triggers a load of file MAIN_UI.php inside the #DIV_main. Is there a way to link $(document).load functions to elements which will arrive later on the page? or another $(something).load function in jquery I can use?
Thanks a ton in advance.

Can't display html in Bootstrap 3 popover

I have a web page to test out a Bootstrap 3 popover and need to display html in the body.
Here is the html for the button that displays the popover and a hidden div that I use as a template for the popover body.
<button class="btn btn-default" id="status-add" type="button" data-toggle="popover">Add</button>
<div id="popover-content" class="hidden">
<form method="post">
<div class="form-group">
<label class="control-label">Room Status</label>
<input class="form-control" type="text">
</div>
<button class="btn btn-default btn-xs" type="submit">Submit</button>
</form>
</div>
Here is the javascript to display the popover. My apologies for the bad formatting, pasting it in as code doesn't work for some reason.
$(function () {
$('[data-toggle="popover"]').popover()
})
$('#status-add').popover({
trigger: 'click',
html: true,
title: "Add new room status",
content: function() {
var html=$("#popover-content").html()
console.log(html)
return html
},
placement: 'right'
});
The popover is displayed with the correct title but the body is empty. I can see from the console log that the html variable has the correct html in it. I also tried setting the popover html setting to false which makes the html appear in the body as plain text.
Any ideas?

I found the answer to this, it's a bootstrap bug documented at https://github.com/twbs/bootstrap/issues/28290. The solution is to include sanitize: false in the popover settings array.

TinyMCE reload editor

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

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>

Fancybox with button click to who google maps

I want to use fancybox to show a big map (google maps). This is my code:
HTML
<input type="button" id="fancyLaunch" value="open fancybox" onclick='$("#divMapaGlobal").trigger("click");'/>
<div id="divMapaGlobal">
<div id="divMapa" class="googleMapsMunicipios">
<div id="map_canvas_1" class="mapa_canvas"></div>
</div>
<div id="capas_mapa">
<div>
<input type="checkbox" checked id="Capa_1" onclick="chequearCapas();" />
<label>Capa 1</label>
</div>
<div>
<input type="checkbox" checked id="Capa_2" onclick="chequearCapas();" />
<label>Capa 2</label>
</div>
<div>
<input type="checkbox" checked id="Capa_3" onclick="chequearCapas();" />
<label>Capa 3</label>
</div>
</div>
</div>
JAVASCRIPT
$(document).ready(function(){
$("#divMapaGlobal").fancybox({
'width': '100%',
'height': '100%',
'autoSize': false,
'afterShow': function(){
document.getElementById("divMapaGlobal").style.height="85%";
document.getElementById("divMapa").style.height="100%";
//document.getElementById("capas_mapa").style.height="80%";
google.maps.event.trigger(map_1, "resize");
chequearCapas();
},
'onCleanup': function() {
var myContent = this.href;
$(myContent).unwrap();
}, // fixes inline bug
'afterClose': function () {
document.getElementById("divMapaGlobal").removeAttribute("style");
document.getElementById("divMapa").removeAttribute("style");
//document.getElementById("capas_mapa").removeAttribute("style");
initialize_1();
chequearCapas();
}
});
}); // ready
This code show a google map in fullscreen mode, with some checkboxes to show or hide a layer. I need the checkboxes to also be in fancybox. My problem is with TRIGGER "CLICK", if I check any checkbox, it works like button click.
This jsfiddle isn't like my real code, but it can serve. If you click on a checkbox, fancybox must not close.
How can I use fancybox with a button and some html code extra??
Sorry for my english :/