I have got a a element for invoking modal:
<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a>
And, say this is my modal:
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
I can bind functions to events fired by modal:
$('#myModal').on('hidden', function () {
// do something…
})
My question is: How can i access the a element -which invoked the modal- from my event subscriber function?
It was solved in Bootstrap 3.0.0 thanks to event.relatedTarget.
$('#your-modal').on('show.bs.modal', function (e) {
var $invoker = $(e.relatedTarget);
});
You have to listen to:
$('[data-toggle="modal"]').on('click', function() {
$($(this).attr('href')).data('trigger', this);
});
$('.modal').on('show.bs.modal', function() {
console.log('Modal is triggered by ' + $(this).data('trigger'));
});
You can of course replace show.bs.modal with shown.bs.modal or any other event they fire.
Note that this is for Bootstrap 3.0.0. If you're using 2.3.2 you need to get rid of .bs.modal (I think).What I like about this solution: you do not have to remember who is this, self, that and other proxy calls workarounds.Of course, you have to test if the href attribute is not a real link (the dynamic modal loading option).
The modal element has a data object named modal that saves all the options that are passed. You can set a 'source' data attribute on the element that triggers the modal, set it to the ID of the source, and then retrieve it later from the options variable.
The trigger would be:
<a id="launch-modal-1" class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" data-source="#launch-modal-1">Launch Modal</a>
In the event callback, get the modal data object, and look at the source option:
$('#myModal').on('hidden', function () {
var modal = $(this).data('modal');
var $trigger = $(modal.options.source);
// $trigger is the #launch-modal-1 jQuery object
});
Currently it's not available out-of-box. There is a feature request for it and a work-around if you want to edit the bootstrap-modal code yourself.
See here
I had a situation where I had to bind some data related to the "invoker", just like you said.
I've managed to solve it by binding a "click" event to it and working with the data like this:
The invoker
<img id="element" src="fakepath/icon-add.png" title="add element" data-toggle="modal" data-target="#myModal" class="add">
The JS to catch data related to the invoker (Just some code example)
$('#element').on('click', function () { // Had to use "on" because it was ajax generated content (just an example)
var self = $(this);
});
Like this, you can handle the data related to your invoker anyway you want.
Related
I'm trying to create a modal that allows a user to edit a memo field on a corresponding database.
The issue is, it works until I submit some form data, after that the textarea is not updating with the new data, it just displays the submitted data.
Some things to bear in mind:
The memo field is stored as plain text within the backend database.
The 'AjaxGetData.wc' (see code below) returns the field content in HTML format.
I'm using a javascript class called jquery.form.js to submit the form data within the modal.
So, I have a modal that contains a form and on that form is a textarea, the name of this textarea is changed dynamically depending on what element was clicked within a data table.
Then, when the href is clicked to open the modal an ajax request is run which collects the data (with HTML formatting) for the requested element and inserts it into the textarea using $('#myTextArea').html(string).
This all works, but after submitting some changed text all subsequent modal requests load the first submitted string no matter which row I click within the data table. Although in the console.log it is showing the correct string being returned by the ajax post.
Ideally, I like to understand why the .html() function stops working after I have submitted some data.
Please see my code below :
\\HTML
<!-- START -->
<div class="modal fade" id="editLogoPnotModal" tabindex="-1" role="dialog" aria-labelledby="editLogoPnotLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<form id="editLogoPnot-Form" action="AjaxTableFieldUpdate.wc" method="post">
<!--Header-->
<div class="modal-header alert-primary">
<h4 class="modal-title" id="myModalLabel">Artwork Production Notes</h4>
<button type="button" id="editLogoPnot-closebtn" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form">
<i class="fas fa-pencil-alt prefix"></i>
<textarea id="editLogoPnot" name="ThisChangesDynamically" class="md-textarea form-control" rows="10" style="white-space: pre-wrap; overflow-y: scroll;"></textarea>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- END -->
\\SCRIPTS
$('#dtSjob').on('click', 'a.editLogoPnot', function (e) {
e.preventDefault();
// Get the data of the selected row from the data table
epData = sjobTable.row( $(this).closest('tr')).data()
// Change the name attr of the textarea to identify the requested data
console.log($("#editLogoPnot").attr('name'))
$("#editLogoPnot").attr('name', 'logosxzxurnxzx'+epData['sjob']['logourn']+'xzxpnotxzxM');
console.log($("#editLogoPnot").attr('name'))
// Get the latest notes for LogoURN
$.ajax({ url: "AjaxGetData.wc?ti=Logos;urn&fl=pnot&key=urn:C:"+epData['sjob']['logourn'],
type: "POST",
success: function(data) {
// The below line ALWAYS displays the correct data
console.log("Returned data: "+data);
// The below line only works before I submitted some changed data, then it stops working.
$("#editLogoPnot").html(data);
}
});
});
\\ The below function handles the submit of the modal form
var editLogoPnotoptions = {
success: editLogoPnot_showResponse
};
$('#editLogoPnot-Form').submit(function() {
$(this).ajaxSubmit(editLogoPnotoptions);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
function editLogoPnot_showResponse(responseText, statusText, xhr, $form) {
$('#editLogoPnotModal').modal('hide');
}
I have tried using .val() which solves the issue but, I cannot get the data to display correctly within the textarea (it includes all the HTML formatting). If anyone has any suggestions on how to fix this, then that would also solve my issue.
Any suggestions would be greatly appreciated, as I have exhausted all my ideas!
Thanks, Chris
If I understand the issue correctly you can put the response string into a temporary element as html and retrieve it as text from that element to put in the textarea.
const str ='**E5654 ** Add Flat Neck Label
Test123';
const $div = $('<div>').html(str)
$('textarea').val($div.text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea cols="60" rows="10"></textarea>
First of all, I am newbie in web programming. Now I am maintaining an ASP.NET MVC application.
I have a view (cshtml) from which I would like to show a modal window in the center of the screen. I would like a modal window like typical confirm dialog in javascript, but I want to put a title, a text, and two buttons, ok and cancel. From my javascript function (which is placed in my ASP.NET MVC view (cshtml)), in this case, onInvoice, I need to do some things depending on the button clicked on the modal window.
For example:
function onInvoice() {
if (some_condition_happens){
// At this point I want to show/call modal window by passing title and text
// Now I read which button was clicked in the modal window
if (ok_button_is_pressed)
{
// Do something when button ok is clicked in the modal window
}
else if (cancel_button_is_pressed) {
// Do something when button cancel is clicked in the modal window
}
}
}
I have searched in the web and I have found an example using bootstrap here. Also posted here. I post here:
Javascript code:
$('button[name="remove_levels"]').on('click', function(e) {
var $form = $(this).closest('form');
e.preventDefault();
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#delete', function(e) {
$form.trigger('submit');
});
});
view:
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<form action="#" method="POST">
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
But I do not know where to put above code, javascript function and view within my ASP.NET MVC project structure. My ASP.NET MVC project is organized in areas as well. I would like to put the above view code in somewhere accessible from other views (cshmtl).Furthermore I would like above modal window to be parametrized, title and text basically. Also I do not know how to read response from modal window back to my javascript function onInvoice, and then depending on which button, ok or cancel was clicked do one thing or another. Finally,since modal window will be parametrized, how can I pass title and text to?
I'm using Laravel 5.5, Bootstrap 3.7 and jQuery.
When I open the modal and close it directly, then when I do an action in the modal it performs two times the opening function.
If I open and close it (directly) three times, then when I do an action in the modal it performs four times the opening function.
Finnaly, if I open and close it (directly) X times, then when I do an action in the modal it performs X+1 times the opening function.
It performs the function for all the old openings and for the last opening.
HTML :
#foreach(... as $seance)
...
<div class="row">
<button class="btn btn-primary bouton-reservation" data-toggle="modal" data-target="#reservationModal-{{ $seance->id_seance }}"</button>
</div>
</div>
</div>
<div class="modal fade reservationModal" id="reservationModal-{{ $seance->id_seance }}" data-seance='{{ $seance->id_seance }}' role="dialog" aria-labelledby="reservationModal-{{ $seance->id_seance }}" aria-hidden="true">
// modal content with a form.
</div>
#endforeach
JS :
$(document).ready(function () {
...
$(document).on('shown.bs.modal', '.reservationModal', function (e) {
// JS content
});
$(document).on('hidden.bs.modal', '.reservationModal', function(e) {
// JS content
});
});
I hope the problem is explained quite clearly ...
The problem can not come from the fact that I use $(document).on('shown.bs.modal', '#reservationModal', function (e) { instead of $('#reservationModal').on('shown.bs.modal', function (e) {?
Exemple
On this exemple, I close 2 times the modal, and when I choose Nico on the select after a third opening, my JS append 3 times my data.
Append starts when I click on the button Ajouter, however, I only click once and not three.
Futhermore, when I delete the info with the X on the right side, all info disappears.
Thank's for help !
Is there any way to create a button inside html form that wouldn't call an action specified in "Html.BeginForm"? I want to use it only for adding some elements to form by javascript. I have a different button that should call an action.
#using (Html.BeginForm...
{
...
<button id="addRow" class="btn margin-top-10 margin-bottom-10">addRowt</button>
...
}
The "addRow" button I'd like not to call any action.
Yes. You can listen to the click event of this button and prevent the default behavior. Assuming you ave jQuery library loaded in this page, you may use jquery preventDefault method to do this.
$(function(){
$("#addRow").click(function(e){
e.preventDefault();
// do other things as needed (ex : add a row to ui)
});
});
You can use an anchor tag that looks like a button if you are using bootstrap Then you put your JavaScript inside the tag like below:
<a href="#" class="btn btn-default" onclick="YourMethod()" >New Button</a>
I have a modal in which I need to validate some input using knockout validation.
When I click the submit button, a function is called that validates the data. The following functionality is expected:
If the validation fails, the modal stays open and the validation reason is displayed.
If the validation succeeds, I want to close the modal.
How can I go about closing the modal inside my function?
What have you tried so far?
Per the Bootstrap documentation
$('#myModal').modal('hide')
Please read through the documentation!
http://getbootstrap.com/javascript/#modals
The above didn't work for me, modified slightly to add an id to the button and reference it that way. I just used the cancel button that was already on my modal form and added id="cancel-btn" to that one.
<button type="button" class="btn btn-ar btn-default" id="cancel-btn" data-dismiss="modal">
$('#cancel-btn').click();
Make another button like this
<button type="button" class="btn btn-warning btn-lg shiny" data-dismiss="modal" aria-hidden="true">Cancel</button>
This button contains data-dismiss="modal" .You can hide this button if you want.
Now You can use any other function in a customized way and when you want to hide the modal you can call
$(".btn-warning").click();
This will only hide modal
$('#modalId').modal('hide');
but other modal related stuff will not remove.
To completely remove modal from page and its css
$('#modalId').modal('hide'); or $('#modalId').modal('toggle');
$('body').removeClass('modal-open');
$('body').css('padding-right', '0px');
$('.modal-backdrop').remove();
Here I'm giving a solution in plain javascript. I used Vue js and I don't want to use jQuery along with Vue.
document.querySelector('#modalid').classList.remove('show');
document.querySelector('body').classList.remove('modal-open');
const mdbackdrop = document.querySelector('.modal-backdrop');
if (mdbackdrop){
mdbackdrop.classList.remove('modal-backdrop', 'show');
}