Develop Reference

How to pass data value from Bootstrap Modal to Parent form

How to pass data attribute or click event from Bootstrap modal to parent form/window.
for example,
On clicking the below input box, the modal will popup with divs having data attribute
<input type="text" name="menu_image_id" class="form-control" data-toggle="modal" data-target=".show_modal_w" />
<input type="text" name="menu_image_id_2" class="form-control" data-toggle="modal" data-target=".show_modal_w" />
Modal window
<div class="modal fade show_modal_w" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div data-id="1" data-dismiss="modal">Hello</div>
<div data-id="2" data-dismiss="modal">Welcome</div>
<div data-id="3" data-dismiss="modal">Morning</div>
</div>
</div>
Now when the user clicks the div inside the modal for example either Hello, Welcome or Morning, then we need to pass the id value from modal to parent input box with name menu_image_id.
I tried using the below close function, but not able to get the modal data id to parent window.
$('.show_modal_w').on('hidden.bs.modal', function (e) {
$(e.relatedTarget);
})

I'm trying a different way than you did,
instead of capturing the hidden.bs.modal, I'm capturing the div.on.click, so instead of:
$('.show_modal_w').on('hidden.bs.modal', function (e) {
$(e.relatedTarget);
})
I wrote
$("body").on("click", ".show_modal_w div[data-id]", function() {
$("input[name='menu_image_id']").val($(this).data("id") + " - " + $(this).text());
$(".show_modal_w").modal("hide");
});
And here is a jsfiddle: https://jsfiddle.net/f9urohoo/
I put the id and the text of the div clicked in the input with [name="menu_image_id"] but you can adapt that as you wish.
Tell me if it is what you wanted

How to pass and get modal value

First, my bootstrap modal is like this:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<-- modal
header -->
<div class="modal-body">
<form class="form-horizontal" id="composeForm" method="POST" action="composeMessage">
<div class="form-group">
<label class="col-sm-2 control-label">To</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="sendToId" name="requestId">
</div>
</div>
<div class="line line-dashed b-b line-lg pull-in"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Message</label>
<div class="col-sm-8">
<div class="btn-toolbar m-b-sm btn-editor"
data-role="editor-toolbar" data-target="#editor"></div>
<div id="editor" class="form-control" style="overflow:scroll;
height:150px;max-height:150px" contenteditable="true"></div>
<textarea style="display:none" id="divText" name="message"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="sendSave" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
and my Javascript so far is like this:
$(function(){
var message;
$("#myModal").on('show.bs.modal', function(event){
var atag = $(event.relatedTarget); //I'm using a tag to open modal
var userNick = atag.data("nick");
var userComp = atag.data("comp");
var modal = $(this);
/*
skipped all dynamically setting values & changing attributes of tags
*/
document.getElementById("divText").value = document.getElementById("editor").innerHTML;
message = document.getElementById("divText").value;
});
$("button.btn.btn-primary").on('click', function(){
alert(message);
});
});
First, I have foreach loop in the same JSP, and the anchor tag opening the modal is in it. So I have multiple anchor tags.
The anchor tag opening modal is like this:
<a href="#myModal" data-target="#myModal" data-toggle="modal"
data-nick="${f.recomUserNick}" data-comp="${f.compatibility}">
I managed to set values and change attributes dynamically, and now I'm trying to send data from modal to controller (Spring MVC).
However, I have problem getting the 'message'. In the modal, the client writes something, and I first want to get the string value of that and check on alert to see if I can later send it to controller. What happens is that when I first open the modal, write something in it, and click the button (in the modal-footer, with id="sendSave"), I can't get the message. I close the modal, open it again -- in the message area it has what I wrote. I click the button, then I see my message in the alert window.
First, when I reopen the modal, I don't want to see what I wrote before, and I want to get the string value the first time, without having to open the modal again. I don't have a problem getting the string value, so I thought the problem was about where I put the codes, so I shifted my codes around for hours with no success. Can you please tell me how I should fix my codes? Thanks in advance.

