Develop Reference

How to change text inside modal using jquery?

I am using this modal:
<div id="myalertbox" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
You have a new notification!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Which pops up and says "You have a new notification!". I pop it up by using this script:
<script>
function showAlert() {
$("#myalertbox").modal({
"backdrop": "static",
"keyboard": true,
"show": true,
});
}
</script>
I dont know how to change the text inside though? I tried with .text and .html but it doesn't work.

Change text before calling the modal as
$("#myalertbox .modal-body").text('pass your text here');

Before initiating the modal, you can change its html like:
$("#myalertbox .modal-body").html('pass your html here');
// It will put your html inside the div having Class .modal-body which is enclosed with a div having ID #myalertbox
and after that initiate its modal as usual way.

As the content is not nested into any tags.
It's better to use this one below.
var btnHtml='< button type="button" class="close" data-dismiss="modal">
&times ;< /button>';
$('#myalertbox .modal-body').html(btnHtml +"your text here");

Getting the id of the anchor tag which was clicked

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/

how to get varying modal content

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);

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();

Passing Data to Bootstrap Modals

I am trying to create a simple modal using twitter bootstrap. The function of that modal is to take the name of the link clicked on, and use that name as a header. Each of the names are in a Django Database. I followed this link for reference: Passing data to a bootstrap modal
#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open- AddBookDialog " href="#addBookDialog">{{ name }}</a><br />
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
#JavaScript
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
$("modal-body #nameId").val( myNameId );
});
</script>
What the above does is displays a text box with the characters name in the box. What I would like is to have the name as the header, not in a text box. When I remove the textbox, and place a header tag with the same id and name, nothing will show. Is there a way to complete this task.

the header is the first h3 in the modal.
So you need to add a h3 element under ".modal-header" with an id and set the .html() of that element. :)
Look here for reference: http://twitter.github.io/bootstrap/javascript.html#modals
Here's the code:
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 class="hdrtitle">This is the header</h3>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
Using a code like:
$('.modal .hdrtitle').html('This is the header');
and then showing it with:
$('.modal').modal('toggle');
works.

The one-off way
If this is the only time you'll ever need to do a UI-binding behavior in your site/app, do something like this:
$('.header-link').click(function(e) {
$('.modal-header h4').html($(e.target).html())
})
CodePen Demo
This will just take the text (actually the HTML) in the link itself and put that in the header.
Using a library
If you plan to do these sorts of cool tricks in more parts of your app, consider using a UI-binding library like Angular JS or Knockout. This way you can data-bind parts of your UI with events.

I found the answer. Thanks to #PaoloCasciello for a layout.
Instead of an .on function in javascript, it really needed to be .html. So here is what the final code will look like.
<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 id="nameId" />
</div>
<div class="modal-body">
<p>some content</p>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
var myNameDescription = $(this).data('description');
$(".modal-header #nameId").html( myNameId );