Use ajax inside modal not before - javascript

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;
});

Related

When clicking The modal ok button, it triggers clicks by the number of using modal without refreshing the page

When I click on the "استمرار" button it triggers clicks, I counted it and found it equal to the number of clicks, that I clicked it without refreshing the page.
This problem happens only when I don't refresh the page.
I use one modal to the whole website but after every usage I refresh the page so this problem don't occurance.
This is the js file
var modal = $j('#generalModal');
var modalBody = '<div style="margin-top: 20px;">'+
'<div>'+
'<label for="AgentID" class="control-label">المندوب</label>'+
'<span id="AgentDropDown"></span>'+
'<input type="hidden" name="AgentID" id="AgentID">'+
'</div>'+
'</div>';
modalForm(modal, "تغيير المندوب", modalBody);
modal.modal('show');
$j('#AgentDropDown').select2({
ajax: {
url: 'ajax_combo.php',
dataType: 'json',
cache: true,
data: function(term, page){ return { s: term, p: page, t: 'clients', f: 'agent_id' }; },
results: function(resp, page){ return resp; }
},
width: 400
}).on('change', function(e){
$j('#AgentID').val(e.added.id);
});
$j("#change").on("click", function(){
console.log('click');
var agent = $j('#AgentID').val();
var agent_name = $j('#s2id_AgentDropDown > a > span.select2-chosen').text();
// ajax request
if(agent_name){
$j.ajax({
url: 'hooks/ajax-update-agent.php',
type: 'POST',
data: {'ids': ids, 'agent': agent, 'tableName': tableName},
}).done(function() {
/* change the agent for ids */
for(var i=0; i<ids.length; i++){
console.log(agent_name);
$j('#payments-agent_id-'+ids[i]+' > a').text(agent_name);
}
/* show message for two seconds */
show_msg(modal, '<div class="alert alert-success" role="alert"><i class="glyphicon glyphicon-info-sign"></i> <strong>تم تغيير المندوب بنجاح</strong></div>');
setTimeout(function (){
/* close modal by triggering an event */
$j('[data-dismiss="modal"]').trigger('click');
// modal.modal('hide');
// modal.modal('toggle');
}, 2000);
}).fail(function(){
/* modal error */
show_msg(modal, '<div class="alert alert-error" role="alert"><i class="glyphicon glyphicon-info-sign"></i> <strong>حدث خطأ اثناء تغيير المندوب</strong></div>', true);
});
}
});
function modalForm(modal, title, body){
modal.find('.modal-title').text(title);
modal.find('.modal-body').empty().append(body);
modal.find('.modal-footer').show();
}
function show_msg(modal, body, withFooter){
if(typeof withFooter == 'undefined') withFooter=false;
if(!withFooter){
modal.find('.modal-footer').hide();
}
modal.find('.modal-body').empty().append(body);
}
this is the html page
<!-- agents Modal -->
<div class="modal fade" id="generalModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
<button type="button" class="btn btn-primary" id="change">إستمرار</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
What should I do to solve this problem?!!
Thanks in advance
Usually this happens when the click handler is called multiple times on an element through calling a function. Perhaps try unbinding and rebinding the event, like so
$("#change").off('click').on('click');
This will clear any previous click events and assign a new one. Hopefully that works!

Window.location.href is not working with Clipboard JS

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

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

Load content dynamically in bootstrap 2.3 modal

I am doing some modifications with twitter bootstrap modal and I am trying to achieve dynamic image loading in modal window. Also when the certain image is loaded I would like to be able to swipe between images. Can anyone help me with this one?
Here is structure:
<!-- Image trigger -->
<div class="item">
<a data-toggle="modal" href="#myModal" class="modal-trigger">
<img src="img/7.jpg" alt="">
</a>
</div>
<!-- Modal window -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- it makes empty spaces clickable -->
<div type="button" class="close" data-dismiss="modal" aria-hidden="true"> </div>
<img data-dismiss="modal" aria-hidden="true" src="http://placehold.it/800x670" class="image" alt="" data-target="#myModal"></div>
And here is javascript for swipe feature:
$(document).ready(function() {
// Swipe feature
$("#myCarousel").swiperight(function() {
$("#myCarousel").carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$("#myCarousel").carousel('next');
});
You have to write several methods / functions for each task.
var yourApp = window.yourApp || {};
yourApp.initModal = function (options) {
$('a.js-modal').on('click' function (event) {
$('#myModal').modal(options);
event.preventDefault();
});
};
yourApp.loadModalContent = function () {
var content = $("#modalContent").html();
if (content.length) {
$('#myModal').html(content);
}
};
yourApp.initCarouselSwipe = function (options) {
$("#myCarousel")
.carousel(options)
.swiperight(function() {
$(this).carousel('prev');
})
.swipeleft(function() {
$(this).carousel('next');
});
};
$(function() {
yourApp.initModal({
show: function () {
yourApp.loadModalContent();
yourApp.initCarouselSwipe();
}
});
});
One to open the modal with a callback that does load your dynamic content
The content loader should retrieve the modal's selector and put the content into
Last but not least we have to init the swipe events and the carousel

Categories