I am trying to append body of the bootstrap modal dynamically. Here is the body Markup of the Modal.
<!-- try to indent the codes for readability -->
<div class="modal-body">
<div class="row text-left" style="margin-left: 2em;">
<div class="form-group"></div>
</div>
</div>
and here is the Jquery code to append the contents on click event of a button.
$('.form-group').append(EditHTML);
EditHTML is the markup that got generated dynamically. Now issue is that with every button click event EditHTML is being added with the previous content. I need to reset the Modal, each time button is click.Please help.
Just use .html()
$('.form-group').html(EditHTML);
Description : When .html() is used to set an element's content, any
content that was in that element is completely replaced by the new
content. Additionally, jQuery removes other constructs such as data
and event handlers from child elements before replacing those elements
with the new content.
I'm not sure I have understood right：
$('.form-group').html(EditHTML);
Related
I have a div which has a trigger click associated with it. Inside that div there is another div in which I have binded html using innerhtml.bind(Aurelia). That HTML part contains anchor tag. Now when I am clicking on the link nothing is happening. It is not opening the link.
My HTML structure looks somewhat like this:
<div click.trigger="someMethod()">
<div>
<div innerhtml.bind="">
</div>
</div>
</div>
Please help in what I am doing wrong?
Have a problem that can not solve (I'm new in jScript).
I have 3 rows, each contains 4 blocks, row in HTML below (bootstrap):
<div class="row product-element">
<div class="col-lg-3 col-md-3">
<div class="product-element-container">
<img src="img/1_mini.jpg" alt="Texto Alternativo 1" class="img-thumbnail">
<h4>Some text H4</h4>
<p>Some text p</p>
<p>Some text p</p>
</div>
BUY
</div>
...
...
...
</div>
I have also modal window, that opens when user click "buy" button, and I need to copy and elements from "product-element-container" to modal window.
Problem: I don't know how to create proper "select" in jQuery that will chose div with pressed button. What is the best way to do this?
This is a very simple implementation of what you're trying to do:
$('a.launch-modal').click(function() {
var content = $(this).siblings('.product-element-container').html();
$('#modal-register').html(content);
});
First, you add an on click event listener to all <a class="launch-modal"> elements, the callback (i.e. what happens after you click) gets the HTML content of the corresponding <div class="product-element-container"> element and puts it in the <div id="modal-register>
You can use $(this).siblings('.product-element-container') within your button click event callback function.
First give classes to h4 and your p tags inside the container that you want to copy.
Second add an attribute such as data- btnId="button id here" to the button.
Next bootstrap have a event on modal open show.bs.modal and shown.bs.modal which fires on opening and after modal is being rendered on page respectively.
$( '#your modal id" ).on
('show.bs.modal' , function
(event) {
var button =
$(event.relatedTarget) // Button that triggered the modal
var recipient = button.data
('btn id here which is inside container' ) // Extract info from data-* attributes
var modal = $( this)
modal.find( "h4").text( receipt. parent(". containerClassNameHereWhoseContentToBeCopied"). find("h4.classNameOfH4TagHereWhich. IsInsideContainer).text());
// Do same for P tags.
})
Note* your modal should have h4 and p tags. Or you can put values/text to any tag.
i have bootstrap Modal . and i have 3 images on it . what i want that when i click on any of this images change HTML of div.text , but its change all the div that take .text class i need change the html of the current div that i opened the modal . any help !!
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test111</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test2222</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test3333</div>
</div>
</div>
Jquery :
$("#img1").click(function(){
$(".text").html("Its woking")
});
I just made a Bootply with following code:
$("a[data-toggle='modal']").click(function(){
$("a[data-toggle='modal']").removeClass("active");
$(this).addClass("active");
});
$("#myModal img").click(function(){
$("a.active").next(".text").html("Its working");
});
When a Modal link is clicked, it sets the class active to the link that opened the modal. When an image in the modal is clicked, the text that should be changed can be identified as it's the text next to the active link.
The only adjustment of your markup was to add some example content inside the anchor tag - <a data-toggle="modal" data-target="#myModal">Modal</a> instead of <a data-toggle="modal" data-target="#myModal"></a>, otherwise it wouldn't be possible (at least for this example) to open the modal.
Just in case - the bootply already wraps the code in a $(document).ready(), so the above code has to be wrapped in
$(document).ready(function() {
// above code here
});
in order to work.
Update: As mentioned as comment, above approach doesn't work for the original markup because there the div with the class text is not next to the link, but there are other divs between them.
I've adjusted this in another Bootply with following code change:
$("#myModal img").click(function(){
$("a.active").closest(".Widget").find(".text").html("Its working");
});
When the image is clicked, closest() selects the closest parent of the active link and find() selects the child element with the class text.
Depending on the actual markup it's also possible to select closest(".press") instead of closest(".Widget") (both will work for this example), it's only necessary to select a parent container of the link and the text.
Because Bootply was sometimes down when I made these changes, I've added this also in a Fiddle without bootstrap, just as example for the functionality.
For reference: http://api.jquery.com/closest/
can not see where $('#img1') in the code your provided. But I guess what you need is $(this), something like:
$('.imgs').click(function(){
$(this).html()....
});
I have a generic piece of html code with form fields which I reuse in several places. When opened inside a bootstrap modal I would like the content to fill the entire modal, but when used elsewhere I don't want it to be as wide. I wanted to do this using ng-class, using code like this:
<div ng-class="modal ? 'col-sm-9' : ['col-sm-9 col-lg-5']">
content...
</div>
The problem is: how do I check if the code is inside a modal or not? Is there some function I can call or some variable to read? I would like to avoid populating all modal-controllers with some isModal() function.
I would recommend using CSS for this. The browser would then identify if the snip-it appears within an element defined as the modal and the correctly apply the style.
Assuming you are using LESS with your bootstrap implementation an example is below. But it should give you a general idea either way.
LESS CSS markup:
div.content {
.col-lg-5
}
modal {
div.content {
.col-sm-9;
}
}
HTML:
<div class="modal">
<h1>Heading</h1>
<div class="content">
content...
</div>
</div>
Give id= "mymodal" to the div.
Then in script create a click function and call this div by id :
$("#mymodal").show();
The modal shows with its content.
On page load I bind Event Handlers with content which is hidden on at the time of page load.
If users clicks on the button, the hidden content is pulled and replaces the main content of the page, Now the event Handlers which were initially binded do not work.
HTML code on Page load
<p> Initial content of the page </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
After the user clicks a button the new dom looks some thing like this
<p>
<div>Some Hidden content</div>
</p>
After the manipulation the event handlers binded to the div element do not work any more. Please notice that the div goes into the P element after DOM Manipulation.
jQuery Code:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later);
});
$(document).ready(function(){
$('.show-later').click(function(){
// Do something.....
});
});
You're not moving the <div>, you're just taking its content (a text node) and copying that to the paragraph. Contrary to what you've stated in the question, the resulting DOM will actually look like this:
<p> Some Hidden content </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
The <div> is still there, it still has content, and it still has the event handler for click bound to it; but it's also still hidden, so there's no way you can click on it.
I'd suggest that you actually move the <div> into the <p> element, like so:
$('.show-later').show().appendTo('p');
That will select the <div>, make it visible, and then move the element itself into the <p>.
have you tried to change your code like this?
$(document).ready(function(){
$(document).on('click', '.show-later', function(){
// Do something.....
});
});
Update2:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later).addClass('show-later');
});
Update1: I'm not sure, what your problem exactly is. Maybe you want to make a jsfiddle-example...
The 'on'-Method registers events so that even if you remove the element a make a new one, the events is already registered.
If you do
var show_later = $('.show-later').html();
$('p').html(show_later);
then no event handler bound to .show-later will become bound to the p. All you're doing is changing the contents of the p. I suggest changing the HTML as such:
<p class="hide-later"> Initial content of the page </p>
<p class="show-later" style="display: none;"> Some Hidden content </div>
<button id="button"> Click Here to change content</button>
and the javascript as such:
$('.show-later').show();
$('.hide-later').hide();