fullcalendar remove event by popup modal strange behavior - javascript

I have made fullcalendar event remove popup modal.
This is partly working but there are strange behavior.
I am newbie to this, so I have tried several different way but I can't make the stange behavior away.
and I don't know how to make jsfiddle to reproduce the exact behavior without copying all my code. but my code contains a lot extra things. so I can't provide jsfiddle. and only the related code is stated here. but I think Someone who has good experience about this. I think they can easily see through the code. I am really appreciated for advice. I have spent too much time on it.
The strange behavior is that event remove by popup modal, it removes the other event which previously closed by close button. In the following explanation contains the details.
I have made like this:
1) div code for popup modal
<div class="modal fade" id="modalRemove" 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>
</div>
<div class="modal-body">
<h4>Are you sure to remove the event?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" id="removeBtn" data-dismiss="modal">Remove</button>
</div>
</div>
</div>
</div>
2) when an event is clicked -> popup modal displays -> then can choose (click) close button or remove button on popup modal
eventRender: function (event, element){
element.click(function() {
$('#modalRemove').modal();
$('#eventTitle').html(event.title);
$("#removeBtn").click(function() {
$('#calendar').fullCalendar('removeEvents',event._id);
});
});
},
What is working
Popup modal is working
close button, remove button is working
event is removed when remove button is pressed on the popup modal
what is strange behavior
let's say there are two events: test1, test2 (image1)
I clicked test1 event, then popup modal appears (image2)
then, I click close button on popup for test1 (Not remove)-> Popup is disappeared -> test1 event is still on fullcalendar as it should be.
====> until here works fine
then, I click test2 event-> popup modal appear like image 2 -> press remove button for test2 -> [problem]then both test1, test2 events are removed
why it removes both events after 1,2,3,4 steps?

