Window.location.href is not working with Clipboard JS - javascript

I am trying to copy the current page URL to the clipboard using the ClipboardJS library. I tried my best and asking the question here.
Here is the Code:
Javascript/Jquery:
new Clipboard('.copy', {
text: function(trigger) {
return window.location.href;
}
});
HTML:
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button class="btn btn-default copy">Copy to clipboard</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Open modal
Here is the Code Pen:
http://codepen.io/anon/pen/LWgZpV

I resolved it by
$.fn.modal.Constructor.prototype.enforceFocus = function() {
new Clipboard('.copy', {
text: function(trigger) {
return window.location.href;
}
});
};
Seems like bootstrap has some issue with Clipboard library. Thanks to https://github.com/zenorocha/clipboard.js/issues/155#issuecomment-217372642

Related

Use ajax inside modal not before

When I click on the modal, I have an input field displayed and autocompletion witith ajax to find a product for example.
My apporach does nt work.It open my page SelectPopUpProducts (select_popup_products.php), the autocompletion works fine.
How to open a pop up without to trigger an ajax action $_GET inside the js.
note : bootstrap 5
<div class="col-md-5">
<a
href="<?php echo $this->Orders->link('SelectPopUpProducts'); ?>"
data-bs-toggle="modal" data-refresh="true"
data-bs-target="#myModal4"><?php echo '<h4><i class="bi bi-plus-circle" title="' . $this->Orders->getDef('icon_edit') . '"></i></h4>'; ?></a>
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="te"></div>
</div>
</div> <!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
I tried this but does not work.
My normal js (work):
$( document ).ready(function() {
$("#myModal4").on("show.bs.modal", function(e) {
const link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
})
Try to change by this (not work) :
$(document).ready(function() {
$('[data-bs-toggle="modal"]').click(function(e) {
e.preventDefault();
var data_target=$(this).attr('data-bs-target');
if (data_target=="#") {
data_target="#modal4"+parseInt(Math.random()*1000);
}
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('<div class="modal hide fade" id="'+data_target.replace("#","")+'">' + data + '</div>')
.modal()
.on('hidden', function(){
$(data_target).remove();
});
}).success(function() {
$('input:text:visible:first').focus();
});
}
});
return false;
});

Bootstrap Popup with Dynamic Width as per content

I have created bootstrap modal, and appending some html through AJAX...
I am not able to show perfect width as per content. I have tried:
width: 'auto'; //it looks as in Screenshot
width: 100%; //it takes whole page width
It looks like:
var PopupHelper = {
Show: function () {
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html(data);
$('#popup-Model').css({ 'width' : 'auto','overflow': 'auto' });
$("#popup-Model").modal();
}
qAjax.Init();
}
}
<!--Popup Window -->
<div class="modal fade" id="popup-Model" 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" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body" id="popup_content">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
How to make modal width, as per the content inside modal-body?
NOTE: modal HTML shown in image can vary
Thanks!!!
Since you're already using javascript to render this modal, it will be easier to just set the modal-dialog width to the same width as your content. It's hard to do this only with CSS because modal-dialog have fixed width (varying per screen size).
$("#popup_content").html(data);
$("#popup-Model").modal();
setTimeout(() => {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 30; //Padding
$(".modal .modal-dialog").css({ 'width' : width+'px' });
}, 0); //Maybe you'll need a longer timeout because of css transitions
working example
Worked in OP case as:
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html('<div class="test-div">' + data + '</div>');
$("#popup-Model").modal();
setTimeout(function () {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 50; //padding
$(".modal-dialog").css({ 'width': width + 'px' });
$('#popup-Model').css({ 'overflow': 'auto' });
}, 500);
add row and col-* class in your popup to handle content
<!--Popup Window -->
<div class="modal fade" id="popup-Model" 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" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body">
<div class="col-xs-12" id="popup_content"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
try to use min-width and position:relative style to "model-body" class. I hope it will work.

Bootstrap, how to prevent from closing a dropdown-menu when modal popup displayed

Inside a dropdown-menu I have a button to open a modal popup. If you display the modal popup when you close it, it will also close the dropdown-menu.
How to prevent from closing a dropdown-menu when a modal popup is displayed ?
This is the code :
<div class="dropdown-menu" style="width:240px;">
<div class="row">
<div class="col-xs-6">Log in</div>
<div class="col-xs-6"><img data-toggle="modal" data-target="#myModal" width="20px" src="images/help-question.png"></div>
</div>
...
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
etc...
</div>
ok, I have found a solution :)
var hideLogin = true ;
$('#ModalHelpLogin').on('shown.bs.modal', function (e) {
hideLogin = false ;
})
$('#ModalHelpLogin').on('hidden.bs.modal', function (e) {
hideLogin = true ;
})
$('#DropLogin').on('hide.bs.dropdown', function () {
return hideLogin ;
});

Loading iframe in modal, .modal-content is replaced

I have the following HTML:
LINKY
<!-- Modal -->
<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>
</div>
<div class="modal-body">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<iframe src="http://domainy.com/" width="100%" height="380" frameborder="0"
allowtransparency="true"></iframe>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
When I change the modal iframe src with the following JS, the content of .modal-content is completely overwritten with HTML loaded from the HREF in question on the button that toggled the modal.
$('[data-target="#myModal"]').on('click', function (e) {
e.preventDefault();
var _linky = $(this).attr('href');
var _target = $(this).data('target');
if (_target.length > 0) {
_target.find('iframe').attr('src', 'about:blank');
var _isRemote = false;
if (_linky.indexOf('http') > -1) {
_isRemote = true;
}
if (!_isRemote) {
if (_linky.indexOf('?') > -1) {
_linky += '&tmpl=component';
} else {
_linky += '?tmpl=component';
}
}
_target.find('iframe').attr('src', _linky).load(function() {
_target.modal('show');
});
}
});
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
How can I prevent Bootstrap from replacing everything in .modal-content?
_target was simple a string value representing an elements ID - not a jQuery object.
Code fixed and updated: http://codepen.io/TheFoot/pen/QbpMYx

Bootstrap 3 - modal - load from multiple remote sources

Been sweating for days..
I'm running bootstrap 3.1 and want to load different remote pages into my modal depending on what button is clicked.
This works the first time I click the button, but then when I try to load the second page, it throws me an undefined error. Please please help - surely this is a common operation and something I wouldn't think would be that difficult.
<script type="text/javascript">
function modalLoad(remotePage){
$('#myModal').modal({
show: false,
backdrop: true,
keyboard: false,
remote: remotePage
})
$('#myModal').on('show.bs.modal', function (e) {
alert('showing');
});
$('#myModal').on('shown.bs.modal', function (e) {
alert('modal opened');
});
$('#myModal').on('hidden.bs.modal', function (e) {
// tried all of the variations below
$(e.target).removeData("bs.modal").find(".modal-content").empty();
// $(e.target).remove();
// $(this).removeData('bs.modal');
//$("#myModal").remove();
// $(this).data('bs.modal', null);
alert('removed');
});
$('#myModal').modal('show');
};
</script>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">Update here</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<button style="primary" onclick="js:modalLoad('remotePage1.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
<button style="primary" onclick="js:modalLoad('remotePage2.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
Any help would be so so appreciated.. :S

Categories