Develop Reference

jquery modal() not working when called from inside a function

I have a table where i put a button on the final column of some rows. This button is supposed to open a bootstrap modal using jquery through the onclick attribute. It calls a js function which has the jquery method that shows the modal, but is not working.
When I put an alert on the function and comment the jquery method it works. Also, when I call the method to open it outside of any function, it works when I load the page, as it should. So for some reason it only doesn't work when I try to call it from inside a function.
I need to call it from inside the function because I need to pass some values from the specific table row.
Button:
<button type="button" class="btn btn-success btn-sm" onclick="iniciar_produccion();">Iniciar Producción</button>
Jquery:
// This works
$("#modalIniciarProduccion").modal();
function iniciar_produccion() {
// This doesn't work
$("#modalIniciarProduccion").modal();
// alert('working');
}
Modal:
<div id="modalIniciarProduccion" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Finalizar Proyecto</h4>
</div>
<div class="modal-body">
<form action="marcar_proyecto_como_finalizado.php" id="finalizar" method="post" target="_self">
<div class="input-group">
<label> Fecha en que se entregó </label>
<input type="date" id="fechaEntrega" name="fechaEntrega" class="form-control" required>
<br><br>
</div>
</form>
</div>
<div class="modal-footer">
<input type="submit" form="finalizar" class="btn btn-default pull-right" name="action" value="Subir">
</div>
</div>
</div>
</div>
Your help is much appreciated

You put the wrong function name in the HTML.
Your function is called modalIniciar_produccion but you wrote onclick="iniciar_produccion();"
To be safe please copy&paste your function name from JS code into the HTML (note hat JS is also case dependent).

Upon further research I tracked the error the console gave me and found the solution to my problem in other post:
Bootstrap modal: is not a function
So this is a duplicate. Please mark it as such.
Anyway, the problem was conflict of the jQuery version being loaded twice. The solution is the following:
function iniciar_produccion() {
jQuery.noConflict(); // I added this
$("#modalIniciarProduccion").modal(); // This was not working
}
I just added the line jQuery.noConflict(); before the jquery method. Hope this helps someone in the future.

Submit HTML Form using JavaScript

I am presenting terms and conditions modal to the user before registration but I am having an issue submitting the form. I think it might be because the submit button is outside of the form?
HTML
<form method="POST" id="registerUser" autocomplete="signupForm-noFill" action={{url("/register")}}>
...
<button type="submit" id="registerButton" role="button" class="btn btn-hp-modal btn-signup">Sign up</button>
</form>
Modal (outside the form above)
....
<button type="submit" id="acceptTerms" class="btn btn-hp-modal underline btn-signup-modal">I Accept</button>
JavaScript
$('#registerButton').click(function() {
$("#legalModal").modal("show");
return false;
});
$(document).ready(function () {
$("#acceptTerms").click(function () {
$("#registerUser").submit();
});
});
What happens when I try to submit the form is refreshing the page and adding a ? to the end of the url: /signup?. If I try submitting it without the modal then it works fine.

Your button is type submit, so it will send data of the form, as the parent form tag tells him, and won't considere your click function since it change the page.
You need to prevent the natural behaviour of a submit button.
The way to do this is preventDefault:
$("#acceptTerms").click(function (event) {
event.preventDefault(); //prevent from natural behaviour
$("#registerUser").submit();
});

Action on submit

I have beginner question about submit behavior. Every time I press submit my loginModal keep coming back up, is this expected behavior? Its like the ready() function is fired again. I would like my initiate App() function to be executed after submit
Here is bits of my code:
//Show loginModal on page ready
$(document).ready(function(){
$('#loginModal').modal('show');
});
//loginModal submit
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>`enter code here`
</div>
//When submit button is clicked
$('#loginModal').submit(function() {}
initiateApp()
});

You need to prevent the default behviour of the submit button i.e. to refresh the page. Use event.preventDefault()
$('#loginModal').submit(function(event) {
event.preventDefault();
initiateApp()
}
);

Since you chose to use an input type of Submit, once you click the button it will trigger an auto post-back to my knowledge and refresh the page. Try using:
<button>
OR
<input type='button'>
This will stop the page from refreshing. Give it a shot!

Form not submitting on iPad

