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+")");
Related
I'm currently working on a system that has a CREATE EVENT module. Now this CREATE EVENT module allows a user to create events and display it on their profile, and other users can join their event. I used a modal to view further details of an event posted. In the perspective of the one creating the event, the user can publish an event to this so-called "PAST EVENTS" if the event is finished already. I'm having trouble publishing since I cannot figure out how to pass an ID of an EVENT inside a modal.
This is my modal. I used ajax in retrieving and displaying the data.
<div id="readmore" 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" id="event_title"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-6">
<img id="event_img">
<h6>HOW TO GET THERE</h6>
</div>
<div class="col-xs-6">
<p id="event_description"></p>
<h6>WHEN</h6>
<p id="event_start"></p>
<h6>WHO</h6>
<p id="occupation"></p>
<h6>WHAT TO BRING</h6>
<p id="event_material_req"></p>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-danger" data-dismiss="modal" onclick="publishToPast()">Publish to Past Activity</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now what I want is when this <a class="btn btn-danger" data-dismiss="modal" onclick="publishToPast()">Publish to Past Activity</a> will be clicked, it will get the ID of the data in the modal and then update the STATUS of the EVENT on the Database so it can now be displayed on the PAST EVENTS. I was thinking getting it through PHP (through $_SESSION) but I cannot do so, because the modal depends on the number of EVENTS the user will create.
You have not mention but i guess that you are using an Ajax call to get and show event data in this modal. In this case, the way you are showing data of WHEN, WHO, WHAT TO BRING etc. You can add one hidden input field in this modal with some unique id like below and insert event id in that input field.
<input type="hidden" name="event_id" id="event_id" value="">
Now in your publishToPast() function write below code.
var eventId = $("event_id").val();
Now you have event id in eventId variable. Use it wherever you want.
Remember to remove event id from that input when modal close.
If you have ID when you show the modal just in your onclick function
onclick="publishToPast(herePassIDvalue)"
I am creating a web app in which I have two buttons.
1st for insert
2nd for update
and on the click of any of these buttons I want to open a modal and it is working good.
modal is poped up after I click (either on insert or update)
<div class="modal fade" id="myModal" 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"><p style="color:red; text-align:center;">Don't Leave Empty Field Please Fill 'N.A' There !!</p></h4>
</div>
<div class="modal-body">
<select>
<option>Insert Text Box</option>
<option>Update Text box</option>
</select>
<input type="text" name="insert">
<input type="text" name="update">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Insert</button>
<button type="button" class="btn btn-default">Update</button>
</div>
</div>
</div>
</div>
But if a user click insert or update button in modal-footer must be hide
and in modal if user chooses insert in dropdownlist update textbox must be hide and if a user chooses update insert textbox must be hide.
You need to add the ng-click directive to the two buttons and add a method to close the modal, like this:
<button ng-click="closeModal()" type="button" class="btn btn-default">Insert</button>
Most likely the modal you are using already has a method for this available. Otherwise you would need to handle the closing part in your controller.
You should keep in your controller's data the information and then use the ngShow directive (doc) to display one or the other.
Here's an example if you have a controller named ctrl with a updateModal boolean.
<button type="button" class="btn btn-default" ng-show="!ctrl.updateModal">Insert</button>
<button type="button" class="btn btn-default" ng-show="ctrl.updateModal">Update</button>
Then you'll have to update this boolean value when you open the modal.
You could use a scope variable to keep track of the last button that was pressed, and use ngShow to only display the desired button.
However, if chances are you're going to eventually customize the modal dialog further, it's going to get messy. If I were you, I'd sacrifice a bit of typing and create two modal dialogs. Then, I'd have the action buttons show each their associated modal.
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.
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 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.