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.Fields.Item("id").Value)%>&caseid=<%=(rs_case.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 ?
LVL 1
AleksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
How is the modal window implemented?  Are you using a specific plugin to implement the modal window?
AleksAuthor Commented:
Yes. I am using this template:

http://localhost/inspina/modal_window.html
hieloCommented:
"localhost" only works on your machine.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

AleksAuthor Commented:
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 !
AleksAuthor Commented:
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.
AleksAuthor Commented:
I am using this code to call the modal:

<a href="forms_SPdelete.asp?formcaseid=<%=(rs_forms.Fields.Item("id").Value)%>&caseid=<%=(rs_case.Fields.Item("Id").Value)%>&blobid=<%=(rs_forms.Fields.Item("Blobid").Value)%>" class="btn btn-white btn-sm1" id="<%=(rs_forms.Fields.Item("id").Value)%>" > <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 ?
AleksAuthor Commented:
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(esseyId);
           
        })
    </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 ?
hieloCommented:
Look at the impromptu plugin:
http://trentrichardson.com/Impromptu/#Examples

specifically, the "impromptu:loaded" event handler is most likely what you need.

<a href="forms_SPdelete.asp?formcaseid=<%=(rs_forms.Fields.Item("id").Value)%>&caseid=<%=(rs_case.Fields.Item("Id").Value)%>&blobid=<%=(rs_forms.Fields.Item("Blobid").Value)%>" class="impromptu-modal btn btn-white btn-sm1" id="<%=(rs_forms.Fields.Item("id").Value)%>" > <i class="fa fa-trash-o" ></i></a>

<script>
$(document).ready(function(){
  $('.impromptu-modal').on('click',function(e){
       e.preventDefault();
       var url = $(this).attr('href');
       $.prompt("Info goes here: " + url, {
	          title: "Are you Ready?",
 	          buttons: { "Yes, I'm Ready": true, "No, Lets Wait": false },
	          submit: function(e,v,m,f){
		              // use e.preventDefault() to prevent closing when needed or return false. 
		              // e.preventDefault(); 

	  	    console.log("Value clicked was: "+ v);
	         }
        });
  });
});
</script>

Open in new window

AleksAuthor Commented:
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
hieloCommented:
>> Modal window opens but needs a parameter to display the recordset information from the selected record.
Where is the "selected record" information coming from?  Based on your fiddle, if you are trying to get the account, use:

         $('#edit-modal').on('show.bs.modal', function(e) {
var account = $('select[name="account"]>option:selected').val() 
             alert( "account is " + account);
             var $modal = $(this),
                 esseyId = e.relatedTarget.id;
                          $modal.find('.edit-content').html(esseyId);
             
         })

Open in new window


As for the reason why the fiddle you created doesn't work, it's because:
A. you have script tags in the javascript section.  Get rid of them.  It should have just "plain" javascript code.
B. you have jquery added twice. Git rid of the jquery you added in the "external resources" section.
AleksAuthor Commented:
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.Fields.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_forms.Fields.Item("id").Value)%>" data-toggle="modal" id="<%=(rs_forms.Fields.Item("id").Value)%>" 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.
hieloCommented:
>> I tried just adding the parameter to the link but that didn't work.
Let's say that you expect:
<%=(rs_forms.Fields.Item("id").Value)%>

to print out 23.  Are you saying that the code in the browser's source code ends up being blank  as in:
<a href="#myModalformcaseid=" data-toggle="modal" id="" data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>

Essentially the 23 is missing?

Or is the 23 showing up:
<a href="#myModalformcaseid=23" data-toggle="modal" id="23" data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>

but you just don't know how to retrieve it?  If this is the case try jQuery's "starts-with" selector to target the <a> tag that has an href attribute that "starts-with" '#myModalformcaseid' and from that <a> tag retrieve its id attribute (since you are setting to the actual case id):

         
$('#edit-modal').on('show.bs.modal', function(e) {
var account = $('a[href^="#myModalformcaseid"]').attr("id");
             alert( "account is " + account);
             var $modal = $(this),
                 esseyId = e.relatedTarget.id;
                          $modal.find('.edit-content').html(esseyId);
             
         })

Open in new window

AleksAuthor Commented:
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
hieloCommented:
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?
AleksAuthor Commented:
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
hieloCommented:
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:
         $('#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 );

         });

Open in new window

AleksAuthor Commented:
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(esseyId);  
  });
});
</script>
hieloCommented:
<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>

Open in new window

AleksAuthor Commented:
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")%>
hieloCommented:
I don't know what you think that does.  essayId is a javascript variable.  This:
<%=Request("essayId")%>

is executed on the server before the browser has finished receiving all the (dynamic) html you are generating.  So it doesn't exist on the server.  When I stated that window.essayId makes the variable global, it was understood that it is on the client-side javascript since there is no "window" object in ASP but more importantly, because that code is client-side javascript code.

The modal window/popup is completely independent of the server execution.  It is triggered exclusively on the client-side.  Similarly,  
$('#edit-modal').on('show.bs.modal', function(e) {...}) is executed on the client-side.  That's why on my post above(ID: 40917712) I showed you two different rows, with different  data-formcaseid and data-caseid to show you how you can "embed" data in the "links" that trigger the modal.  Notice that I put quotes around "links" because even though they are <a> tags, they are not actually linking anywhere (meaning they don't navigate to any page/url).  They are used exclusively to trigger the modal popup.  

If what you need is to query the db based on the associated data-formcaseid and data-caseid of the clicked link, based on my post above (ID: 40917712), instead of:
alert( caseid + " " + formcaseid );

emit an ajax call passing the caseid and formcaseid.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AleksAuthor Commented:
Got it !  thanks.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.