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.
Related
I am using JQuery to Launch a modal pop-up on a linkbutton press event. The user is inputting text and I want to capture that text in my C# syntax to store in Database.
The modal dialog can be launched up to 8 times to input a value for 8 different entries. The issue that I have with my syntax is that it only retains the last input value, and not each previous one.
How would I go about capturing the value for each input?
<div id="myModal" 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">Additional</h4>
</div>
<div class="modal-body">
<p></p>
<asp:Label ID="lblCurrentText" runat="server"></asp:Label><br />
<asp:TextBox ID="txtCurrentText" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" id="btnUpdateModel">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Now pressing the update button will only update the view on the page. It does not make a database update. The database update occurs when a button press on the page occurs, and this was the syntax I attempted to use to achieve such result, but am only getting the last entry:
string bluegreenred = txtCurrentText.Text;
How can I have each entry saved in a C# variable for DB insert?
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)"
<div class="modal" id="myInquiry" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 id="myModalLabel">Thank you for your feedback:</h4>
</div>
<div class="modal-body">
<label for="inquiry">Feedback:</label>
<textarea class="form-control" rows="5" id="inquiry"></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" data-dismiss="modal" id="send">Send</button>
</div>
</div>
</div>
</div>
This is the code I have for my modal footer. I am wanting to click the send button and close the modal. Once it has been closed I want to have an alert window or modal pop up and thank the user for giving their feedback. I am new to web development and am getting stuck on this issue after numerous attempts (after finding different solutions on other questions) but nothing is working.
The modal's div id is 'myInquiry' if that helps.
Thank you!
You need to add an action to your modal Close button, worst way would be like:
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="alert('thank you');">Close</button>
you can add the ID to the button and then use jQuery to handle the action, and show something better than this.
You can add jQuery code like this.
$('button#send').click(function() {
alert('Alert Content');
}
Then you can see the alert "Alert Content" when you click the Send Submit button.
Bootstrap modal has a hide.bs.modal event, you can listen to that event and then, when the modal is closed (hidden from user) you can show the thank modal. Here is an example on jsfiddle. Cheers, sigfried.
Maybe you can try adding an
onclick="window.alert('<Your text here>')"
attribute to the button.
I am trying to do the following.
When the user clicks on a button a modal should show up
The modal should show a different content depending on which button has been pressed
There are many buttons of that kind on my site. So I want to pass a variable to the modal and make an if comparison
Here is my modal
<div class="modal fade" id="group_selection" role="dialog">
<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" id="myModalLabel">Select the journal club for which this vote should count</h4>
</div>
<div class="modal-body">
<form>
{% for group in groups %}
<input class="group_sel" type="checkbox" value="{{ group[0] }}">{{ group[0] }}
</input><br>
{% endfor %}
</form>
</div>
<div class="modal-footer">
<input class="btn btn-primary multivote" type="submit" data-dismiss="modal" value="Select" />
<input class="btn btn-default" type="button" data-dismiss="modal" value="Close" />
</div>
<!-- </form> -->
</div>
The modal above shows a selection of groups. This selection is the same for each modal, so that works fine, but now I want to disable the input statement in the for loop depending on which button has been pressed to get to this modal.
I don't know how to create new variables within html. I was hoping that jQuery can help with this, so I trigger the modal with the following jQuery command
<script type="text/javascript">
$(document).ready(function(){
$(".vote").click(function(){
$('#group_selection').modal('show');
});
});
</script>
I know that I can use jQuery to write values into the html code (as shown here Passing data to a bootstrap modal) but I don't see how I can use that to make an if selection?
Thanks for your help
best
carl
Simply determine which of the .vote buttons were clicked and perform the appropriate task before showing the modal, i.e.:
$(".vote").click(function(){
switch($(this).attr('value'))
{
case '5 Stars': // Assumes your button's value was '5 Stars'
$('#group1').attr('disabled','disabled'); //disables group1 when 5 stars was selected
break;
case '4 Stars': ... break;
}
$('#group_selection').modal('show');
});
Or, assign each different button a different .click() handler to execute the appropriate task.
Side Notes: You should also reset all the disables when the modal is opened and reset the form to make it fresh for each load as well
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+")");