We Keep Coding

link button to another page

I know there a lot of things related to this stuff but I find it quite hard to implement
My current result is this. I added some details to the code to add to the DB then as I pressed the next button, it goes to another same page but its all about update and its not going anywhere to the page that I linked it to.
So far, this is what I've made to link the button to another page
if(!employeeExist){
$("#nextBtn").html("Next");
$("#nextBtn").removeClass("btn-success")
$("#nextBtn").addClass("btn-primary")
$('#a').hide();
$('#c').hide();
$('#d').hide();
$("#updateBtn").hide();
}else{
$("#updateBtn").html("Update");
$("#updateBtn").removeClass("btn-primary")
$("#updateBtn").addClass("btn-success")
$('#a').show();
$('#c').show();
$('#d').show();
$("#nextBtn").hide();
}
$("#updateBtn").click(updateCompanyInfo);
$("#nextBtn").click(updateCompanyInfo);
and this
if(employeeExist) {
$alertDiv("success","Company related information was successfully updated.",true);
} else {
$alertDiv("success","Company related information was successfully added.",true);
var fam = "${pageContext.request.contextPath}/employee/details/family?id="+empID;
window.location.replace(fam);
}
Here is the redirect part of my code
function Redirect() {
window.location="${pageContext.request.contextPath}/employee/details/family?id="+empID;
}
and the HTML part
<!-- Update -->
<div class="col-md-2 col-md-offset-8">
<br>
<div class="input-group">
<span class="input-group-btn">
<button id = "updateBtn" class="btn btn-success marginBtn">Update</button>
</span>
</div>
<br>
</div>
<!-- Next -->
<div class="col-md-2 col-md-offset-7">
<br>
<div class="input-group">
<span class="input-group-btn">
<button id = "nextBtn" class="btn btn-primary marginBtn" onclick="Redirect();">Next</button>
</span>
</div>
<br>
</div>
So how can I achieve this? Am I lacking something in the code or am I doing it the wrong way? Help me please!

Why button will not append text from textarea to a panel (Bootstrap)?

I am trying to trigger an event with a button that takes text from a textarea and sends it to a panel using the Bootstrap Framework (v.3.3.7). Currently trying to do this using an event listener in Javascript rather than assigning an ‘onclick’ value for the button.
HTML:
<div class="container-fluid">
<div class="row">
<!-- Panel where text will be appended to -->
<div id="mainChatBox" class="panel-body" style="height:435px; overflow-y:scroll"></div>
<!-- Textarea and button -->
<div class="panel panel-footer" style="height:40px">
<div class="form-group col-md-10 col-lg-10">
<input type="text" placeholder="Type your message here" class="form-control" id="messageBar" />
</div>
<div class="input-group-btn col-md-2 col-lg-2">
<button id="sendMessageButton" class="btn btn-default">Send</button>
</div>
</div>
</div>
</div>
Javascript
var sendMessageButton = document.querySelector('#sendMessageButton');
var messageBar = document.querySelector('#messageBar');
var mainChatBox = document.querySelector('#mainChatBox');
sendMessageButton.addEventListener("click", function (event) {
var message = messageBar.value;
mainChatBox.innerHTML += message + "<br />";
});
I tried debugging by using this code and another version where I instead assign the button an ‘onclick’ value and then keep the function for it.
Here is a link to a reddit post with that version of code where I tried to find a solution with assigning an ‘onclick’ value to the button instead of using an EventListener.
Reddit post link
I need to know why when the event is triggered by the button that the text will not be appended to the mainChatBox when using either the method with the 'onclick' value assignation to the "button" tag for sendMessageButton, or the EventListener in the Javascript.

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>

JQuery Bootstrap Modal Window somehow reload/clears the parent fields in Ruby on Rails project