Try this:
eventRender: function(event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
//set the modal values and open
$('#eventTitle').html(event.title);
// Rebind the Remove button click handler
$("#removeBtn").off('click').on('click', function(e) {
$('#calendar').fullCalendar('removeEvents', event._id);
});
$('#modalRemove').modal();
});
}
Note how all the click events are unbound from the #removeBtn button via off() prior to binding for the specific event.
(In your code every time you clicked an event in the calendar a new click handler for this event was bound to #removeBtn. Thus when you finally clicked "Remove" multiple handlers were executed.)

you can do this like this way
$(".popover").hide();

Related

DNN Open 'Leaving Site' Modal on external link click

Newbie here. Tried a few different examples on the site without any luck. My situation is that we have links across our entire DNN site (Evoq 8.5) that have the following format.
<a href="www.site.com" class="external-link">
I am trying to open a modal that says that you are leaving our site every time a link with the external-link class is clicked. I'm also trying to accomplish this in the DNN skin file so it applies to all pages. Here is what I have right now.
Modal:
<div id="modalExternalLink" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<span class="modal-title">Thank you for visiting our site.</span>
</div>
<div class="modal-body">
<p> You are now leaving our website.</p>
<div class="button-container">
<button type="button" id="btnContinue" class="btn-continue" style="margin-right:10px;">Continue</button>
<button type="button" class="modal-button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Attempt to show the modal and pass the href of the link to the continue button:
$('.external-link').click(function(e) {{
e.preventDefault();
var link = (e.relatedTarget).attr('href');
$("#btnContinue").attr('href', link);
$("#modalExternalLink").modal('show');
});
This doesn't work in our environment. It just goes straight to the link's href URL. I'm sure there are other ways we could do this, but there are hundreds of links across our site that have the external-link class that we would have to change, and this modal has to be opened for many links with different URLs.
You have an extra { in your function's first row. This causes an error, jQuery stops execution, e.preventDefault() is never reached thus the link will be opened. Because of that you do not see that the script has an error.
Second I would wrap the code in a $(document).ready(function ().
$(document).ready(function () {
$('.external-link').click(function (e) {
e.preventDefault();
//rest of the code
});
});
Finally got this figured out if anyone stumbles upon it. The modal was fine, but my javascript was incorrect (and had a few dumb mistakes because I'm tired). Here's the final working javascript:
$(document).ready(function(e){
$('.external-link').on('click', function (e) {
e.preventDefault();
console.log($(e.currentTarget).attr('href'));
document.getElementById( "btnContinue" ).setAttribute( "onClick", ( "javascript:window.location.href=\"" + $(e.currentTarget).attr('href') + "\"") );
$('#modalExternalLink').modal('show');
});
});
You can obviously strip out the console log. The main problem was that e.relatedTarget was coming back undefined, so I had the log in there to monitor it. From a little reading this was a difference between Bootstrap 2 & 3.

How can I fire a jQuery click event for dynamic content (modal)

I followed the instructions on this answer to copy a URL when user clicks a button. Seems to work fine, except when I move my button into a modal window. I lose my click event handler.
function copyTextToClipboard(text) {
[...] // working implementation
}
$(function() {
var currentPostUrl = window.location.href + "?ref=blogshare"
var currentPostTitle = $('.post-title').text().trim();
$('.js-copy-bob-btn').on('click', function(event) {
copyTextToClipboard(currentPostUrl);
console.log('copied')
});
$('#myModal').appendTo("body")
});
Here's my HTML:
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row modal-icons">
<div class="col-xs-5 text-center">
<a class="copy-url js-textareacopybtn" title="Step 2: Copy URL Button">
<h3>Copy Shareable Link</h3>
</a>
<-- THE BELOW BUTTON DOES NOT WORK AS DESIRED -->
<button class="js-copy-bob-btn">Copy Url</button>
</div>
</div>
</div>
</div>
</div>
</div>
<-- THE BELOW BUTTON WORKS AS DESIRED (NO MODAL)-->
<button class="js-copy-bob-btn">Copy Url</button>
Where am I going wrong? Why does the second button (outside of modal) work but not the first button?
I'm guessing your modal is dynamic markup that is injected one way or another. There are various modal flavors/libraries out there, but my suspicions are that your dynamic content does not have the proper event handlers for this. jQuery provides a way for us to do this with delegate()
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
I made a very simple example which demonstrates this specific scenario. I am crafting and injecting dynamic content, with a button, wired to click handlers via .on() and .delegate(). Observe the following example and differences between the two...
// faux modal
$('body').append('<div class="modal"><button class="js-copy-bob-btn">Copy Url</button></div>');
// does not work
$('.js-copy-bob-btn').on('click', function(event) {
console.log('copied via on');
});
// works - dynamic content
$('body').delegate('.js-copy-bob-btn', 'click', function() {
console.log('copied via delegate');
});
JSFiddle Link - working demo

Close a popup modal

I have been attempting to get greasemonkey to close a modal by clicking the "x" button. Here is the code for the page.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onClick="window.location.reload()">x</button>
I've tried using document.querySelector('.close').click() but to no avail. Where am I going wrong here?
The page in question is running javascript and ajax.
The code looks like bootstrap modal, so look for the main container ID or class name and use the following code.
$('#modalID').modal('hide');
Why don't you just add the hide class to the modal? That's all that clicking it is going to do.

Hide Modal in Twitter Bootstrap when clicked

Here is a sample code from twitter bootstrap but . . .
<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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>
The scenario is this: I have a redirect page and I want to display the modal. Yes, of course I made it displayed but how do I close it? I tried different ways the click function but nothing happened.
From bootstrap doc :
Manually hides a modal.
.modal('hide')
$('.modal').modal('hide')
So if you want to hide it on click you can bind this action to the click event
$('#yourid').on('click' , function() {
$('.modal').modal('hide')
});
if you want to hide it after some second that you loaded the document you can try with a timeout
$(function(){ //document ready
..
.. //your code
..
setTimeout(function(){
$('.modal').modal('hide')
}, 2000); //2000 = 2 second
..
})
UPDATE 1
To bind it on the close button give him a class or id
Close
now
$('.closebtn').on('click',function() {
$('.modal').modal('hide');
});
If you want to bind only on that close button use an id instead of a class
Old post but this can now be done using HTML attributes.
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
try this
$('.modal').modal('hide');
I had the same problem. If it's still needed you can try to put your 'click' event in another event 'shown.bs.dropdown' like so:
$('#myDropdown').on('show.bs.dropdown', function () {
$('#yourid').on('click' , function() {
$('#myDropdown').modal('hide');
});
});
In my case the 'click' event wasn't binded when the modal was shown. So when I put it in 'show.bs.dropdown' event, everything went as I expected. 'click' was binded to modal as soon as modal was shown.

Bootstrap: file input field ignores clicks when used in modal dialog

I have a little weird problem with Bootstrap and a file field:
For a project I'm implementing a simple upload dialog.
http://jsfiddle.net/RxxSv/4/
As soon as I add data-toggle="modal" to the modal container, the file input field stops reacting to clicks (and the browser won't show the file selection dialog).
I suspect this to be caused by Bootstrap's modal code/event handling. Somewhere the click event is getting lost, but I can't really figure it out.
Any ideas?
I can't really explain why but if you put all the attributes that are in the documentation (in the Live Demo), the input works correctly.
<div id="modal-upload" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
JSFiddle: http://jsfiddle.net/4TQvY/
My comrade adviced to do it in another way:
<a class="btn btn-primary" href="#" style="margin-left: 100px" id="prefix">Choose file</a><input type="file" id="file_source" style="position:absolute;z-index:2;top:0;left:0;filter:alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;">
Make separate a & input and then invoke click event
jQuery("#prefix").click(function()
{
console.log("INSERT JSON");
$("#file_source").click();
return false;
});

Categories