I am trying to delete the parent div of a modal by clicking the delete button. I have a page with div with class="p" and I want to remove them when I submit a form via my modal.
Below is the code
<div class="p">
The first div with class p
<div class="modal fade" id="modal-delete">
<div class="modal-dialog">
<div class="modal-content">
<button class="delete"> Remove <button>
</div>
</div>
</div>
<div>
<div class="p">
The second div with class p
<div class="modal fade" id="modal-delete">
<div class="modal-dialog">
<div class="modal-content">
<button class="delete"> Remove <button>
</div>
</div>
</div>
<div>
I am trying to remove the div with class="p" when I click on the button but I cannot manage to do so, right now I am using:
$('.delete').on("submit", function (e) {
var modal = $(this).closest('#modal-delete');
$(modal).find('.p').parent().remove();
});
You can use contents() and replaceWith() method to remove the parent element except for its child element.
$('.delete').on("submit", function (e) {
var content = $("div.p").contents();
$("div.p").replaceWith(content);
});
Or another way is use unwrap() method :
$('.delete').on("submit", function (e) {
$("div.p").contents().unwrap();
});
Related
I'm working on this bootstrap modal right now, but ran into a problem..
for the modal, I pass the modal data using jquery like this
<script>
$(function()
{
$('#exampleModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget);
offer = button.data('offer');
modal.find('.modal-body .placeoffer h5').text(offer);
});
});
</script>
It gets compensated in the div like this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<style>.close {position:absolute;top:10;left:10;}</style>
<div class="modal-body">
<div class="placeoffer"><h5 align="right"></h5</div>
</div>
</div>
</div>
</div>
</div>
Now my question is, I send the offer text with html tags, but instead of rendering the html tags, they show up as raw data, how can I make them get parsed?
Try html(offer) instead of text(offer)
\o/
I use the below way to load modal content to main html:
main html:
<div class="modal modal-custom fade" id="custom-view">
</div>
.....
modal html(on a Individual html):
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-body" align="center">
<span class="section">Custom Info</span>
{% crispy form form.helper%}
</div>
</div>
</div>
I load the modal content to main html like this:
$(".mod-custom").click(function(ev) {
......
$("#custom-view").load(url, function() {
$("#custom-view").modal('show');
}
}
the url is to render data on modal html
In my situation,How to change the width?
I hope this link might help. Changing modal size.
https://coolestguidesontheplanet.com/bootstrap/modal.php#myModal2
If you want to change the modal-content width, you can add modal-content width when #custom-view on click
$(".mod-custom").click(function(ev) {
......
$("#custom-view").load(url, function() {
$("#custom-view").modal('show');
$('.modal-content').css({'width':'900px'});
}}
just change the class .modal-content if you want to change another class
HTML
<div class="modal fade" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Calculating...
</div>
<div class="modal-body">
<div id="spinner"></div>
</div>
</div>
</div>
</div>
Javascript
var dialog = $('#pleaseWaitDialog').modal({
keyboard: false,
backdrop: 'static',
show: false
});
//A checkbox
$('body').on('change', '.Foo', function () {
dialog.modal('show');
//Updates a Highchart using this.checked and this.id
dialog.modal('hide');
});
Above is a piece of code that allows me to update a highchart on click of a checkbox belonging to class Foo. During updating, it pops up a modal, updates the highChart and closes the modal. The problem is, just before the modal opens, the body auto-scrolls to the top of the page, which I do not want to happen. What am I doing wrong?
I am having a Modal which opens up on a button click. In this Modal, a button uses ng-click to call a function from js file.The function doesn't get called, with no errors.
Outside the Modal the ng-click is working properly.
<div class="container-fluid" ng-app="app" ng-controller="GridCtrl">
....
<div id="partial"></div>
</div>
function openModal() {
jq.get('/Data/openModal?Id=' + Id, function (data) {
jq('#partial').html(data);
jq('#Modal').modal('show');
});
}
Partial Page :-
#model Models.Data
#{
Layout = null;
}
<div class="modal fade bs-example-modal-lg" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="compModalLabel">Master</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="col-sm-12">
<button type="button" ng-click="getData('live')">Live Data</button>
</div>
.....
</div>
var app = angular.module('app', ['ui.grid']);
app.controller('GridCtrl', ['$scope', function ($scope) {
$scope.getData= function (status){
.....
}
}
]);
What is the solution?
See here: Add DOM Elements (that are Angular directives) via jQuery .append()?
You need to have the newly added DOM elements compiled by Angular, with $compile(...)
(Although a more pure AngularJS codewould be better overall, you are mixing JQuery and NG.
http://angular-ui.github.io/bootstrap/#modal)
HTML:
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-vertical-centered">
<div class="modal-content col-lg-pull-3 col-lg-12 col-md-12 col-xs-12 col-sm-12">
<div class="modal-body" id="modaltext">
Hello!!!!!!!!!
</div>
</div>
</div>
</div>
JS:
if(a==81)
{
$("#myModal").css("display" , "block");
}
modal window should display automatically when the condtion is true. it should not display when the button/div is clikced
I mostly do it this way, i send ajax call and on success i do something like this:
Add an anchor tag and pass ahref the modal div id like #myModal in your case hide it like this:
<a id="modalTrigger" href="#myModal" style="display:none;">dummy</a>
put your condition and click anchor tag programmatically:
if(a==81)
{
$("#modalTrigger").click();
}
try something like this
if(some_condition){
$('#myModal').modal('show');
}