My problem is when clicking OK in the modal window, which goes to javascript function in the modal will reload or clear the parent fields ?
Here is the use case:
1. enter name string into parent name form input
2. click on Test Modal Button
3. a modal window appears
4. click on the modal window "OK" button. (with the cancel button its not a problem)
5. parent name input was cleared. Possibly the parent was reloaded.
I'ved created a simple rails project with a generated scaffold Post name:string. Nothing special but I just enabled bootstrap js and css.
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/javascripts/application.js
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/stylesheets/application.css
And then, I inserted this code into _form.html.erb, you can view it here:
https://github.com/axilaris/bootstrapmodal/blob/master/app/views/posts/_form.html.erb
<div id="windowCreateInvoiceProductDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
×
<h3>Please enter a new product</h3>
</div>
<div class="modal-body">
<div class="divDialogElements">
Code:<input class="xlarge" id="xlInput" name="modal_code" type="text" />
<br>
Name:<input class="xlarge" id="xlInput" name="modal_name" type="text" />
<br>
Description:<input class="xlarge" id="xlInput" name="modal_desc" type="text" />
<br>
Price:<input class="xlarge" id="xlInput" name="modal_price" type="text" />
</div>
</div>
<div class="modal-footer">
Cancel
OK
</div>
</div>
<div class="divButtons">
<a data-toggle="modal" href="#windowCreateInvoiceProductDialog" class="btn btn-primary btn-large">Test Modal Button</a>
</div>
<script>
$(document).ready(function() {
$('#windowCreateInvoiceProductDialog').bind('show', function () {
// document.getElementById ("xlInput").value = document.title;
});
});
function okClicked () {
$('#windowCreateInvoiceProductDialog').modal('hide');
// document.title = document.getElementById ("xlInput").value;
// closeDialog ();
};
</script>

found the answer!
instead of this
<a href="#" class="btn btn-primary" >OK</a>
replace with this
<button type="button" class="btn btn-primary" onclick="okClicked ();">Save changes</button>
and thats all to it, and its flexible, i could hide, not hide and do something.

jquery modal: closing a modal and then having it available as a clickable option

I been scratching my head on this one for a while.
Writing a plugin in grails that calls on bootstrap-mini.js and most of its css. Everything works fine. The issue I am having is I have a remote form which onComplete runs java script:
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListModal/_modalcreate.gsp
<g:javascript>
function ${controller}CloseModal() {
var myClone=$('#BuildModal${id}').clone();
$('#BuildModal${id}').dialog().dialog('close');
$(".modal-backdrop").hide();
$('body').removeClass('modal-open');
//var myCloner = myClone.clone();
$('#${divId}1').hide().append(myClone);
//$('body').append(myClone);
<g:if test="${!disablecheck.equals('true') }">
var controller="${controller }";
var divId="${divId }";
$.get('${createLink(controller:"MailingListEmail", action: "getAjaxCall")}?ccontroller='+controller+'&divId='+divId,function(data){
$('#${divId}').hide().html(data).fadeIn('slow');
});
</g:if>
}
</g:javascript>
The bits at the top of the function is all the things I have tried so far.
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListEmail/contactclients.gsp
<div class="tbutton">
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender">
New Sender?</button>
<div id="mailerSenders1">
<g:render template="/mailingListModal/modalcreate" model="[title:'Add Senders Email', controller: 'mailingListSenders', callPage: 'form' , divId: 'mailerSenders', id: 'SENDERS' ]" />
</div>
And finally modelForm which is included on the top of the modalcreate.gsp (now shown)
<div class="modal fade" id="BuildModal${id}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<g:formRemote id="${controller}" name="urlParams" class="form-horizontal" url="[controller:controller, action:'save']"
update="BuildModal${id}" onComplete="${controller}CloseModal()"
>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>${title }</h3>
</div>
<div class="modal-body">
<div class="form-group">
<g:render template="/${controller }/${callPage }"/>
<g:submitToRemote class="myformsubmit" url="[controller:controller, action:'save']" update="BuildModal${id}" onComplete="${controller}CloseModal()" value="Create" />
</div>
</div>
</g:formRemote>
</div>
</div>
</div>
</div>
So it is a remote Form that submits can calls the above CloseModal
The question is when I Close this how do I make it available again when the user clicks the button to create new email ?
After adding all the cloning at the top of java script the only difference I was able to make was to make it display the backdrop on 2nd click so it went black on 2nd click but did not show up the modal content.

ok got it working by doing this:
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender"
Now adding
onClick="runCheck()"> .....
<g:javascript>
function runCheck() {
$('#mailerSenders1').show();
}
</g:javascript>
That seems to work fine, it now loads up the page, just to add when I did body it just loaded it up again from the commented out attempts, modal.hide etc did not work and the hide attempts just showed it up under some other layers of the same page.. anyways this works fine now. sorry