You set the 'message' var in $("#myModal").on('show.bs.modal'.
At that point (in the first show) the message hasn't been typed yet.
If you move that code to the clickhandler, it takes the message after you have typed it:
$("button.btn.btn-primary").on('click', function() {
document.getElementById("divText").value = document.getElementById("editor").innerHTML;
message = document.getElementById("divText").value;
alert(message);
});

Show Modal From dynamically inserted button

I have a table element :
<table id="postcon-table-success" class="table table-hover">
</table>
and I am inserting rows dynamically in the table:
postConTable = "<tr><td><input id=\""+value.processId+"-details\" type=\"button\" class=\"btn btn-primary view-details\" value=\"View Details\" /></td></tr>";
$("#postcon-table-success").append(postConTable);
here button has id as dynamic variable (processID) followed by "-value"
eg.230002-details, where 230002 is processID.
Now I am clicking the button
$('#postcon-table-running').on('click',".view-details", function() {
console.log(this.id);
$('#myModal').modal('show');
});
which is calling the jquery function and the log is getting printed :
230002-details
But its not showing the modal which is in the body tag.
<body id="fixedbody" data-spy="scroll" data-target=".bs-docs-sidebar">
<div id="master-container" class="container-fluid">
<div id="myModal" class="modal hide fade" tabindex="-1" aria-hidden="true">
<div class="modal-header">
<h3 id="myModalLabel">Please wait</h3>
</div>
<div class="modal-body">
<p>We are fetching data</p>
</div>
</div>
Please help.
To ADD- when I create my modal in the parent tag of '#postcon-table-running', it is working.
But I cant do it that way because I want to implement same functionaliy from various buttons in various other divs.

It could be that the modal is not visible to the on click function. Put your modal at the very end of the page.

Select box initialized after not working properly

I'm trying to get the value of a select box but it always bring me the first value.
At the begin the select is empty. I press a button that shows the modal and loads the info of the select box. I think the problem comes 'cause I'm not loading the select options until the button is pressed because I tried with another select and it worked well
this is the modal:
<div class="modal fade" id="myModalPremios" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Premios</h4>
</div>
<div id="premios" class="modal-body">
<jsp:include page="../frag/premios-list-frag.jsp"/>
</div>
<div class="modal-footer">
<button class="btn btn-danger" aria-hidden="true" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
this is the form inside the modal:
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="hidden" id="id" name="quiniela.id" value="${quiniela.id }"/>
</div>
<div class="form-group">
<label for="plantillaOwnerQuiniela" class="col-sm-4 control-label">Quiniela</label>
<div class="col-sm-5">
<select class="form-control" name="quiniela.plantillaOwnerQuiniela" id="plantillaOwnerQuiniela" ${read }>
<c:forEach items="${lista2 }" var="pl">
<option value="${pl.id }"
<c:if test="${pl.id == quiniela.plantillaOwnerQuiniela.id}">selected="selected"</c:if>>${pl.nombrePlantillaOwner} - ${pl.precioQuiniela}Bs</option>
</c:forEach>
</select>
</div>
</div>
</form>
this is how i show the modal:
$("#myModal").modal("show");
I've read that maybe the element is not present in the Dom, then I've tried using this function to see if something happen but It doesn't work.
$('#plantillaOwnerQuiniela').on('change',function() {
var selectVal = $('#plantillaOwnerQuiniela :selected').val();
alert(selectVal);
});

Just a guess, but it seems like the plantillaOwnerQuiniela element is not present in the DOM at the time you are binding your change listener.
Try the following:
$("body").on("change", "#plantillaOwnerQuiniela", function(e){
var selectVal = $(e.currentTarget).val();
alert(selectVal);
});
Use .on() to attach the listener to body and delegate it to the select, vs. attaching to the select itself; which may or may not be present on pageload.

You should bind the change event to the popover initialize method like this:
$('.button').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
}).parent().delegate('#plantillaOwnerQuiniela', 'change', function() {
alert($(this).val());
});
Here is the example !

I fixed my own problem by including the modal-body class when trying to read the value of if. Like this:
$('.modal-body #plantillaOwnerQuiniela :selected').val();

Bootstrap Modal Not Displaying, outputs JS

I have a bootstrap modal setup with the following code:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Testimonials</h3>
</div>
<div class="modal-body">
<p>Test Text Here</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<button class="btns btn-3 btn-3g btnsx" data-toggle="modal" href="#myModal">More</button>
However, I am getting only a black background when clicking the button.
I am also seeing some of my js appearing at the bottom of my page (only when the modal code is inserted):
.on('submit', function() { var form = $(this); var post_data = form.serialize(); //Serialized the form data for process.php $('#loader').html('loadng Please Wait...'); $.ajax({ type: 'POST', url: 'http://shazconstruction.com/test/process.php', // Your form script data: post_data, success: function(msg) { $('#loader').html(''); // We know this is the form that needs fading in/out $('form#contactUs').fadeOut(500, function(){ $('form#contactUs').html(msg).fadeIn(); }); } }); return false; }); });
Here is the site where everything exists:
http://bit.ly/1dbf4Rz
For reference, this is the section with the modal setup:
http://i.imgur.com/1SlNR1s.png

Check out the source of your page. However it's being generated has a pretty clear error: http://screencast.com/t/GZv0KwPktoO
Look at line 762. There is no opening script tag, so that would explain why you're seeing your JS appearing at the bottom of the page.
As for the rest of it, BaBL86 is right, you will want to fix the issue with your mousewheel script as it's throwing errors that cause the page to stop rendering JS.
Once those two issues are fixed, let us know if there are still problems.
Edit: You also have incorrect HTML for your modal window (based off the bootstrap 3 documentation). Try using this instead, and moving your modal window to right after the body tag:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Test Header</h3>
</div>
<div class="modal-body">
<p>Test Text Here</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>

You have an error in your mousewheel function. Check this answer, it's about this problem:
function handler(event) {
< ---- >
return $.event.handle.apply(this, args); // error here
}
Edit your function to:
return $.event.dispatch.apply(this, args);

You have given !important to .hide. Remove the imporant
From this
display: none!important;
To
display: none;
I can also see that you are not giving any background-color. Use the same code from bootstrap