I have the following modal structure containing a form:
<div class="modal fade" id="by-email" role="dialog" >
<div class="modal-dialog">
<div class="modal-header">
<small class="waiting"></small>
</div>
<div class="modal-content">
<form action="/test" method="post" id="form-email">
<button type="button" class="btn btn-default btn-modal" data-dismiss="modal">Cacenl</button>
<input type="submit" class="btn btn-primary btn-modal btn-send" value="Send">
</form>
</div>
</div>
</div>
Also, I am using jQuery to show a "loading gif" once the user submit the form via submit button:
$('.btn-send').on('click', function(e){
/* with this line, I pretend to disable both buttons in order to
prevent the user click them while the form is submitted */
$('.btn-modal').attr('disabled', "disabled");
/* show the gift image */
$('.waiting').fadeIn('fast');
});
In most browsers it works cool. However in iPad the form is never submitted. According to my debug session this is happening in iPad:
Submit button clicked
Buttons disabled
Loading image showed
Strangely I can make it works in iPad if I remove the line $('.btn-modal').attr('disabled', "disabled");, but as consequence buttons are not disabled neither loading is displayed. So, how can I prevent this error in iPad? Thank you in advance

Let the form submit without changing elements that participate in/trigger the submission process. Disable buttons later:
$('.btn-send').on('click', function(e){
setTimeout(function() {
/* with this line, I pretend to disable both buttons in order to
prevent the user click them while the form is submitted */
$('.btn-modal').attr('disabled', "disabled");
/* show the gift image */
$('.waiting').fadeIn('fast');
}, 1);
});

The default action of submit button click is to submit the form. In jQuery, you can use event.preventDefault() or return false; from event handler to prevent the default action from happening.
The default action for the event will not be triggered
http://api.jquery.com/event.preventdefault/
Your code should look like this
$('.btn-send').on('click', function(e){
e.preventDefault();
$('.waiting').fadeIn('fast');
});

You could submit the form via ajax. On success, you can disable the button. An example would be:
$('.btn-send').on('click', function(e){
$.ajax({
url: /test,
type:'POST',
data: { 'foo': foo},
success: function(data) {
$('.btn-modal').attr('disabled', "disabled");
/* show the gift image */
$('.waiting').fadeIn('fast');
}
)};
});
You'll probably need to edit this a little but this is the gist.

Open Django template in bootstrap Modal

I'm trying to open a Django template in Twitter-Bootstrap Modal. Earlier I did it using JavaScript but it only opened once.
I read somewhere that Bootstrap Modals are more customizable, so giving it a try, I referred to an already answered question. I've the same problem and I've tried the same solution but it doesn't work for me. The only thing I get is blackened screen.
The flow goes like this:
A Django template is rendered which has several worker's details.
In that template, I've links to "Add advance" for every worker.
Clicking on which I want to open Modal.
In that Modal, I want to open another Django template containing a
form.
Filling the form, either close or press enter.
For any of these events on Modal, save the data from the form.
What I've done is here:
Template where the link is clicked: form.html
<a class="contact" href="#" data-form="/popupadvance/?worker_id={{value.worker_id}}&year={{year}}&month={{month}}" title="Advance"> Add advance</a>
<div class="modal hide" id="contactModal">
<script>
$(".contact").click(function(ev) { // for each edit contact url
ev.preventDefault(); // prevent navigation
var url = $(this).data("form"); // get the contact form url
alert(url);
$("#contactModal").load(url, function() { // load the url into the modal
$(this).modal('show'); // display the modal on url load
});
return false; // prevent the click propagation
})
</script>
The template which should open: popup.html
<div class="modal hide" id="contactModal">
<form id="form" class="well contact-form" action='/popupadvance/?worker_id={{value.worker_id}}&year={{year}}&month={{month}}' >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
{% csrf_token %}
{{worker_id}} <br />
{% for a in old_advances %}
{{a.advance_amount}} {{a.advance_date}}<br />
{% endfor %}
<input type="integer" id="popupadvance_{{worker_id}}" placeholder="Advance ++" class="popupadvance" >
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Save" />
<input name="cancel" class="btn" type="submit" value="Cancel"/>
</div>
</form>
Clicking on the link: "Add advance", the only thing I get is the alert I've added closing which I get blackened screen over which the Modal should appear but neither the Modal, nor the form is rendered there. But pressing forward button on browser, I get the popup.html rendered on a new page, which probably tells that the URL is working on clicking the link, but only the Modal doesn't open.
I would like to tell that the input field in pupup.html is able to save data to database with OnChange event as I did when I opened up the dialog box using JavaScript.
Any help to find the problem will be greatly appreciated. As I don't see any error on Browser console.
Thanks.