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?
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)"
<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 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.
How can I use this modal on different pages? I tried everything I can but it just works in one page.
HTML:
<div class="modal fade" id="confirm-delete1" 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" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="myModalLabel">Confirm Delete</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a class="btn btn-danger btn-ok">Delete</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
JavaScript:
<script>
$('#confirm-delete1').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
</script>
Anchor / link:
<i class="fa fa-fw fa-trash-o" alt="Delete journal" title="Delete journal"></i>delete
Based on your comment:
I'd echo out my the $id and the whole php block, i just did not include it here. I just want to know on how to have a prompt confirmation box, if i clicked the delete link, it will prompt a message "Do you want to delete this?" with a TEXTBOX where the CONFIRMATION CODE will be entered. If confirmation code = $confirmation_code then it will delete the record, otherwise it will not.
That would take quite a few steps in order to get the desired effect. But I can give you a list of steps you'd need to take:
You can make a prompt with the prompt() function, you can also put a message with the prompt as the first parameter, you can also store the return of that prompt in a variable to use later. (e.g. var code = prompt("Enter a confirmation code")...)
Perform a Ajax request to sent that data to the server.
Compare the data server-side and perform any actions you need to server-side, or send data back to the client if you need to do any operations client-side as well.
My original issue:
I know that when this gets coded, the variables get written when the request is sent from the server. So I'll probably have to use JQuery, but I'm lost on where to even start (I don't know JS).
This code works when I refresh the page, but I want it to refresh the data being displayed when the modal is clicked on.
Can anyone point me in the right direction?
My self found fix, for others to view:
Modal Code:
<div class="modal fade ajaxmodal" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Trace Logging</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
JS:
$('.ajaxmodal').on('show.bs.modal', function () {
$('#modal-body').load('trace.php');
});
trace.php has formatted html that displays on click perfectly.
Updated my original question to contain my answer as well.