Link to home
Start Free TrialLog in
Avatar of Aleks
AleksFlag for United States of America

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.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 ?
Avatar of hielo
hielo
Flag of Wallis and Futuna image

How is the modal window implemented?  Are you using a specific plugin to implement the modal window?
Avatar of Aleks

ASKER

Yes. I am using this template:

http://localhost/inspina/modal_window.html
"localhost" only works on your machine.
Avatar of Aleks

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 !
Avatar of Aleks

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.
Avatar of Aleks

ASKER

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 ?
Avatar of Aleks

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(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 ?
SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Aleks

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
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Aleks

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.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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Aleks

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
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?
Avatar of Aleks

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
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

Avatar of Aleks

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(esseyId);  
  });
});
</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>

Open in new window

Avatar of Aleks

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")%>
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Aleks

ASKER

Got it !  thanks.