I have a bootstrap modal, where I have few buttons to capture feedback.
I want to call a JS function on click of one of the buttons.
However, on click of the button, the modal just closes without calling the JS Function.
But, if I do the same onclick event on any other element not in the modal, it works fine.
js
<script>
function sayHello() {
alert("Demo Alert")
}
</script>
HTML
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div
class="modal-dialog modal-lg modal-dialog-centered"
role="document"
>
<div class="appie-signup-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="appie-signup-box">
<h3 class="title">How was the Session?</h3>
<form action="#" id="mood-tracker">
<div class="row">
<div class="input-box">
<button type="submit" value="Good" onclick="sayHello()">
<i
class="fa fa-smile"
></i
>Good
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Where am I going wrong?
Please do not use button type "submit". Use type "button" instead of like this:
<button type="button" value="Good" onclick="sayHello()"><i class="fa fa-smile"></i>Good </button>
I think you should use window.confirm() instead of window.alert().
HTML
<button type="submit" value="Good" onclick="sayHello()">
JS
function sayHello() {
return confirm('Demo Alert');
}
I found this answer on another Stack Overflow page : HTML - How to do a Confirmation popup to a Submit button and then send the request?
C must be capital
use onClick not onclick
<button type="button" onClick="sayHello()">Button</button>
Related
Clicking this button opens the modal
<button type="button" id ="soldBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal">This laptop has been sold</button>
This is the modal
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<p>Confirmation</p>
</div>
<div class="modal-body">
<p>Are you sure you want to do this?</p>
</div>
<div class="modal-footer">
<a class="btn btn-outline-success" id="confirmBtn" href="#" >Yes</a>
<a class="btn btn-outline-danger" id="cancelBtn" data-dismiss="modal">No</a>
</div>
</div>
</div>
</div>
</div>
I could just have a different modal for different buttons, but I'd rather follow the DRY principle. I'd like the href of the confirmBtn to change based on which button to open the modal was clicked. I've tried this so far but not even sure if I'm on the right track.
<script type="text/javascript">
if(jQuery('#soldBtn').data('clicked')) {
document.getElementById("confirmBtn").href="{%url 'laptops:sale'%}";
}
</script>
You should first wait for your DOM to load. This can be done by wrapping your script code with the following:
$(function(){
// Here you will place the code that follows
});
Then you should register an event handler for the click event on the DOM element with id soldBtn:
$("#soldBtn").on('click', function(){
var confirmBtnEle = $("#confirmBtn");
confirmBtnEle.attr('href','%url 'laptops:sale'%');
});
Apparently, you have to change the second argument we pass to attr method above to be that you want to be.
I have a modal that contains just one form field, however once the user enters this value it remains even when the modal is closed. I want it to reset on dismiss so that when the modal is opened again, the form is empty. I have some code for this already, however it's not working as it should. If anyone could help out it would be greatly appreciated.
HTML/Modal:
<!-- Modal -->
<div id="myModalViewAddress" 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">View Hidden Information</h4>
</div>
<div class="modal-body">
<p>Please enter authorisation code</p>
<form id="auth_form10">
<div class="form-group has-feedback" name="auth_code10" id="auth_code10">
<input class="form-control" id="auth_code_input10" autocomplete="new-password" name="auth_code_input10" type="password" required>
<span class="form-control-feedback glyphicon" id="iconBad10"></span>
</div>
</form>
<hr>
<div id="modal-loader" style="display: none; text-align: center;">
<!-- AJAX loader -->
<img src="img/ajax-loader.gif">
</div>
<div id="dynamic-content-address" class="hidden">
<!-- Dyanamic address -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
jQuery:
$('.myModalViewAddress').on('hidden.bs.modal', function() {
$(this).find('auth_form10')[0].reset();
});
JSFiddle
A few issues here. You were using .myModalViewAddress instead of #myModalViewAddress. Also you need to just clear the value with:
$('#myModalViewAddress').on('hidden.bs.modal', function() {
$('#auth_form10 input').val('');
});
jsFiddle example
try this:
after the onclick action:
$('#auth_code_input10').val() == null;
Your problem is given because of your selectors.
if you want to reset your form elements you shold select your form by his id using # and then call the .reset() method.
also your event registration wasn't being made because you are using class selector . $('.myModalViewAddress') instead of id selector # $('#myModalViewAddress')
https://jsfiddle.net/cLkekytx/1/
I am relatively new the web programmer so this may or may not be a solution solvable through JavaScript. If not, please point me in the correct direction.
{% for thought in user.thoughts %}
<div class="panel panel-default">
<!-- Icon to Display Modal -->
<div class="panel-heading" align="right">
Icon Here!
</div>
<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
<div class="modal-dialog" role="document">
<div class="modal-content" align="left">
<!-- Form in Modal-->
<form action={{ "/editthought/" ~ thought.id }} method="post" role="form">
<div class="modal-body">
<textarea class="form-control" rows="10" type="text">{{ thought.body }}</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Thought Body -->
<div class="panel-body">
{{ thought.body }}
</div>
{% endfor %}
Here I am iterating through every thought associated with a user. Each thought displays a panel showing the thought with an icon to edit the thought.
When you click the icon, a modal pops up with the body of the thought. The issue I'm having is all of the modals contain the same pre-populated thought (the first one in the list).
The link (href={{ "/edit/" ~ thought.id }}) on the edit icon is correct as well as the body of the panel, however when you load the modal, it is not loading the correct thought. Any ideas?
EDIT: I can't figure out how to comment code. Following advice, I took the modal out of the for loop. I'm currently using this function to pass data from my button in the for loop to my modal.
<script>function testFun(variable){document.getElementById('thought_id').innerHTML=variable;}</script>
It's working however I can only pass information if it's formatted like this:
<h1 id="thought_id"></h1>
Is there any way to change this function so I can pass it as a string ike this:
<h1>thought_id</h1>
Again this is not the most efficient solution but would prevent you from having to pull the modal outside your loop and use JS to update your modal.
Quick fix for your links datatarget
<a href={{ "/edit/" ~ thought.id }} data-toggle="modal" datatarget="#EditModal_{{thought.id}}" data-placement="left" title="Edit">
Quick Fix to your modal id
<div class="modal fade" id="EditModal_{{thought.id}}" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
!!!!! OR GO THE MORE EFFICIENT ROUTE !!!!!
If you do go the route of moving the dialog out of for loop you can do something like below by adding a class to your links and attache a click event to them. Also add data-thought_id and data-thought_body to the link in your for loop.
jQuery:
$(function() {
$('.thought-link').click(function(event) {
event.preventDefault();
var action_path = '/editthought/' + $(this).attr('data-thought_id');
var thought_body = $(this).attr('data-thought_body');
$('#EditModal form').attr('action', action_path);
$('#EditModal textarea').text(thought_body);
$('#EditModal').modal('show');
});
});
Your new link:
Icon Here!
Your modal(outside the for loop):
<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
<div class="modal-dialog" role="document">
<div class="modal-content" align="left">
<!-- Form in Modal-->
<form action="" method="post" role="form">
<div class="modal-body">
<textarea class="form-control" rows="10" type="text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
I have bootstrap modal which looks something like this ;
Following is the code for it
<!-- Buy Send Offer Success -->
<div class="modal fade custom-modal" id="make-offer-success" 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" onclick="javascript:add_request()"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $data['item']['brand'].' '.$data['item']['model'];?></h4>
</div>
<div class="modal-body">
<div class="send-success"><i class="fa fa-check"></i> Your offer has been successfully sent</div>
</div>
<div class="modal-footer">
<div class="col-md-6 btn-mrgn">
<input type="hidden" id="item_unique_id" value="<?php echo $data['item']['item_unique_id']; ?>">
<input type="hidden" id="buyer_id" value="<?php echo $this->session->userdata['id'] ?>">
<button type="submit" class="btn gray-btn btn-common upercase" onclick="javascript:add_request()">Close</button>
</div>
</div>
</div>
</div>
I am calling a java script function on close button and on "x" button on the modal. My problem is when user clicks anywhere on the screen Modal disappears, my function is not called and the screen stays faded.
Can anyone help to fix this problem?. How can i call my javascript function when user clicks anywhere on screen other than modal close buttons.
Instead using the hide event handler, which will be called however the modal was closed(assuming you are using modal method to hide the modal)
$('#make-offer-success').on('hide.bs.modal', function(){
//do your stuff
})
Demo: Fiddle
So I have a ASP .NET MVC application in which users should be able to add content to a page. This content can be things like a location, photos, ...
I have a dropdownlist in my View with all the different content options. When an option is selected, the page should show a modal form where they can enter details based on the type of content they selected.
My modalform is constructed like this:
<div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<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">Map</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="locationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="address" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Add location</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
It's easy to fire up the modal with a button with the data-toggle and data-target attributes like this:
<p class="text-center">
<button id="addLocation" class="btn btn-default" data-toggle="modal" data-target="#locationModal"></button>
</p>
But how do I achieve this form to be shown when selecting a value from the dropdown list? I have added a JS function to the OnChange of my dropdownlist select but I don't know how to fire up the modal form.
Thanks in advance
You can load the modal using javascript on the change event of the dropdown.
Just check this link :
Bootstrap Modal doesn't show