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);
});
Related
I created the popup when I am trying to call action on click for close pop up icon no change is shown.
In index.html in bottom there is code for pop up, this will be shown when user will click on change zip code link.
<!-- Pop up div -->
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
<!-- html of change zip code -->
<div class="hidden" id="updateZipContent">
<div class="zipContent">
<div class="padding-bt-2">Please enter new zip code</div>
<div class="row">
<div class="text-left col-md-6 padding-bt-2">
<input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
</div>
<div class="text-left col-md-4">
<button class="btn btn-primary form-control">Update</button>
</div>
</div>
</div>
</div>
Change zip code action is written in autoQuotectrl.js
$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
To keep other action separate I wrote new controller utilityCtrl.js.
Here I wrote action for hide this popup .
$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}
But nothing is working, please help me to understand what I am missing here.
It seems $rootScope.myModal is not accessible in utilityCtrl
You don't invoke function closePopup in template.
See example on plunker.
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup()">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
they are in two controller,so the $scope is diferent ,you can use $rootScope.$broadcast and $scope.$on
This is a list representation of data which is coming from a php database.The list is fetched using a foreach php loop and the data inside the achor tag is populated accordingly.
<?php foreach($array as $iterate):?>
<div class="col-sm-3">
<div class="panel panel-default">
**<a onClick='theFunction();' id="hello" href="#myModal" style="text-decoration:none;">**
<div class="panel-heading">
<img src ="audi_sillhouete.jpg" style="height:100%; width:100%;">
<p id="10" style="position:absolute; top:10%; padding-left:5%; padding-right:15%;"><?php echo $iterate->test_name ?></p>
</div>
</a>
</div>
</div>
<?php endforeach;?>
As you can see here, inside the anchor tag i have href-ed it to a modal box which will show a message whenever the user clicks on any of the link. There is a button in the modal window which will take the user to a different page.
The issue is that i want to pass certain value along with the url, but cannot do so as the link to the next page is defined in the modal window specification part.
So i came up with this solution. I thought of using the id attribute of the anchor tag, I tried to get the id attribute of the anchor which was clicked using javascript.
<script type="text/javascript">
function theFunction()
{
var id = $('a', this).attr('id');
alert(id);
}</script>
From this i wanted to initialize a php variable and then use that php variable to pass as value in the href of the modal window button. But the value i am getting in the alert box is 'undefined' for some reason. I have tried all possible combinations of this.
$('a',this).attr('id');
$this.id;
Everything return 'undefined'.
Reference-This is the code for the modal window part.
<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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Instructions</h4>
</div>
<div class="modal-body">
Your test is about to commence. A timer will be initiated after the moment you start the test. You may choose to answer a question, or leave it empty. You can also attempt the questions in any order that you find suitable.<br><br>Upon completion of the test, click on "Submit" to see your performance statistics.<br><br><br>Good luck!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Please try this
$(document).on('click', 'a', function () {
alert(this.id);
});
DEMO
You can use other attribute in anchor like :
<a href='' id='hello' para-id='somevalue'></a>
alert($("#hello").attr("para-id"));
The below jQuery function runs through all the a tags on page load and adds id to the end of the link.
$(function(){
$('a').each(function(){
var id = $(this).attr('id');
var url = $(this).attr('href') + '?id=' + id;
$(this).attr('href',url);
});
});
https://jsfiddle.net/yc1hswet/
I am using bootstrap 3.3.2. How could I remove the data from modal? I want the modal to appear as fresh as it was loaded the first time.
For example a modal like :
<div class="modal fade" id="pass" tabindex="-1" role="dialog" aria-labelledby="mypass" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<h4 class="modal-title text-center" id="mypass">Characteristics</h4>
<div class="modal-body">
<form class='form-inline'>
<div class='form-group'>
<label for='playernumber_pass'>Player number</label>
<input type='text' class='form-control' id='playernumber_pass' name='playernumber_pass'/>
</div>
<label class='checbox-inline'>
<input type='checkbox' id='completed' name='completed'>Completed
</label>
</form>
</div>
</div>
</div>
</div>
when loaded again has the field filled with the previous data. How could I make sure, that the fields and other items inside the modal are loaded fresh?
Here is the fiddle that showing the same data is loaded again, when modal reloads : fiddle
I tried the following, but it didn't work :
$('#pass').on('hidden.bs.modal', function () {
$('#pass').removeData();
})
You could cache .html() of the modal and restore it on a X.bs.modal event
var modalFreshContents = $('#pass').html();
// content of the modal will be restored when the modal is fully hidden
$('#pass').on('hidden.bs.modal', function (e) {
$(this).html(modalFreshContents);
});
Demo
you can use model on show event. This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. check model events
$('#pass').on('show.bs.modal', function () {
$('form.form-inline')[0].reset();
});
Hi I am trying to get the varying modal content but I am not sure where I am going wrong as I am new to JavaScript
My Code:
<a data-toggle="modal" data-target="#exampleModal" data-whatever="sampleText" >testData</a>
<div class="modal fade bs-example-modal-sm" tabindex="-1" id="exampleModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
My aim is to display the "sampleText" in the input text box. But I dont get it. I am only getting empty box.
Also is there a way to display a list of strings in the input box.??
Sorry if my question is very basic.
S
There is no element with class of .modal-body in your markup, the selector should be .modal-content input.
modal.find('.modal-content input').val(recipient);
If by a list of strings you mean *-separated values, you can define an array and join the elements using Array.prototype.join method:
var list = ['an', 'array'];
var string = list.join('glue');
// ...
modal.find('.modal-content input').val(string);
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();