After alert for file uploading close the modal pop up - javascript

I have a scenario where I am uploading file using IFRAME. What I want is after succesfully uploading file, I want to close the modal pop up. But it is not working in my case. I tried like below
function CloseWindowFunction() {
alert('PDF uploaded successfully');
$('.modal-dialog').modal('toggle');
}
Also see the html for the same
<div class="modal fade" id="dvFileUpload" tabindex="-1" role="dialog" aria-labelledby="dvFileUploadTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">File Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" data-keyboard="false">
<iframe id="ifrmFileUpload" clientidmode="Static" runat="server" style="overflow: hidden; border: none" frameborder="0" scrolling="no"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So, how should I close that modal popup because my code is not working with toggle property.

I think you are calling CloseWindowFunction() inside iframe. If so then, please create a function say hideModalPopup inside parent page:
function hideModalPopup(){
$('.modal-dialog').modal('toggle');
//OR - $('.modal-dialog').modal('hide');
}
Call the above function hideModalPopup() inside CloseWindowFunction() like this. CloseWindowFunction() Edited, check below.
function CloseWindowFunction() {
alert('PDF uploaded successfully');
window.parent.hideModalPopup();
}

maybe you can try with
function CloseWindowFunction() {
alert('PDF uploaded successfully');
$('#dvFileUpload').modal('hide');
}
here for some reference for modal events
https://getbootstrap.com/javascript/#modals-events

Simply do this
$('#dvFileUpload').modal('hide');
OR
$("#dvFileUpload .close").click();
OR
$('#dvFileUpload').removeClass('show');

Try to add a class with the first div of modal for example:
<div class="modal fade test-modal" id="dvFileUpload" tabindex="-1" role="dialog" aria-labelledby="dvFileUploadTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
and then call the
$('.test-modal').modal('hide');

Related

How to add paragraph to Bootstrap Modal body using JQuery?

