I have a dummy Bootstrap modal with a very simple JS alert meant to be triggered when the submit button is clicked. The code is live here and this is what it looks like:
<div class="modal fade" id="contact" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" name="contact-form">
<div class="modal-header">
<h4>test</h4>
</div>
<div class="modal-body"><p>This is body</p></div>
<div class="modal-footer">
<button type="submit" id="submit" class="btn btn-primary btn-lg" onclick="alert('something');">Send</button>
</div>
</form>
</div>
</div>
If you visit the site, you can trigger the modal by clicking on the contact link in the top navigation menu. The modal looks like this:
As you can see, there's just one field and a submit button. The button's onclick() event is set to alert the word "something" on the screen. This works fine except that when you close the alert, the page refreshes with a "?" appended to the URL. How do I prevent this refresh and where does the question mark come from?
At first I thought that it happens because the button has property type set to submit, so I'd recommend to remove this property completely, and the trailing question mark would probably not appear anymore. But it does.
What really needs to be done is event default action has to be prevented. To do that, return false right there in the onclick event callback function:
<button onclick="alert('something'); return false;">...</button>
This way you, well, return false, and this is perceived as if you want to prevent further execution of the click event, effectively submit operation.
Related
I have a signup/login page index.html and my homepage indexHome.php. I need to find a way to display a welcome message only once every time a user either logs in or signs up (welcome modal/welcome back modal). I think I can do it by using the form submission buttons on either the signup or login submit buttons and then pass that to the indexHome.php. I think another option would be to use localSession, localStorage, or cookies in my script on indexHome.php to do this, but I'm not really sure how. I have looked through other threads and haven't been able to find a way to do this. I have been working on the issue for a few days and am in need of some assistance. Any help is appreciated! :)
<div id="id05" class="modal" >
<form class="modal-content">
<div class="container">
<h1><?php echo "Welcome, ".$firstname."!"?></h1>
<span onclick="document.getElementById('id05').style.display='none'" class="close2" title="Close Modal">×</span>
<hr>
</div>
</form>
</div>
<div id="id06" class="modal" >
<form class="modal-content">
<div class="container">
<h1><?php echo "Welcome back, ".$firstname."!"?></h1>
<span onclick="document.getElementById('id05').style.display='none'" class="close2" title="Close Modal">×</span>
<hr>
</div>
</form>
</div>
As of right now, I have this:
<body onload = "welcome()">
function welcome() {
document.getElementById('id05').style.display='block';
}
...which loads one of the modals on every refresh of the page.
Thanks!
add an event listener to your form submission buttons whenever they click 'sign up' or 'log in' that turns your modals display from none to block. Here's an example in which I will grab an element with the class form-Submit and display the welcome modal whenever they click the form submission button. I hope this helps
var formSubmit = document.querySelector('.form-Submit');
formSubmit.addEventListener('click', () => {document.getElementById('id05').style.display='block'})
I was wondering how to implement a popup div that had its own address. The example in question is the Chrome Extensions Store: https://chrome.google.com/webstore/category/extensions
If you click a tile on that site, not only will the content pop up in form of a div, but it'll also have its own address. So if I copy the address and paste it onto a new window, it goes to the same popup. Not only that, if you click back button (or backspace), it closes the pop-up div instead of going back to previous page.
If there is no simple way to implement this, I'd like to know what javascript object or something I'd have to learn about to do this.
I'm not sure if this is the right S.E. forum to ask, but I had to ask someone.
You can use bootstrap modal. It's very good
here is the code,
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I didn't see the link you are talking about but I think they are hack the behavior of the link and instead of going to the clicked url show it'e content on an popup div. in jquery you can do it by something like preventDefault
If you click a tile on that site, not only will the content pop up in
form of a div, but it'll also have its own address. So if I copy the
address and paste it onto a new window, it goes to the same popup.
This is called stateless UI which can easily be achieved with for example router in Angular or Ember.
The idea is that every state in your application has its own address. If for example, your application has an entity user then the url to see a specific user would be
http://example.com/user/12345
Where 12345 is userId
At the same time to open an edit form for this object you might use
http://example.com/user/12345/edit
Irrelevant of when you get to the latter, your application will always open an edit form for user with id=12345
To understand this better you need to get acquainted with some principles of MVC and perhaps examine ui-router tutorial as an example of implementation
I have a checkbox on the bottom of my page. When the user clicks it, I want a popup to show up. Everything works except the toggling of the checkbox. When I click the checkbox using the code below the pop up appears but the box does not check. Any idea why?
The jQuery:
$('#confirm-final').on('show.bs.modal', function (e) {
$(this).find('.danger').attr('href', $(e.relatedTarget).data('href'));
});
The checkbox:
<label class="checkbox-inline"><asp:CheckBox ID="chkFinalSubmission" runat="server" data-toggle="modal" data-target="#confirm-final"/>Final Submission</label>
The popup:
<div class="modal fade" id="confirm-final" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Final Submission
</div>
<div class="modal-body">
If you check final submission and submit this ad note, <strong>you will not be able to change it anymore.</strong> It will be permanently stuck in readonly mode.
</div>
<div class="modal-footer">
<asp:Button ID="btnConfirmFinal" runat="server" Text="Got it" class="btn btn-default" data-dismiss="modal"/>
</div>
</div>
</div>
As for the why, the event that is fired to open a modal contains e.preventDefault(), which cancels any event that might have occurred by clicking the modal-invoking element. If it's a link, the href doesn't get followed but the modal opens instead. If it's a checkbox, the actual check is cancelled. This is built-in behavior, and you can't prevent it.
How to solve it:
In Bootstrap 3 you have access to the relatedTarget property of the event that fired the modal. Since your function already uses relatedTarget I'm assuming you use Bootstrap 3 indeed. You could just add the following rule to your existing jquery function:
$(e.relatedTarget).prop('checked', !$(e.relatedTarget).prop('checked'));
(This sets the checkbox to the inverse of the already existing 'checked' state, aka it toggles it on and off everytime you click).
Also, are you sure the rest of your code works? You refer to $(e.relatedTarget).data('href') but your checkbox has no data-href. Did you mean data('target') instead?
I have a simple div tag, that contains a button. When ever user clicks on this button it simply shows an alert.
<div id="myDiv">
<input type="button" id="btn" value="Click Me" />
</div>
and I also have a empty twitter bootstrap modal.
<div class="modal hide" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body"></div>
</div>
I have a second button, when ever the user clicks on it, it opens the bootstrap modal. I want to show "myDiv" in bootstrap modal when ever the user clicks on the second button. I want "myDiv" to be present in when ever modal opens and also I want to be present in my HTML document. So that I can always access it with out creating second button in modal.
Any idea how can I do that ?
I think this is what you were going for so basically on the modal show we append that button to the modal body.
$("#myDiv") .appendTo(".modal-body");
but we aren't done because after modal close we need to get it back in the body so we do:
$('#myModal').on('hide.bs.modal', function (e) {
$("#myDiv") .prependTo("body");
})
Here is a working fiddle:
http://jsfiddle.net/zcb3h/2/
I hope this is what you were looking for.
If a user clicks the delete user button, I display a modal window asking for confirmation of the delete. Within the modal window, if they click yes, then a function is called to delete the user (via ajax). If no, then the modal window is just closed. That is how it should work. But I don't know how to pass the user ID to the yes button. Below is what I have so far to delete the user but it may be way off.
<div class="modal hide fade" id="DeleteUserModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Delete User?</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<p>Are you sure you want to permanently remove this user?</p>
</div>
</div>
<div class="row-fluid">
<div class="span12">
Yes, I'm sure
<button class="btn" type="submit" data-dismiss="modal">No way!</button>
</div>
</div>
</div>
<div class="modal-footer">
Close
</div>
I do not know how to pass the userid to this specific line in the above modal window:
Yes, I'm sure
While I am using jQuery, the answer can be written in JavaScript.
Use the data-attributes. They'll make you happy. http://www.broken-links.com/2010/11/18/data-attributes-in-html-and-jquery/
Rather give this node:
Yes, I'm sure
..an id:
<a id="delete-user-link" class="btn btn-danger">Yes, I'm sure</a>
..when you want to delete a specific user (thus click on the delete button in the list), set the data-attribute for the specific user-id:
$(".delete-button").click(function(){
$("#delete-user-link").data("user-id", $(this).data("user-id");
// show the modal
});
this does require your delete-buttons (in the list) to have a data-attribute, like:
<a class="btn" data-user-id="123">delete</a>
and add a small jQuery method:
$("#delete-user-link").click(function(){
var userId = $(this).data("user-id");
// do your delete stuff here
});
That should do the trick!
For the click to load the modal window:
var delete_id = 1234;// Set this to the appropriate value
$(".span12 a.btn-danger").attr("href", "javascript:deleteUser("+delete_id+")");