Am using this in Laravel.
On one view am calling modal pop up and in this pop up ajax call is getting called.
when I close this modal, and again click on modal pop up, it is calling that ajax call 2 time.
again close and open, it calls 3 times !
Not getting the exact issue. Am not using any loop there.
View from where calling the modal pop up:
<a title="Add New Travel Request under this request" data-toggle="modal" onclick="LoadModals('TravelRequest','<?=$request->TP_tr_request_id?>')" ><img src="<?=$assetsBase?>/img/domestic_travel_3.svg" style="width:35px"></a>
Modal div :
<div class="modal fade" id="SubTravelRequestModal" data-keyboard="false" data-backdrop="static" aria-labelledby="SubTravelRequestLabel" aria-hidden="true" >
<div class="modal-dialog" style="width:70%">
<div class="load_modal"></div>
</div>
</div>
and the function which is getting called on click of above image
function LoadModals(typeOfModal,TR_id)
{
if(typeOfModal=="TravelRequest")
{
$.post( '/travel/tr/subTravelRequest' ,{id:TR_id}, function( data ) {
$('#SubTravelRequestModal').modal();
$('#SubTravelRequestModal').on('shown.bs.modal', function(){
$('#SubTravelRequestModal .load_modal').html(data);
});
$('#SubTravelRequestModal').on('hidden.bs.modal',function(){
$('#SubTravelRequestModal .modal-body').data('');
});
});
}
}
This laravel route calls the view which is nothing but
my view content here
in this modal, at end i have
$(document).one('ready', function () {
alert("in this ")
onefunction("this is calling number of times ")
});
whenever this is getting opened, onefunction is calling number of times.
Can somebody explain me the what is wrong work here ?
Related
I have a modal that is triggered when the button is clicked in the main page. It works and the success modal is displayed and the url modal is closed. But my problem is that if I click the button again, url modal cannot be displayed. Here's my code.
<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page
<form class="search_form" action="" method="">
#csrf
<label>
<input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
<p>
<span class="alert"></span>
</p>
</label>
<div class="flex_box">
<button class="btn pink" type="button" id="save">Apply</button>
</div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>
And this is my ajax code in closing the url modal.
success: function(store) {
$(".apply_modal").hide();
$(".applyfnsh_modal").toggleClass("open");
$('.alert').html('');
},
error: function() {
$('.alert').html('Error occured while applying. Please try again.');
}
In my modal.js
//apply pop up
$(".apply_btn").on("click", function(){
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
var modal = $(this).parent("div").parent("div");
modal.toggleClass("open");
$("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
if (!$(event.target).closest('.apply_box').length) {
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
}
});
So when the url is valid, save to db and display the success modal, which works, but clicking again the apply button in the page, is not displaying the url modal again. I have tried the answers here but nothing is working.
Ok, so here's what I'm thinking is happening... $(".apply_modal").hide(); is setting your modal's style to "display: none;" directly onto the DOM element. In order to display your modal, your code is simply applying a class of "open" to the modal. Any local styles to a DOM element override any styles from CSS. What this means is that the CSS styles applied to the class "open" don't matter because the div itself has a style attribute in it, and that style attribute contains "display: none". To fix this, wherever there is an instance of .toggleClass("open");, add a "show" declaration (.toggleClass("open").show();). You should do some serious refactoring if this works, but it'll at least let you know if we're on the right track.
html:
<div data-role="page" id="main">
Menu
<script>$(document).on("pageshow", menu);</script>
</div>
js:
function menu() {
$('#menubtn').on('click', function () {
...
});
alert("menu");
}
does only work with the first pageload,
after clicking a link JQM loads the link via ajax...
menu() is called, alert viewable... but no click event added to the link
any ideas?
I have been stuck in a problem since couple of days.
I am trying to get the UIKIT Modal on the top of another UIKIT modal.
I have an EditModal and SubEditModal as follows:
<div id="modalEdit" class="uk-modal">
<div class="uk-modal-dialog uk-animation-scale-up">
<div class="modalTitle"><h1>Edit</h1></div>
<a class="uk-modal-close uk-close"></a>
</div>
</div>
<div id="modalSubEdit" class="uk-modal">
<div class="uk-modal-dialog uk-animation-scale-up">
<div class="modalTitle"><h1>Edit</h1></div>
<a class="uk-modal-close uk-close"></a>
</div>
</div>
I have address listing in modalEdit. When the user clicks on edit in one of address, I use the modalSubEdit to display the edit form. This should be displayed on the top of modalEdit. I wrote the following jquery:
$.get(url, function (data) {
var container = $('#modalEdit .uk-modal-dialog');
var targetDiv = $('#modalSubEdit .uk-modal-dialog');
targetDiv.empty();
targetDiv.append(data);
container.add(targetDiv);
});
The problem is as soon as the modalSubEdit is displayed, modalEdit closes itself. When I dig deep into it, I found that, as soon as modalSubEdit is displayed, the display property of modalEdit is set to none.
I would be very much thankful if someone could come up with some suggestions or solutions.
Also thanks to the viewers for their time.
I am using Bootstrap modal's in a Codeigniter application as a popup WYSIWYG text-editor. Everything in regards to loading content, and the modal, works fine. I can even save the content when the modal is open via AJAX.
But what I am trying to accomplish is when I hit the "Save" button in my modal... I want to return the value — $('#wysiwyg').val() — to the page that opened the modal.
Link triggering the modal
Write Text
JavaScript loading modal - Modified source from https://gist.github.com/drewjoh/1688900
$('.ajax-modal').click(function(e) {
e.preventDefault();
var modal = $('#ajax-modal');
var url = $(this).attr('href');
if(url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
modal.html(data);
modal.modal();
}).success(function() {
/* boom. loaded. */
});
}
});
HTML modal wrapper
<div id="ajax-modal" class="modal hide fade" data-backdrop="static" data-keyboard="false" tabindex="-1"></div>
HTML modal body/contents
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Text Editor</h3>
</div>
<div class="modal-body">
<textarea class="input-block-level" id="wysiwyg" rows="9">Write something...</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="submit-modal" class="btn btn-success">Save</button>
</div>
Thanks in advance.
You could try something like this:
var modal = $('#ajax-modal');
// Filter clicks within the modal to those on the save button (#submit-modal)
modal.on('click', '#submit-modal', function(e) {
// Find the wysiwyg within the modal
var wysiwyg = $('#wysiwyg', modal);
// Now do what you want with wysiwyg.val();
if (wysiwyg.length) $('#my_info_div').html(wysiwyg.val());
});
I think I get what you are asking for...There are a few ways you can do this. If you want to create a more separated approach you could use a pub/sub framework like Amplify. The simplest approach would be to create a reference to the element you want to populate prior to creating the click event. Like so:
var controlToPopulate = $("#controlToPopulateId");
$('.ajax-modal').click(function(e) {
e.preventDefault();
var modal = $('#ajax-modal');
var url = $(this).attr('href');
if(url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
modal.html(data);
modal.modal();
}).success(function() {
/* boom. loaded. */
modal.find('#submit-modal').click(function() {
controlToPopulate.val(modal.find('#wysiwyg').val());
});
});
}
});
When you wrote if(url.indexOf('#') == 0), did you mean if(url.indexOf('#') == -1)? indexOf('#') returns -1 if # does not appear in the string.
I am loading another html page from an index page, then I would like to get an element from that loaded page, but the page seems not loaded yet since the element resulted to null, even if there is a function call back with in the ajax load function:
$(document).ready(function() {
$('#btnEdit').click(function(){
$('#contents').load("abcd.html",showNewcontents())
function showNewcontents() {
alert("" + document.getElementById("make").value);
}
return false;
});
});
in body:
<body>
CLICK ME
<div id="contents"></div>
</body>
in abcd.html:
<div id="contents">
<form>
<input type="hidden" id="make" name="make" value="make">
</form>
</div>
Any clue as to how to modify this to get the element?
load expects to receive a function as an argument.
showNewcontents() calls a function.
You are passing the return value of the call to showNewcontents, not the showNewcontents function.
Remove the ().