I would like to update Bootstrap Modal body with some data after button is clicked but I can't add anything to it.
I have tried to use $("#queueN").append(`<p class="boardNumber">Hi</p>`); and $("#queueN").after("<p>Test</p>"); and document.getElementById("queueN").innerHTML = "<p>some text</p>"; but none of these updated my modal. Does anyone know how to properly add to modal body?
<div
class="modal fade"
id="modal"
tabindex="-1"
role="dialog"
aria-labelledby="ModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Sėkmingai užsiregistravote!
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="queueN"></div>
</div>
<div class="modal-footer">
<a
class="btn btn-dark"
href="./puslapiai/svieslente.html"
role="button"
>Uždaryti</a
>
</div>
</div>
</div>
</div>
$("#register").click(function() {
if (document.getElementById("odontologas").checked) {
data.Odontologas.push({
KlientoNr: clientId(),
EilėsNr: queueN(data.Odontologas),
Būsena: "Eilėje",
AptarnavimoLaikas: "00:00"
});
console.log(data);
$(window).load(function() {
$("#modal").modal("show");
$("#queueN").append(`<p class="boardNumber">Hi</p>`);
});
// $("#queueN").after("<p>Test</p>");
// document.getElementById("queueN").innerHTML = "<p>some text</p>";
}
Get rid of $(window).load(). It is a deprecated method for one and is not needed inside the click handler since the page will already have been loaded for the click listener to be applied.
In addition, the window load event only fires once in the page lifecycle and is different than using $(document).ready() which will fire any time it is called after the document is loaded

How can I change text inside a modal with jquery ?

Hello guys I tried to create a pokedex by using pokeapi.
My modal looks like this:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"> #1 Pokemon-Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Some information
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
and the js like this:
const button = document.createElement("BUTTON");
button.setAttribute("data-toggle","modal");
button.setAttribute("data-target","#exampleModalCenter");
And my question is how can I change the title and the description of the modal to bulbasaur ?
Full Code: https://www.codeply.com/go/qoCnPUDDxG
With plain javascript:
document.getElementById('exampleModalLongTitle').textContent = 'Bulbasaur';
With jQuery:
$('#exampleModalLongTitle').html("Bulbasaur");
Do the same for whichever element contains your description.
For the modal title:
document.getElementById("exampleModalLongTitle").innerHTML="bulbasaur"; //pure JS
$("#exampleModalLongTitle").html("bulbasaur") //with Jquery
For the description, add a id attribute to your HTML element
<div id="modalDescription" class="modal-body">
Some information
</div>
document.getElementById("modalDescription").innerHTML="bulbasaur description"; // pure JS
$("#modalDescription").html("bulbasaur description") //with Jquery
you can get reference of div using id of and set content inside it.
//In Jquery
$('#exampleModalLongTitle').html("your text");
//In js
document.getElementById('exampleModalLongTitle').textContent = 'you text';

Bootstrap Modal - catch link click inside modal?

I'm trying to catch a "click on a link" inside a bootstrap modal, but for some reason it is not working.
$(document).ready(function() {
$('#menu-mobile a').click(function() {
alert();
});
});
<div class="modal fade" id="menu" tabindex="-1" role="dialog" id="menu-mobile">
<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>
<h4 class="modal-title" id="exampleModalLabel">Menu</h4>
</div>
<div class="modal-body">
Link 1
Link 2
</div>
<div class="modal-footer">
<button type="button" class="button xsmall" id="closeForm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What am I doing wrong?
You could use event delegation .on() like :
$(function(){
$('body').on('click', '#menu-mobile a', function() {
alert();
});
});
NOTE: You should remove one of the id's in your modal since you've two now id="menu" & id="menu-mobile".
First of all you have id attribute twice on your modal element:
<div class="modal fade" id="menu" tabindex="-1" role="dialog" id="menu-mobile">
assuming you'll change it to
<div class="modal fade" tabindex="-1" role="dialog" id="menu-mobile">
then to access even dynamically generated content within the modal, run:
$('#menu-mobile').on('show.bs.modal', function (e) {
alert();
});

How to pass and use URL in jQuery function and how to resolve the issue in closing the Bootstrap modal upon clicking close icon on modal?

I'm using Bootstrap v3.3.0 framework for my website:
I'm having following HTML :
View Receipt
I want to show the following modal dialog box when user clicks on the above hyperlink. While doing so I want to pass the image URL to the modal dialog and show the image in modal dialog. Following is the modal dialog:
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Rebate Receipt</h4>
</div>
<div class="modal-body" style="max-height: 420px; overflow: auto;">
<!-- Here I want to put image tag with image "src" from hidden field -->
</div>
</div>
</div>
</div>
Following is the function I wrote to achieve this but I couldn't make it:
<script>
function showreceipt(url) {
$('div #modal-body').html('<img class="img-responsive" src="url" style="text-align:center;">');
$('#myModal').modal('show');
}
</script>
Please guide me in passing the URL value to the above function and use it in img attribute into a modal dialog.
Also the modal is not getting close after clicking on close button. I don't know why this is happening.
Also when user closes the modal the img src field should get reset to "".
How to achieve this in my code?
Please help me in my attempt.
You can do something like this. I have created an example to show: http://www.bootply.com/rbIcW7Mao8
View Receipt
<input type="hidden" id="student_url" name="student_url" value="https://www.google.co.uk/logos/doodles/2014/wassily-kandinskys-148th-birthday-5655681428357120-hp.jpg">
Create your modal with an empty <img> in the body:
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Rebate Receipt</h4>
</div>
<div class="modal-body" style="max-height: 420px; overflow: auto;">
<img class="myImg img-responsive" src="" style="text-align:center;">
</div>
</div>
</div>
</div>
Then set the image when the modal pops open via jquery:
$(function(){
$('#myModal').on('hidden.bs.modal', function (e) {
$(".myImg").attr('src', "");
});
$('#myModal').on('show.bs.modal', function (e) {
$(".myImg").attr('src', $("#student_url").val());
});
});
These functions fire on the show and hidden events of the modal. One will set the image based on what is in the hidden <input> and one will clear the image.
In the example I created the modal seems to close fine. So not sure what the issue you are having there is.
I try to answer you. Excuse me if I did not understand you.
<a href="#" align="center" type="button" class="btn btn-danger"
data-toggle="modal"
data-target="#myModal" onclick="showreceipt('http://localhost/images/J12345_6946.jpg');">View Receipt</a>
<script>
function showreceipt(imgUrl) {
$('#myModal').modal('show');
$('#myModal #modal-body').html('<img class="img-responsive" />');
$('#myModal #modal-body .img-responsive').prop('src', url);
$('#myModal #modal-body .img-responsive').css('text-align', 'center');
return false;
}
</script>

Can I call a javascript function in model of codeigniter?

Can I call a javascript function in model of codeigniter?
I made a modal in my view..
<div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-haspopup="true" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="alert alert-success fade in" id="alert">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Success!</h4>
<p>Record successfully deleted.</p>
<a id="okButton" class="btn btn-success" data-dismiss="modal">
OK
</a>
</div>
</div>
</div>
and in my model
public function delete_job_title($P1)
{
if (success condition)
{
what could should i put in here to call the function in javascript? or to show the modal?
}
}
I don't know what to put in there in order to show the modal?. whereas in jquery you can show it by:
" $('#success').modal('show'); "
but I want to call it in my model.
My main question is there a way to call a function in javascript from a model of codeigniter?
whereas in my javascript:
function showsuccess()
{
$('#success').modal('show');
}
You can do it like this.
<input type='button' name='show_model' class='modal_display'>
JQuery
$(function(){
$('.modal_display').click(function(){
$('.modal-content').load('controller/method');
});
});
Only controller can interact with javascript/ajax

Categories