Aleks
asked on
Using modal windows to update a record
I have a page with a repeated region displaying results.
I want to use a modal window to display the selected record and update it.
I currently have this to open the modal window:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal4">
Modal window opens but needs a parameter to display the recordset information from the selected record. So it displays an error.
How can I open the modal window and pass parameters to it ?
If I had a normal link to another page, which I am trying to avoid having the link to page.asp would be:
page.asp?formcaseid=<%=(rs _forms.Fie lds.Item(" id").Value )%>&caseid =<%=(rs_ca se.Fields. Item("Id") .Value)%>
So I am passing values for 'formcaseid' and for 'caseid'
How can I call the modal window AND pass those to parameters with their values ?
I want to use a modal window to display the selected record and update it.
I currently have this to open the modal window:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal4">
Modal window opens but needs a parameter to display the recordset information from the selected record. So it displays an error.
How can I open the modal window and pass parameters to it ?
If I had a normal link to another page, which I am trying to avoid having the link to page.asp would be:
page.asp?formcaseid=<%=(rs
So I am passing values for 'formcaseid' and for 'caseid'
How can I call the modal window AND pass those to parameters with their values ?
How is the modal window implemented? Are you using a specific plugin to implement the modal window?
ASKER
"localhost" only works on your machine.
ASKER
Sorry ... I sent you the wrong link. Here it is:
http://wrapbootstrap.com/preview/WB0R5L90S
Allowing to open modal windows and passing a parameter will be HUGE help. I can have one to add a record, one to edit instead of having 3 pages. Hope we can figure this out.
I am actually using he code with the fade in effect. And as I edited this comment I realized on EE it opened in what seems like a modal window :) . ... exactly what I want to achieve !
http://wrapbootstrap.com/preview/WB0R5L90S
Allowing to open modal windows and passing a parameter will be HUGE help. I can have one to add a record, one to edit instead of having 3 pages. Hope we can figure this out.
I am actually using he code with the fade in effect. And as I edited this comment I realized on EE it opened in what seems like a modal window :) . ... exactly what I want to achieve !
ASKER
If you don't think that modal will work I am open to learning how to use another one if you know of one that I can pass on the id of the record. Have a form in the modal to update or insert record and then close and refresh the page to display the new information on the page where the modal was called.
ASKER
I am using this code to call the modal:
<a href="forms_SPdelete.asp?f ormcaseid= <%=(rs_for ms.Fields. Item("id") .Value)%>& caseid=<%= (rs_case.F ields.Item ("Id").Val ue)%>&blob id=<%=(rs_ forms.Fiel ds.Item("B lobid").Va lue)%>" class="btn btn-white btn-sm1" id="<%=(rs_forms.Fields.It em("id").V alue)%>" > <i class="fa fa-trash-o" ></i></a>
As you can see the "id" has the id of the record. If I can pull that and put the id in a hidden field in the modal window that would take care of things I think. Is this possible ?
<a href="forms_SPdelete.asp?f
As you can see the "id" has the id of the record. If I can pull that and put the id in a hidden field in the modal window that would take care of things I think. Is this possible ?
ASKER
This is actually the code that displays the value of the 'id' in the modal / content window:
<div class="modal-body edit-content"></div>
This is the modal code:
<script>
$('#edit-modal').on('show. bs.modal', function(e) {
var $modal = $(this),
esseyId = e.relatedTarget.id;
$modal.find('.edit-content ').html(es seyId);
})
</script>
Is there a way to save the value of the ID into a variable so that I can place it inside a form field instead of displaying it as above ?
<div class="modal-body edit-content"></div>
This is the modal code:
<script>
$('#edit-modal').on('show.
var $modal = $(this),
esseyId = e.relatedTarget.id;
$modal.find('.edit-content
})
</script>
Is there a way to save the value of the ID into a variable so that I can place it inside a form field instead of displaying it as above ?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That didn't work. Unfortunately. I am getting real close perhaps if you see the code you might suggest something. This is the link to the code:
http://jsfiddle.net/amucino/eswvwhoe/8/
Unfortunately when running it in jsfiddle its not showing the actual value of the parameter I am passing (See screenshot of local code). Here it works fine. And shows : 786
the code to show it though is: <div class="modal-body edit-content"></div>
I am not familiar with jquery so I am not sure how to save that value into a variable I can then use to make my own code and call it for example using : <%=request("variablenm")%>
Then I can post the form to page.asp where it will be processed. So it looks like all I am missing is simply saving the value of the parameter into a variable.
modal-screenshot.PNG
http://jsfiddle.net/amucino/eswvwhoe/8/
Unfortunately when running it in jsfiddle its not showing the actual value of the parameter I am passing (See screenshot of local code). Here it works fine. And shows : 786
the code to show it though is: <div class="modal-body edit-content"></div>
I am not familiar with jquery so I am not sure how to save that value into a variable I can then use to make my own code and call it for example using : <%=request("variablenm")%>
Then I can post the form to page.asp where it will be processed. So it looks like all I am missing is simply saving the value of the parameter into a variable.
modal-screenshot.PNG
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
No, the value of the parameter I will pass comes from a recordset. I am using ASP Classic.
The value is: <%=(rs_forms.Fields.Item(" id").Value )%>
In a normal link would be very simple:
page.asp?formcaseid=<%=(rs _forms.Fie lds.Item(" id").Value )%>
I am trying to do exactly that, but instead of sending to another page send to the modal window. I tried just adding the parameter to the link but that didn't work.
This is what I tried:
<a href="#myModalformcaseid=< %=(rs_form s.Fields.I tem("id"). Value)%>" data-toggle="modal" id="<%=(rs_forms.Fields.It em("id").V alue)%>" data-target="#edit-modal"> <i class="btn btn-white btn-sm fa fa-folder"></i></a>
The recordset shows the results in a repeated region, so the user selects the row they want to edit and the parameter is passed to the window that displays a form to edit it.
The value is: <%=(rs_forms.Fields.Item("
In a normal link would be very simple:
page.asp?formcaseid=<%=(rs
I am trying to do exactly that, but instead of sending to another page send to the modal window. I tried just adding the parameter to the link but that didn't work.
This is what I tried:
<a href="#myModalformcaseid=<
The recordset shows the results in a repeated region, so the user selects the row they want to edit and the parameter is passed to the window that displays a form to edit it.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That didn't work quite the way I thought. In fact an alert came up showing number 923 no matter which row I selected, then the modal window opened and nothing showed in the form field.
number.PNG
number.PNG
You will need to update the fiddle with a more "realistic" markup. I don't know what you clicked, nor the underlying markup that you currently have. Where are these "unique" ids?
ASKER
the fiddle is the actual code. The value comes from a recordset (ASP)
I am attaching the full page so you can see what I mean.
The repeated region shows the results of the recordset. It has an ID. I need to pass that "ID" to the modal window to filter a recordset I will make later on so that I can edit it from there.
page.txt
I am attaching the full page so you can see what I mean.
The repeated region shows the results of the recordset. It has an ID. I need to pass that "ID" to the modal window to filter a recordset I will make later on so that I can edit it from there.
page.txt
Given:
<table>
<tr>
<td><a href="#myModal" data-toggle="modal" data-formcaseid="786" data-caseid="23" data-target="#edit-modal"> <i class="btn btn-white btn-sm fa fa-folder">OPEN MODAL</i></a></td>
</tr>
<tr>
<td><a href="#myModal" data-toggle="modal" data-formcaseid="456" data-caseid="90" data-target="#edit-modal"> <i class="btn btn-white btn-sm fa fa-folder">OPEN MODAL</i></a></td>
</tr>
</table>
You can click on either link, and on the modal you can get the relevant caseids as follows:
<table>
<tr>
<td><a href="#myModal" data-toggle="modal" data-formcaseid="786" data-caseid="23" data-target="#edit-modal">
</tr>
<tr>
<td><a href="#myModal" data-toggle="modal" data-formcaseid="456" data-caseid="90" data-target="#edit-modal">
</tr>
</table>
You can click on either link, and on the modal you can get the relevant caseids as follows:
$('#edit-modal').on('show.bs.modal', function(e) {
/*
var $modal = $(this);
esseyId = e.relatedTarget.id;
$modal.find('.edit-content').html(esseyId);
*/
var button = $(e.relatedTarget);
var caseid=button.data('caseid')
var formcaseid = button.data('formcaseid');
alert( caseid + " " + formcaseid );
});
ASKER
We actually came up with this script:
The problem is that it passes on the value to a field in the modal window called "idfield"
I can pass It to a hidden field and that's alright in certain scenarios, but what I really need is to save the value into a variable. This way I can use it any way I want inside the modal window.
This is our current script:
<script type="text/javascript">
$(function () {
$('#edit-modal').on('show. bs.modal', function(e) {
var $modal = $(this),
esseyId = e.relatedTarget.id;
$('input[name="idfield"]', $modal).val(esseyId); // HERE WE PASS THE VALUE TO FIELD CALLED IDFIELD INSTEAD CAN WE SAVE THIS IN A VARIABLE ?
$modal.find('.edit-content ').html(es seyId);
});
});
</script>
The problem is that it passes on the value to a field in the modal window called "idfield"
I can pass It to a hidden field and that's alright in certain scenarios, but what I really need is to save the value into a variable. This way I can use it any way I want inside the modal window.
This is our current script:
<script type="text/javascript">
$(function () {
$('#edit-modal').on('show.
var $modal = $(this),
esseyId = e.relatedTarget.id;
$('input[name="idfield"]',
$modal.find('.edit-content
});
});
</script>
<script type="text/javascript">
$(function () {
//note: show.bs.modal occurs just before the "popup" is displayed
$('#edit-modal').on('show.bs.modal', function(e) {
var $modal = $(this); //put a semicolon here;
//now that essayId is not declared as "var essayId" (since you ended with a semicolon the line above)
//you can create the variable on the "window" space so that it becomes a global variable
window.esseyId = e.relatedTarget.id;
$('input[name="idfield"]', $modal).val(esseyId); /* here you don't need to prefix the variable with "window." -- just essayId should still work, but more imporantly, after this function is done executing, you will still have access to essayId since it is global. */
$modal.find('.edit-content').html(esseyId);
});
//note: shown.bs.modal (notice the "n" after "show") occurs just after the "popup" is displayed
$('#edit-modal').on('shown.bs.modal',function(){
alert("Saved id=" + essayId); /* should show you the value saved earlier */
});
});
</script>
ASKER
I used your code and in the modal window I tried to display the value of the variable but shows nothing. I used:
<%=Request("essayId")%>
<%=Request("essayId")%>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Got it ! thanks.