Declare value of variable and pass it to form value. (modal window/jquery)

Hi,

I am trying to create a modal window to insert a record in my page.
I can call the modal window just fine. 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.

And also as you can see there is a form, a target in the form and a submit button.
The close button works but when I click 'submit' nothing happens.
modal-screenshot.PNG
LVL 1
AleksAsked:
Who is Participating?
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.

Julian HansenCommented:
Trying to understand what you want to do

This is server side code
<%=request("variablenm")%>

Open in new window


JQuery is client side

a) Where does the value come from initially
b) How do you want to use the value - does it get sent as part of a form - is there a reason you can't use a hidden input to store the value.
0
AleksAuthor Commented:
The code I posted doesn't have the recordset information.
I have a recordset in the page and there is an icon to open the modal window on each row. When user clicks on the selected row it passes the id of the record to the modal window so user can update the record.

here are screenshots to clarify.

1. list of 'forms'
2. modal window: Trying to pass the id of the form to the modal window.

This is the code inside the modal code that will get the parameter:

<div class="col-sm-10"><input type="text" class="form-control" placeholder="Mr. | Ms." value="<%=request("formcaseid")%>"></div>

I will actually use a hidden field but for test purposes this will do.

Modal 1: list of forms
Modal 2: Modal window should show the ID being passed in the description field (for now). But I don't know how to pass the parameter from the link to here.
modal1.PNG
modal2.PNG
0
AleksAuthor Commented:
I tried this but does not pass the parameter to the modal window.

<a href="#myModalformcaseid=<%=(rs_forms.Fields.Item("id").Value)%>" data-toggle="modal" id="<%=(rs_forms.Fields.Item("id").Value)%>" data-target="#edit-modal">
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Julian HansenCommented:
This should address all of your open questions.

I have take the code from your fiddle and above and constructed this sample
http://www.marcorpsa.com/ee/t962.html

As you will see this does what your screen shots show and your fiddle partially does.

There are some issues with that popup though - which probably relates to your other question about why the form is not submitting.

You have two form declarations in your fiddle code that look like this
<form action="page.asp" method="post" class="form-horizontal" id="form2"></form>
<div class="modal-content animated fadeIn">
<form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form1"></form>

Open in new window

Then on line 76 you have an orphan </form> which indicates that you probably made a typo with one of the form declarations above. Not sure why you have two - probably an error but I am going to guess that the second one should not be closed and that the closing </form> on line 76 is where the actual close should occur.

I think this will solve your submit problem.

The next problem is you want the 786 to be saved somewhere. Currently you are sending it to a <div> on line 46 of your code (21 of mine)
<div class="modal-body edit-content">

Open in new window


You can send that value anywhere you like - for instance if you want it to go to a text field that is submitted with the form you simply do this (refer to sample)
	$('#edit-modal').on('show.bs.modal', function(e) {
		var $modal = $(this),
			esseyId = e.relatedTarget.id;

		$('input[name="idvalue"]', $modal).val(esseyId); // HERE
		$modal.find('.edit-content').html(esseyId);
	})

Open in new window


Another issue with your form is that the Description input does not have a name - so whatever you enter in that field will not submit with the form - you must give it a name in order for its value to be sent to your script.

Lets see how far you get with the above.
0
AleksAuthor Commented:
Ok .. let me take a step at the time. I just named the form 'form2'

Ill try the code above see if it works.
0
AleksAuthor Commented:
Ok. Let's tackle one thing at the time.
Passing the variable to a field is one and submitting the form are the two issues.

Passing the value I added an id to the field where I want to put the ID into:

<input id = "idfield" name "idfield" type="text" class="form-control" placeholder="Mr. | Ms." value="<%=request("formcaseid")%>">

And I added the script you sent me with the id name of the field where I want the parameter to go:

<script>
         $('#edit-modal').on('show.bs.modal', function(e) {
             
             var $modal = $(this),
                 esseyId = e.relatedTarget.id;
                          $modal.find('.edit-content').html(esseyId);
             
         })
             
             $('#edit-modal').on('show.bs.modal', function(e) {
            var $modal = $(this),
                  esseyId = e.relatedTarget.id;

            $('input[name="idfield"]', $modal).val(esseyId); // HERE
            $modal.find('.edit-content').html(esseyId);
      })
      
      
</script>

It still doesn't show the ID number in the field  : $
0
Julian HansenCommented:
Is the code snippet above duplicated in your actual code or did you just post that to illustrate?

You should have only one block as follows. Also it should be in side a $(function() { ... }); block so that the code fires on load.
<script>
$(function () {
  $('#edit-modal').on('show.bs.modal', function(e) {
     var $modal = $(this),
              esseyId = e.relatedTarget.id;

     $('input[name="idfield"]', $modal).val(esseyId); // HERE
     $modal.find('.edit-content').html(esseyId);  
  });
});</script>

Open in new window

Please look at the source code of the sample I provided - the code there works.
0
AleksAuthor Commented:
Just made sure only one. Still form won't submit when I click the button. Is the button code ok ? is the form code ok ?
code.PNG
0
Julian HansenCommented:
Where is the form code - can you post the code for the modal showing where you have declared your form.

Have you tested the sample?
0
AleksAuthor Commented:
Let me just attach the whole page. I removed the connections and recordsets, the rest is there.
page.txt
0
Julian HansenCommented:
Yup - still has the same problem </form> in the wrong place. I have removed it for you - try this.
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html>




<head>
<!--#include file="../../includes/bdot/headlevel2.asp"-->
<!--#include file="../../includes/bdot/scripts.asp"-->
<link href="../includes/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<script src="../includes/jquery/jquery-2.1.4.min.js"></script>
</head>

<!--#Body-->
<body>
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">

<!--#Left menu-->        
<!--#include file="../../includes/bdot/leftnavfilescases.asp"-->       
</div>
</nav>

<div id="page-wrapper" class="gray-bg">
	<div class="row border-bottom">
   
        
<!-- Top bar -->
<!--#include file="../../includes/bdot/navbarlevel2.asp"-->
	
	</div>

<!-- Breadcrumbs navigation -->       
<div class="row wrapper border-bottom white-bg page-heading">
	<div class="col-lg-10">
		<h2>Cases</h2>
			<ol class="breadcrumb">
				<li><a href="../default.asp">Home</a></li>
				<li >Files</li>
                <li class="active"><strong><a href="SearchViewsearchcases.asp">Cases</a></strong></li>
                 <li class="active"><strong><a href="../Contacts/personal_general.asp?NewUserId=<%=(rs_case.Fields.Item("alienid").Value)%>" target="_blank"><%=(rs_case.Fields.Item("FirstNm").Value)%>&nbsp;<%=(rs_case.Fields.Item("MiddleNm").Value)%>&nbsp;<%=(rs_case.Fields.Item("LastNm").Value)%></a></strong></li>
                <li ><%=(rs_case.Fields.Item("Processcatalog").Value)%></li>
                <li class="active"><%=(rs_case.Fields.Item("caseid").Value)%></li>
			</ol>
	</div>
</div>
<!-- Breadcrumbs navigation end -->
 
<!-- Navigation bar -->

<nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
       
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">General Information <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li ><a href="general_basic_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Basic information</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="general_notices_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Notices</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="general_shipping_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Shipping</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="general_billing_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Billing</a></li>
                </ul>
              </li>
				<li><a href="links_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Links</a></li>
              <li class="active"><a href="forms_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Forms</a></li>
              <li><a href="notes_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Notes</a></li>
              <li><a href="reminders_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Reminders</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Documents<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="checklist_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Checklist</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="ltrmerge_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Letter Merge</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="attachments_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Attachments</a></li>
                </ul>
              </li>
              <li><a href="steps_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Steps</a></li>
              <li><a href="log_index.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>">Log</a></li>
            </ul>

          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
  </nav>
    
 <!-- Navigation bar end-->   
<!-- Main content left-->
<form name="form1" action="" method="POST" class="form-horizontal" id="form1">
	<div class="wrapper wrapper-content animated fadeIn" style="animation-delay: 0.4s;">
    	<div class="row">
    	  <div class="col-lg-12">
    	    <div class="ibox float-e-margins">
    	      <div class="ibox-title">
    	        <h5>Forms</h5>
    	        <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="close-link"> <i class="fa fa-times"></i> </a> </div>
  	        </div>
            <div class="ibox-content">
            <a href="forms_add.asp?caseid=<%=(rs_case.Fields.Item("id").Value)%>" class="btn btn-primary">Add form</a>
            </div>           
    	      <div class="ibox-content">
    	        <table class="table table-hover">
    	          <thead>
    	            <tr>
    	              <th>Actions</th>
    	              <th>Beneficiary</th>
    	              <th>Form</th>
    	              <th>Description</th>
   	                </tr>
  	            </thead>
    	          <tbody>
                    <% 
While ((Repeat1__numRows <> 0) AND (NOT rs_forms.EOF)) 
%>
                      <tr>
                        <td><a href="javascript:;" onClick="MM_openBrWindow('forms_bridgecall.asp?caseid=<%=(rs_case.Fields.Item("Id").Value)%>&amp;userid=<%=(rs_forms.Fields.Item("mainuserid").Value)%>&amp;Activityid=<%=(rs_forms.Fields.Item("id").Value)%>&amp;qid=<%=(rs_forms.Fields.Item("qid").Value)%>&amp;Blobid=<%=(rs_forms.Fields.Item("Blobid").Value)%>','BlueForm','scrollbars=yes,resizable=yes,width=1000,height=800')"><i class=" btn btn-white btn-sm fa fa-eye"></i></a>&nbsp;<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>&nbsp;<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>  <div>
                        
                        
                        </td>
                        
                        <td><%=(rs_forms.Fields.Item("FirstNm").Value)%>&nbsp;<%=(rs_forms.Fields.Item("LastNm").Value)%></td>
                        <td><%=(rs_forms.Fields.Item("fname").Value)%></td>
                        <td><%=(rs_forms.Fields.Item("fdescription").Value)%></td>
                      </tr>
                      <% 
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  rs_forms.MoveNext()
Wend
%>
                  </tbody>
  	          </table>
              
              
                                    
                            
                            
  	        </div>
  	      </div>
  	    </div>
     
		</div>
	</div>
</form>

    
      
            
                            
                            
          <!-- footer -->
<!--#include file="../../includes/bdot/footer2.asp"-->
</div>
            
<!-- sidebar -->
<div id="right-sidebar">
<div class="sidebar-container">
<!--#include file="../../includes/bdot/sidebar.asp"-->
</div>
</div>




    <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        
            <div class="modal-content animated fadeIn">
 			  <form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" form="form2">
 			 <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Edit form</h3><small>Please select the Beneficiary that will fill out the form and update the description.</small>
    
                </div>
                  <div class="panel-body">
    	            <div >
    	              <div class="ibox float-e-margins">
    	                
                        <div class="form-group"><label class="col-sm-2 control-label">Beneficiary</label>
<div class="col-sm-10">
<select class="form-control m-b" name="account">
 <option>option 1</option>
 <option>option 2</option>
 <option>option 3</option>
 <option>option 4</option>
 </select>
 </div>  </div>
    	                 
                      
<div class="form-group"><label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10"><input id = "idfield" name "idfield" type="text" class="form-control" placeholder="Mr. | Ms." value="<%=request("formcaseid")%>"></div>
</div>   
    	           

  	                 
  	                </div>
  	              </div>
  	            </div>
               
                <div class="modal-footer">
                      <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
     					<button type="submit" class="btn btn-primary" id = "mdlsave"  name = "mdlsave" >Save changes</button>
                </div>
            </div>
            </form>
        </div>
    </div>
 


</body>
</html>
<!-- Bootstrap scripts -->
<!--#include file="../../includes/bdot/bdotbootstrapscriptslevel2.asp"-->      
<script src="../includes/formvalidation/dist/js/formValidation.min.js"></script>
<script src="../includes/formvalidation/dist/js/framework/bootstrap.min.js"></script>
<script src="../includes/js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
 $('a.btn-white.btn-sm1').click(function(e) { 
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    warnBeforeRedirect(linkURL);
  });

  function warnBeforeRedirect(linkURL) {
    swal({
      title: "Are you sure?", 
      text: "Please confirm you wish to delete this record", 
      type: "warning",
	  confirmButtonColor: "#DD6B55",
      showCancelButton: true,
    }, function() {
      // Redirect the user
      window.location.href = linkURL;
    });
  }
  </script>

<script>
$(function () {
  $('#edit-modal').on('show.bs.modal', function(e) {
     var $modal = $(this),
              esseyId = e.relatedTarget.id;

     $('input[name="idfield"]', $modal).val(esseyId); // HERE
     $modal.find('.edit-content').html(esseyId);  
  });
});</script>t>

Open in new window

0
AleksAuthor Commented:
The form submits fine now. But the parameter is not being passed yet. I copy/pasted the code above. When I open the form the 'description' field should be displaying the value of the 'formcaseid'  but its blank.
parameter.PNG
0
AleksAuthor Commented:
Any clues on why the parameter is not making it to the form element ?
0
Julian HansenCommented:
There are several things wrong with your script -

1. Scripts after the body tag
Your scripts have been declared after the closing </body></html> tags - this is not valid

2. Closing script tag <script>t>
Refer line 260 of my last posting </script>t>

3. Closing </form> in the wrong place. The closing tag should be on line 216 above the <div> that is there otherwise that </div> does not match properly with its parent.

4. No closing </div> for wrapper class - you are missing a closing </div> tag

5. JQuery not contained inside a $(function()
JQuery on line 231 is not inside a document load block ($(function() { ... })

6. Probably the culprit here - the name attribute for the Description field is missing an missing an = sign. Refer line 204
<input id = "idfield" name "idfield" ... />

Open in new window


I have made the corrections to the above and placed a new sample here. As you can see it is working.

http://www.marcorpsa.com/ee/t962a.html

A word of advice. The first step to fixing any errors on a web page is page validation - if your page has errors it makes the process of finding the error that much more complicated - clean up the errors and ensure your markup and scripts are valid.

The second step to finding errors is to layout your document neatly - making sure tags line up - this is labourious but it is amazing how many errors leap out at you when your code is properly formatted. It also makes it easier to read and follow the logic of the page which is also crucial to finding bugs.
0
AleksAuthor Commented:
I am using DW2015. and ie console to show errors. It only showed a body tag error.
Ill test the code you have and get back to you. Thanks for taking the time ..
0
AleksAuthor Commented:
It does passes the parameter (786) ... Ill try now with the actual value from the database and passing it to a hidden field instead of that form field. crossing fingers  :)
0
AleksAuthor Commented:
It worked ! This works great for adding records. Since I can put the recordset id in the hidden field.
 
Is there a way to pass other parameters and values besides the record id ?

This is the reason. Currently the record has :

recordsetid - which we are already passing
mainuserid - its an integer
description  - is a nvarchar

If I can pass those other two values to the window then I can populate the drop down menu and the field with the current values, which is something I need to do.

On the screenshot you will see first one 'record' shows the record in the page. the name and description come from the (mainuserid) and the (description)

But when I open the modal it doesn't show the current selections, it shows just the options available. and no description is displayed and should show the one I have.

How can I pass this info to the window as well ?  

I am already passing the id to a hidden field so I update the correct record, that part works great.
record.PNG
record2.PNG
0
Julian HansenCommented:
You set the data fields in the modal the same way you did to the hidden field. You have to manually populate the fields in the popup - it won't do it for you - so in your calling code you need to do what you have done for the idfield - retrieve the values you need to populate and then set the corresponding field values (by id) in the modal form.
0
AleksAuthor Commented:
I understand that part. But what about the link ?  Do I need to change something there as well ?

This part:

<a href="#myModal" 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

would it be something like:

<a href="#myModal" data-toggle="modal" id="<%=(rs_forms.Fields.Item("id").Value)%>"   mainuserid="<%=(rs_forms.Fields.Item("mainuserid").Value)%>"  fdescription="<%=(rs_forms.Fields.Item("fdescription").Value)%>"  data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>


I assume I need to add two more entries ... not familiar with this code  :$

I tried this but didn't work:

--

<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); // SEND VALUE OF ID TO HIDDEN FIELD ID
    $modal.find('.edit-content').html(esseyId);  
  });
 
  $('#edit-modal').on('show.bs.modal', function(e) {
    var $modal = $(this),
      esseyId2 = e.relatedTarget.beneficiary;
    $('input[name="beneficiary"]', $modal).val(esseyId2); // SEND VALUE OF ID TO HIDDEN FIELD ID
    $modal.find('.edit-content').html(esseyId2);  
  });
 
  $('#edit-modal').on('show.bs.modal', function(e) {
    var $modal = $(this),
      esseyId3 = e.relatedTarget.description;
    $('input[name="description"]', $modal).val(esseyId3); // SEND VALUE OF ID TO HIDDEN FIELD ID
    $modal.find('.edit-content').html(esseyId3);  
  });
});
</script>

--
0
Julian HansenCommented:
Ok lets back up a bit. You are going to need to familiarise yourself with javascript (and jquery) event handlers.

In your code above you have the following code repeated
$('#edit-modal').on('show.bs.modal', function(e) {
...
});

Open in new window

What the repeated code is doing is each time overwriting the content of the modal - so the first one fires sets the id field and loads the modal window - then the next one fires and sets a different field and loads the modal etc.
You only need ONE event handler for an event and you put all your code in there - see sample below.
Next problem - using the id attribute to pass the id is not a good idea. HTML id's cannot start with numbers - rather use the custom data attribute

Example
<a href="#myModal" data-toggle="modal" data-id="786" data-description="description" data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder">OPEN MODAL</i></a>

Open in new window

These can be accessed with the jQuery .data() method (see below). Before you can do this you will need to wrap your e.relatedTarget (which is a standard DOM element) in a jQuery object. You do this like so
$(e.releatedTarget)

Open in new window

You can now use this object to access the jQuery methods.

The code below demonstrates how to retrieve values and pass them to the modal
<script type="text/javascript">
$(function () {
  $('#edit-modal').on('show.bs.modal', function(e) {
    var $modal = $(this),
    // WE RATHER USE THE HTML5 data ATTRIBUTE TO
    // PASS DATA. id's IN HTML CANNOT START WITH NUMBERS
    // SO NOT A GOOD IDEA TO USE THE id ATTRIBUTE. 
    // WE WRAP THE e.relatedTarget IN A JQUERY OBJET 
    // WHICH GIVES US ACCESS TO THE .data() METHOD.
    // WE CAN NOW GET ANY CUSTOM HTML5 data ATTRIBUTE
    esseyId = $(e.relatedTarget).data('id'),
    description = $(e.relatedTarget).data('description');

    // SET YOUR FORM VALUES HERE
    $('input[name="idvalue"]', $modal).val(esseyId);
    $('input[name="description"]', $modal).val(description);
    
    // OTHER ASSIGNMENTS HERE
    $modal.find('.edit-content').html(esseyId);
  })
});
</script>

Open in new window

0
AleksAuthor Commented:
Thanks for the explanation, this is all new to me. I know I need to learn jquery and I just got a subscription to Lynda to have something to start with from scratch. Unfortunately for this one piece of code I have a time constrain :$

Based on the above I changed the code but the modal stopped working all together:

<script type="text/javascript">
$(function () {
  $('#edit-modal').on('show.bs.modal', function(e) {
    var $modal = $(this),
      esseyId = e.relatedTarget.id;
        mainuserid = $(e.relatedTarget).data('mainuserid');
        description = $(e.relatedTarget).data('description');  
    $('input[name="idfield"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
    $('input[name="mainuserid"]', $modal).val(mainuserid); // SEND VALUE OF MAINUSERID
    $('input[name="fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION      
    $modal.find('.edit-content').html(esseyId);  
  });
 
});
</script>

Passing just the idfield before was working just fine. When I added the two new (mainuserid and description) it stopped.
0
Julian HansenCommented:
Can you post your full listing.
0
AleksAuthor Commented:
Sure. Attached is the page.

PS> Some of the errors you see (tags mostly) are because there are include files. I deleted the links to the include files to clean things up.  This time I left the recordsets there.
forms-index.txt
0
Julian HansenCommented:
There are still some fundamental issues with your code that you have not fixed
1. No opening <html> tag
2. Script after the closing </body> and </html> tags
3. Reference to variable fdescription in your jQuery code - when the value you set is description (without the 'f' on the front)
4. Nowhere in your code have you set the data-mainuserid or the data-description attributes

Actions
1. Add your <html> tag after the <!doctype html>
2. Move your scripts inside the closing </body>
3. Add the data-mainuserid and data-description attributes to  the links that open the modal
4. Fix the spelling error on fdescription.

If you do all of the above it will work.
0
AleksAuthor Commented:
1. If I add another <html> tag after <!DOCTYPE html>  I get an error saying its duplicated. So I took that off.

2. I just moved the scripts inside the </body> tag.

3.  I do have the code to pass the data for main user and fdescription, this is it:

<a href="#myModal" data-toggle="modal" id="<%=(rs_forms.Fields.Item("id").Value)%>"   mainuserid="<%=(rs_forms.Fields.Item("mainuserid").Value)%>"  fdescription="<%=(rs_forms.Fields.Item("fdescription").Value)%>"  data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>

Which is the same I used to pass the id in the first place and that worked just fine. I am not sure about the syntax though. If that is how I should pass the values.

4. Fixed

After doing all this the modal comes up. But the fields are not populated with the data I am passing.

Attached the page with all the changes you mentioned. Perhaps the only thing missing is correct syntax on how I pass the values on # 3 ?
forms-index.txt
0
Julian HansenCommented:
<a href="#myModal" data-toggle="modal" id="<%=(rs_forms.Fields.Item("id").Value)%>"   mainuserid="<%=(rs_forms.Fields.Item("mainuserid").Value)%>"  fdescription="<%=(rs_forms.Fields.Item("fdescription").Value)%>"  data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>

Open in new window

No, you can't use the id field - as I mentioned before id cannot start with a number. You need to use the custom data attributes as per the link I sent earlier.

Something like this.
<a href="#myModal" data-toggle="modal" data-id="<%=(rs_forms.Fields.Item("id").Value)%>"  data-mainuserid="<%=(rs_forms.Fields.Item("mainuserid").Value)%>"  data-fdescription="<%=(rs_forms.Fields.Item("fdescription").Value)%>"  data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>

Open in new window


Custom attributes HAVE to be prefixed with data-
0
AleksAuthor Commented:
I used your code and modified the script to match:

<script type="text/javascript">
 $(function () {
   $('#edit-modal').on('show.bs.modal', function(e) {
     var $modal = $(this),
         esseyId = e.relatedTarget.id;
         mainuserid = $(e.relatedTarget).data('data-mainuserid');
         fdescription = $(e.relatedTarget).data('data-fdescription');  
     $('input[name="data-id"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
     $('input[name="data-mainuserid"]', $modal).val(mainuserid); // SEND VALUE OF MAINUSERID
     $('input[name="data-fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION      
     $modal.find('.edit-content').html(esseyId);  
   });
   
 });
 </script>

Still doesn't work  :(

Also changed the modal window to have the same target names:

 <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
       
            <div class="modal-content animated fadeIn">
                     <form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" form="form2">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Edit form</h3><small>Please select the Beneficiary that will fill out the form and update the description.</small>
   
                </div>
                  <div class="panel-body">
                      <div >
                        <div class="ibox float-e-margins">
                          
                        <div class="form-group"><label class="col-sm-2 control-label">Beneficiary</label>
<div class="col-sm-10">
<select class="form-control m-b" id ="datadata-mainuserid" name="datadata-mainuserid">
  <%
While (NOT rs_parties.EOF)
%>
  <option value="<%=(rs_parties.Fields.Item("Userid").Value)%>"><%=(rs_parties.Fields.Item("FirstNm").Value)%>&nbsp;<%=(rs_parties.Fields.Item("MiddleNm").Value)%>&nbsp;<%=(rs_parties.Fields.Item("LastNm").Value)%>&nbsp;(&nbsp;<%=(rs_parties.Fields.Item("Relationship").Value)%>)</option>
  <%
  rs_parties.MoveNext()
Wend
If (rs_parties.CursorType > 0) Then
  rs_parties.MoveFirst
Else
  rs_parties.Requery
End If
%>
</select>
 <input type="hidden"  id = "idfield" name ="idfield" >
 <input name ="caseid" type="hidden"  id = "caseid" value="<%=(rs_case.Fields.Item("id").Value)%>" >
 </div>  </div>
                          
                     
<div class="form-group"><label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10"><input id = "data-fdescription" name ="data-fdescription" type="text" class="form-control" placeholder="Mr. | Ms." value=""></div>
</div>  
                    

                        
                        </div>
                      </div>
                    </div>
               
                <div class="modal-footer">
                      <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                                   <button type="submit" class="btn btn-primary" id = "mdlsave"  name = "mdlsave" >Save changes</button>
                </div>
             </form></div>
           
        </div>
    </div>

---

Error is:

SCRIPT5009: 'data' is undefined
0
Julian HansenCommented:
SCRIPT5009: 'data' is undefined
That says something is wrong with your javascript - either your jQuery library is not being included - which would not make sense because other jQuery dependencies work.
Please do the following (if you can't post a link) - view the page in your browser
View page source
Copy source
Paste here

Your asp source is not that helpful as it includes files that are not available to me and accesses data that is also not available - I need to see the rendered code.
0
AleksAuthor Commented:
jquery is included, the script worked fine when we were just passing one parameter (The id) and we were in factusing 'id'  and it was fine. When I tried to pass two more parameters that's when things stopped working.

I will put a demo page online for you to view. Ill post it in 5 min.
0
Julian HansenCommented:
Page errors
error '80020009'

/bluedot2016/Intranet/Cases/forms_index.asp, line 72 

Open in new window

0
AleksAuthor Commented:
Yeah ... some recorsets filter out with session variables created at login. I can only post the code here which I did above. Here is the complete file. Not sure what else to provide. I can send screenshots if that helps. I think either the code that passes the data or the script are wrong, or the modal window fields. the rest of the page works fine.

Line 241 passes the values for the modal window:

<a href="#myModal" data-toggle="modal" data-id="<%=(rs_forms.Fields.Item("id").Value)%>"  data-mainuserid="<%=(rs_forms.Fields.Item("mainuserid").Value)%>"  data-fdescription="<%=(rs_forms.Fields.Item("fdescription").Value)%>"  data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>

Line 316 is one of the 3 fields I am trying to pass data to:

<div class="col-sm-10"><input id = "data-fdescription" name ="fdescription" type="text" class="form-control" placeholder="Mr. | Ms." value=""></div>

Line 359-373 the script:

<script type="text/javascript">
 $(function () {
   $('#edit-modal').on('show.bs.modal', function(e) {
     var $modal = $(this),
         esseyId = e.relatedTarget.id;
         mainuserid = $(e.relatedTarget).data('data-mainuserid');
         fdescription = $(e.relatedTarget).data('data-fdescription');  
     $('input[name="data-id"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
     $('input[name="data-mainuserid"]', $modal).val(mainuserid); // SEND VALUE OF MAINUSERID
     $('input[name="data-fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION      
     $modal.find('.edit-content').html(esseyId);  
   });
   
 });
 </script>

I believe maybe the syntax in one of those 3 is incorrect and therefore the value is not being passed. Right now none of the values is being passed. Before the id was and it worked fine, once we modified the script to pass 2 more it stopped working.
forms-index.txt
0
Julian HansenCommented:
It is very simple.
Open the page in your browser.
View the page source
Copy the html
Paste it here.
0
Julian HansenCommented:
I believe maybe the syntax in one of those 3 is incorrect and therefore the value is not being passed. Right now none of the values is being passed.
That's because you have a script error somewhere in your code. The sample I provided works so there is nothing wrong with the logic - it is in the implementation. We can look at the bits that were part of the sample forever - it is not telling us where the problem is - we need to see the code in context of what else is on the page.
0
AleksAuthor Commented:
OK. here is the HTML:

I fixed all the items you listed.

----


<!DOCTYPE html>

<!--#BlueDot Include files-->

<!--#BeginBlock-->

<!--#Recordsets include-->
<!--#Current user logged in-->



<!--#Total Admin alert-->


<!--#Total Alerts count-->


<!--#Reminders overdue count-->



<!--#Repeat steps overdue count-->



<!--#Questionnaire view-->


<!--#Questionnaire ALL count-->


<!--#Questionnaire mine count-->


<!--#Questionnaire Questionnairegroupusers-->


<!--#Repeated region-->




<head>
<!--#Bootstrap -->
<link href="../includes/css/bootstrap.min.css" rel="stylesheet">
<link href="../includes/font-awesome/css/font-awesome.css" rel="stylesheet">

<!-- Morris -->
<link href="../includes/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

<!-- Gritter -->
<link href="../includes/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
<link href="../includes/css/animate.css" rel="stylesheet">
<link href="../includes/css/style.css" rel="stylesheet"> 

 
<script type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

		


<script type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>



<script type="text/javascript">
function WAAddError(formElement,errorMsg,focusIt,stopIt)  {
  if (document.WAFV_Error)  {
	  document.WAFV_Error += "\n" + errorMsg;
  }
  else  {
    document.WAFV_Error = errorMsg;
  }
  if (!document.WAFV_InvalidArray)  {
    document.WAFV_InvalidArray = new Array();
  }
  document.WAFV_InvalidArray[document.WAFV_InvalidArray.length] = formElement;
  if (focusIt && !document.WAFV_Focus)  {
	document.WAFV_Focus = focusIt;
  }

  if (stopIt == 1)  {
	document.WAFV_Stop = true;
  }
  else if (stopIt == 2)  {
	formElement.WAFV_Continue = true;
  }
  else if (stopIt == 3)  {
	formElement.WAFV_Stop = true;
	formElement.WAFV_Continue = false;
  }
}
</script>

<script type="text/javascript">

function makeLowercase() {
document.form1.outstring.value = document.form1.instring.value.toLowerCase();
}


//-->
</script>


<link href="../includes/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<script src="../includes/jquery/jquery-2.1.4.min.js"></script>
</head>

<!--#Body-->
<!--#Body-->
<body>
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">

<!--#Left menu-->        
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
          <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                  <div class="dropdown profile-element"><img src="../../imgs/BlueDot_logo_transp.png" class="img-responsive" alt="Placeholder image"></div>
                  <div class="logo-element">
                      BlueDot
                  </div>
                </li>
                <li >
                    <a href="../default.asp"><i class="fa fa-dashboard"></i> <span class="nav-label">Dashboard</span></a>
                    
                </li>
                
                             <li class="active">
                        <a href="#"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">Files</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li>
                                <a href="#">Questionnaire<span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="../qnr/IndexNewcontact.asp">New contact</a>
                                    </li>
                                    <li>
                                        <a href="../qnr/EmailQnrexistingsearch.asp">Existing contact</a>
                                    </li>
								</ul>
                            </li>
						<li ><a href="../contacts/searchviewsearchcontacts.asp">Contacts</a></li>
                        <li class="active"><a href="../cases/searchviewsearchcases.asp">Cases</a></li>
                        <li><a href="../employers/searchviewsearchemployers.asp">Employers</a></li>
                        <li><a href="../billing/index.asp">Billing</a></li>
                        <li><a href="../RegionalCenters/Index.asp">Regional Centers</a></li>
                        <li><a href="../Agents/Index.asp">Agents</a></li>
                        </ul>
                    </li>
                    
                    <li>
                        <a href="#"><i class="fa fa-envelope"></i> <span class="nav-label">Messages</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
   						<li><a href="../inbox/index.asp">Inbox</a></li>
                        <li><a href="../inbox/outbox.asp">Outbox</a></li>
                        </ul>
                    </li>
				 <li>
                        <a href="#"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">Reports</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li>
                                <a href="#">Basic<span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="../reports/basic_contacts_index.asp">Contacts</a>
                                    </li>
                                    <li>
                                        <a href="../reports/basic_cases_index.asp">Cases</a>
                                    </li>
                                    <li>
                                        <a href="../reports/basic_employers_index.asp">Employers</a>
                                    </li>
                                    <li>
                                        <a href="../reports/basic_billing_index.asp">Billing</a>
                                    </li>

                                </ul>
                            </li>
							<li><a href="../reports/Indexbyuser.asp">Advanced</a></li>
                        </ul>
                    </li>
                    
                    
                
                   <li>
                    <a href="#"><i class="fa fa-wrench"></i> <span class="nav-label">Tools</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="../Tools/blankforms.asp">Blank forms</a></li>
                        <li><a href="../Tools/relatedlinks.asp">Useful links</a></li>
                        <li><a href="../Calendar/index.asp">Calendar</a></li>
                        <li><a href="../RCContent/IndexRC.asp">Resource Center</a></li>
                    </ul>
                </li>
               
                <li>
                    <a href="#"><i class="fa fa-male"></i> <span class="nav-label">User Settings</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                    
                        <li ><a href="../Tools/index.asp">User preferences</a></li>
                        <li><a href="../updatepassword.asp">Change password</a></li>
                    </ul>
                </li>
                
                 <li>
                    <a href="#"><i class="fa fa-support"></i> <span class="nav-label">Support</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="javascript:;" onClick="GP_AdvOpenWindow('https://bluedotcloud.zendesk.com/hc/en-us','BlueDot','fullscreen=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,channelmode=no,directories=no',1280,768,'center','ignoreLink','alwaysOnTop',0,'',0,1,5,'');return document.MM_returnValue">Help center</a></li>
                        <li><a href="javascript:;" onClick="GP_AdvOpenWindow('https://www.bluedotcloud.com/BDotBT/index.html','BlueDot','fullscreen=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,channelmode=no,directories=no',1280,768,'center','ignoreLink','alwaysOnTop',0,'',0,1,5,'');return document.MM_returnValue">Basic Training</a></li>
                  
                    </ul>
                </li>
              

          </ul>
          </div>
 </nav>       
</div>
</nav>

<div id="page-wrapper" class="gray-bg">
	<div class="row border-bottom">
   
        
<!-- Top bar -->
<!--#Navigation bar-->
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
         
        </div>
            <ul class="nav navbar-top-links navbar-right">
               
                <li>
                  <span class="m-r-sm text-muted welcome-message">Welcome Ann&nbsp;Jones</span>
                </li>
                
<!--#Modal window code-->                 
                
                <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog">
                                <div class="modal-content animated bounceInRight">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                            <i class="fa fa-laptop modal-icon"></i>
                                            <h4 class="modal-title">BlueDot Major Upgrade</h4>
                                            <small class="font-bold">Posted on: 6/29/2015</small>
                                        </div>
                                        <div class="modal-body">
                                            <p>Dynamic content goes here: This is the message about BlueDot's major upgradeDynamic content goes here: This is the message about BlueDot's major upgradeDynamic content goes here: This is the message about BlueDot's major upgradeDynamic content goes here: This is the message about BlueDot's major upgradeDynamic content goes here: This is the message about BlueDot's major upgradeDynamic content goes here: This is the message about BlueDot's major upgradeDynamic content goes here: This is the message about BlueDot's major upgrade</p>
                                                    <div class="form-group"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
   <!--#Modal window code end-->                          
   <!--#BlueDot announcement icon code-->
                            
					 <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                        <i class="fa fa-rss"></i>  
                        <span class="label label-warning">
                      1
                      </span>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-envelope" data-toggle="modal" data-target="#myModal" >&nbsp;&nbsp;BlueDot Major Upgrade</i>  
                                </div>
                            </a>
                        </li>
                    </ul>
                </li>
                
   <!--#Inbox icon code-->
                
                <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                        <i class="fa fa-envelope"></i> 
						<span class="label label-warning">
							2<br/>
                     		
                        </span>
                   </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="../inbox/index.asp">
  							<div>
                                    <i class="fa fa-envelope fa-fw"></i> You have 
									2<br/>
                     			    items in your inbox
                                </div>
                            </a>
                        </li>
                    </ul>
                </li>
                
 <!--#Alerts icon code-->

                <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                       <i class="fa fa-bell"></i>  <span class="label label-danger">108</span>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                       
                        <li>
                            <a href="../remindersoverdue.asp">
                                <div>
                                    <i class="fa fa-bell fa-fw"></i> You have 20 overdue reminders
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="../stepsoverdue.asp">
                                <div>
                                    <i class="fa fa-bell fa-fw"></i> You have 88 overdue process steps
                                </div>
                            </a>
                        </li>
                            
                    </ul>
                </li>


                <li>
                    <a href="../../signout.asp">
                        <i class="fa fa-sign-out"></i> Log out
                    </a>
                </li>
                <li>
                    <a class="right-sidebar-toggle">
                        <i class="fa fa-tasks"></i>
                    </a>
                </li>
            </ul>

        </nav>
	
	</div>

<!-- Breadcrumbs navigation -->       
<div class="row wrapper border-bottom white-bg page-heading">
	<div class="col-lg-10">
		<h2>Cases</h2>
			<ol class="breadcrumb">
				<li><a href="../default.asp">Home</a></li>
				<li >Files</li>
                <li class="active"><strong><a href="SearchViewsearchcases.asp">Cases</a></strong></li>
                 <li class="active"><strong><a href="../Contacts/personal_general.asp?NewUserId=30638" target="_blank">Alejandro&nbsp;Carlos&nbsp;Mucino</a></strong></li>
                <li >H1B Visa Process</li>
                <li class="active">DEMO for Forms</li>
			</ol>
	</div>
</div>
<!-- Breadcrumbs navigation end -->
 
<!-- Navigation bar -->

<nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
       
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">General Information <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li ><a href="general_basic_index.asp?caseid=11106">Basic information</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="general_notices_index.asp?caseid=11106">Notices</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="general_shipping_index.asp?caseid=11106">Shipping</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="general_billing_index.asp?caseid=11106">Billing</a></li>
                </ul>
              </li>
				<li><a href="links_index.asp?caseid=11106">Links</a></li>
              <li class="active"><a href="forms_index.asp?caseid=11106">Forms</a></li>
              <li><a href="notes_index.asp?caseid=11106">Notes</a></li>
              <li><a href="reminders_index.asp?caseid=11106">Reminders</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Documents<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="checklist_index.asp?caseid=11106">Checklist</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="ltrmerge_index.asp?caseid=11106">Letter Merge</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="attachments_index.asp?caseid=11106">Attachments</a></li>
                </ul>
              </li>
              <li><a href="steps_index.asp?caseid=11106">Steps</a></li>
              <li><a href="log_index.asp?caseid=11106">Log</a></li>
            </ul>

          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
  </nav>
    
 <!-- Navigation bar end-->   
<!-- Main content left-->
<form name="form1" action="" method="POST" class="form-horizontal" id="form1">
	<div class="wrapper wrapper-content animated fadeIn" style="animation-delay: 0.4s;">
    	<div class="row">
    	  <div class="col-lg-12">
    	    <div class="ibox float-e-margins">
    	      <div class="ibox-title">
    	        <h5>Forms</h5>
    	        <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="close-link"> <i class="fa fa-times"></i> </a> </div>
  	        </div>
            <div class="ibox-content">
            <a href="forms_add.asp?caseid=11106" class="btn btn-primary">Add form</a>
             </div>           
    	      <div class="ibox-content">
    	        <table class="table table-hover">
    	          <thead>
    	            <tr>
    	              <th>Actions</th>
    	              <th>Beneficiary</th>
    	              <th>Form</th>
    	              <th>Description</th>
   	                </tr>
  	            </thead>
    	          <tbody>
                    
                      <tr>
                        <td>
                        
                        <a href="javascript:;" onClick="MM_openBrWindow('forms_bridgecall.asp?caseid=11106&amp;userid=30638&amp;Activityid=954&amp;qid=41258&amp;Blobid=','BlueForm','scrollbars=yes,resizable=yes,width=1000,height=800')"><i class=" btn btn-white btn-sm fa fa-eye"></i></a>&nbsp;<a href="#myModal" data-toggle="modal" data-id="954"  data-mainuserid="30638"  data-fdescription="CONTACT INFORMATION  [3/26/2010]"  data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>&nbsp;<a href="forms_SPdelete.asp?formcaseid=954&caseid=11106&blobid=" class="btn btn-white btn-sm1" id="954" > <i class="fa fa-trash-o" ></i></a>
                        
                        </td>
                        
                        <td>Alejandro&nbsp;Mucino</td>
                        <td>CONTACT</td>
                        <td>CONTACT INFORMATION  [3/26/2010]</td>
                      </tr>
                      
                      <tr>
                        <td>
                        
                        <a href="javascript:;" onClick="MM_openBrWindow('forms_bridgecall.asp?caseid=11106&amp;userid=30638&amp;Activityid=955&amp;qid=41257&amp;Blobid=25','BlueForm','scrollbars=yes,resizable=yes,width=1000,height=800')"><i class=" btn btn-white btn-sm fa fa-eye"></i></a>&nbsp;<a href="#myModal" data-toggle="modal" data-id="955"  data-mainuserid="30638"  data-fdescription="EMPLOYER INFORMATION  []"  data-target="#edit-modal"><i class="btn btn-white btn-sm fa fa-folder"></i></a>&nbsp;<a href="forms_SPdelete.asp?formcaseid=955&caseid=11106&blobid=25" class="btn btn-white btn-sm1" id="955" > <i class="fa fa-trash-o" ></i></a>
                        
                        </td>
                        
                        <td>Alejandro&nbsp;Mucino</td>
                        <td>EMPLOYER</td>
                        <td>EMPLOYER INFORMATION  []</td>
                      </tr>
                      
                  </tbody>
  	          </table>
			</div>
  	      </div>
  	    </div>
     
		</div>
	</div>
</form>
<!-- footer -->
<div class="footer">
	<div class="pull-right"><a href="../../TermsofService.asp" target="new">Terms and Conditions</a> | <a href="../../PrivacyPolicy.asp" target="_blank">Privacy Policy</a></div>
    <div><strong>Copyright</strong> BlueDot &copy; 2015</div>
</div>


</div>
            
<!-- sidebar -->
<div id="right-sidebar">
<div class="sidebar-container">
<div class="tab-content">
	<div id="tab-1" class="tab-pane active">
		<div>
			<div class="sidebar-message">
				<div class="pull-left text-center"></div>
				<div class="media-body">This panel will be used in the near future and will include shotcuts to your favorite actions.</div>
			</div>
		</div>
	</div>
</div>
</div>
</div>




    <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        
            <div class="modal-content animated fadeIn">
 			  <form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" form="form2">
 			 <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Edit form</h3><small>Please select the Beneficiary that will fill out the form and update the description.</small>
    
                </div>
                  <div class="panel-body">
    	            <div >
    	              <div class="ibox float-e-margins">
    	                
                        <div class="form-group"><label class="col-sm-2 control-label">Beneficiary</label>
<div class="col-sm-10">
<select class="form-control m-b" id ="mainuserid" name="mainuserid">
  
  <option value="30618">Jorge&nbsp;C.&nbsp;Mucino&nbsp;(&nbsp;Son)</option>
  
  <option value="30574">Ana Sofia&nbsp;R.&nbsp;Mucino&nbsp;(&nbsp;Daughter)</option>
  
  <option value="31053">Patricia&nbsp;MiddleNm&nbsp;Mucino&nbsp;(&nbsp;Spouse)</option>
  
  <option value="30710">Sergio&nbsp;&nbsp;Mucino&nbsp;(&nbsp;Father)</option>
  
  <option value="31227">Angelica&nbsp;&nbsp;Mucino&nbsp;(&nbsp;Mother)</option>
  
  <option value="30638">Alejandro&nbsp;Carlos&nbsp;Mucino&nbsp;(&nbsp;Main Contact)</option>
  
</select>
 <input type="hidden"  id = "idfield" name ="idfield" >
 <input name ="caseid" type="hidden"  id = "caseid" value="11106" >
 </div>  </div>
    	                 
                      
<div class="form-group"><label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10"><input id = "data-fdescription" name ="fdescription" type="text" class="form-control" placeholder="Mr. | Ms." value=""></div>
</div>   
    	           

  	                 
  	                </div>
  	              </div>
  	            </div>
               
                <div class="modal-footer">
                      <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
     					<button type="submit" class="btn btn-primary" id = "mdlsave"  name = "mdlsave" >Save changes</button>
                </div>
             </form></div>
           
        </div>
    </div>
<!-- Bootstrap scripts --> 
<!-- Mainly scripts -->
    <script src="../includes/js/jquery-2.1.1.js"></script>
    <script src="../includes/js/bootstrap.min.js"></script>
    <script src="../includes/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="../includes/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    
  <!-- Custom and plugin javascript -->
    <script src="../includes/js/inspinia.js"></script>
    <script src="../includes/js/plugins/pace/pace.min.js"></script>      
<script src="../includes/formvalidation/dist/js/formValidation.min.js"></script>
<script src="../includes/formvalidation/dist/js/framework/bootstrap.min.js"></script>
<script src="../includes/js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
 $('a.btn-white.btn-sm1').click(function(e) { 
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    warnBeforeRedirect(linkURL);
  });

  function warnBeforeRedirect(linkURL) {
    swal({
      title: "Are you sure?", 
      text: "Please confirm you wish to delete this record", 
      type: "warning",
	  confirmButtonColor: "#DD6B55",
      showCancelButton: true,
    }, function() {
      // Redirect the user
      window.location.href = linkURL;
    });
  }
  </script>
  
<script type="text/javascript">
 $(function () {
   $('#edit-modal').on('show.bs.modal', function(e) {
     var $modal = $(this),
         esseyId = e.relatedTarget.id;
         mainuserid = $(e.relatedTarget).data('data-mainuserid');
         fdescription = $(e.relatedTarget).data('data-fdescription');  
     $('input[name="data-id"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
     $('input[name="data-mainuserid"]', $modal).val(mainuserid); // SEND VALUE OF MAINUSERID
     $('input[name="data-fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION      
     $modal.find('.edit-content').html(esseyId);  
   });
   
 });
 </script>
</body>
</html>

<!-- Recordset include close -->

Open in new window

0
AleksAuthor Commented:
This is the only error I get. Its because of one of the included files. Still to figure out which one. But other than that the page works just fine and when passing just the ID before that was working fine. It was when we added more that the code broke.
error.PNG
0
Julian HansenCommented:
Firstly, please use code tags - makes it much easier to work with code listings. I added them for you in the last post.

Secondly, some issues on your page

1. Still no <html> tag ...
2. You are including the jQuery library twice - version 2.1.4 in the head and 2.1.1 at the bottom of the document. Pick one and pick a spot to include it. My preference is at the bottom.
3. There are validation errors which you might want to look at as well.

Then onto the coding errors. A few posts back I posted a link to information on both the HTML5 custom data attribute
http://www.w3schools.com/tags/att_global_data.asp
And the jQuery .data method
http://api.jquery.com/data/

Please take the time to read through and understand these as it is critical to you being able to solve your problem.

In HTML5 you can declare custom data attributes on an element by prefixing the name of your attribute with the string 'data-'.  

Example
If you want to create a custom attribute ID then your attribute name will be data-ID. The word data and the - (hyphen) that follows it (Without spaces) is IMPORTANT - however - your attribute is still called ID. data- is just a way of distinguishing your attribute from the default attributes that exist.

When retrieving the custom value with jQuery you use the .data() method. You retrieve the value of the custom attribute you want to retrieve by passing the attribute name to the function. As mentioned above the attribute name is the bit that comes AFTER the data- bit. So in our example above if you want the value of the custom ID attribute - which is represented as data-ID in the element you would do as follows
var val = $('element').data('ID');

Open in new window

Note we do not pass data-ID to the function - only the name part.

In your code you are passing the full attribute name. The .data() method looks for all attributes that start with data- and attempts to match the one that has the same suffix as the parameter you pass to the method.

The second mistake was as follows
$('input[name="data-id"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
$('input[name="data-mainuserid"]', $modal).val(mainuserid); // SEND VALUE OF MAINUSERID
$('input[name="data-fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION

Open in new window

There is no relationship between the data attributes and the name of the control. In your code the controls are named 'id', 'mainuserid' and 'fdescription' so you need to use those names in your jQuery above
$('input[name="id"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
$('input[name="mainuserid"]', $modal).val(mainuserid); // SEND VALUE OF MAINUSERID
$('input[name="fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION

Open in new window

That sorts out the setting of your values (mostly).
You are setting the ID field but there is no field with the name ID - only a field with name idfield (a hidden field which is the one I assume you meant). You therefore need to change the code so those two match - above I have changed the jQuery to access idfield.

I have posted a link to a new sample below that takes your code and fixes the above - you will see it works as it should. I made one small change - so that each of the records has a different person - to show the setting of the drop down works.

http://www.marcorpsa.com/ee/t962d.html
0
AleksAuthor Commented:
I used your code and ... now the mainuserid and the fdescription work fine. BUT the id stopped working :$

This is the link that passes the value:
data-id="<%=(rs_forms.Fields.Item("id").Value)%>"

Open in new window

This is the hidden field that captures the value:
 <input type="hidden"  id = "idfield" name ="idfield" >

Open in new window


And this is the script:
<script type="text/javascript">
 $(function () {
   $('#edit-modal').on('show.bs.modal', function(e) {
     var $modal = $(this),
         esseyId = e.relatedTarget.id;
         mainuserid = $(e.relatedTarget).data('mainuserid');
         fdescription = $(e.relatedTarget).data('fdescription');  
		 
     $('input[name="idfield"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
console.log('[' + mainuserid + ']');
	$('#mainuserid').val(mainuserid);
//    $('#mainuserid').val(mainuserid); // SEND VALUE OF MAINUSERID
//     $('#mainuserid option[value="'+ mainuserid +'"]', $modal).prop('selected', true); // SEND VALUE OF MAINUSERID
     $('input[name="fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION      
     $modal.find('.edit-content').html(esseyId);  
   });
   
 });
 </script>

Open in new window

I get the mainuserid and the fdescription but not the idfield value, that one is blank.
0
Julian HansenCommented:
Code tags .... please?

The problem is here (Line 5 of the last code snippet)
 esseyId = e.relatedTarget.id;

Open in new window

Should be
 esseyId = $(e.relatedTarget).data('id');

Open in new window


Refer my earlier post on how the data method works. data-id is storing the value so you need to use the .data() method to retrieve it - whereas in your code you are accessing it through the id attribute.

Try this code
<script type="text/javascript">
 $(function () {
   $('#edit-modal').on('show.bs.modal', function(e) {
     var $modal = $(this),
         esseyId = $(e.relatedTarget).data('id'),
         mainuserid = $(e.relatedTarget).data('mainuserid'),
         fdescription = $(e.relatedTarget).data('fdescription');  
     
     $('input[name="idfield"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
     $('input[name="mainuserid"]', $modal).val(mainuserid); // SEND VALUE OF MAINUSERID
     $('input[name="fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION      
   
     $modal.find('.edit-content').html(esseyId);  
   });
 });
 </script>

Open in new window


Sample updated
0

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:
Sorry I am unaware of which are the code tags. It seemed to have worked this time. Ill try to replicate on another page. Thanks for your patience.
Next week Ill have more time to go over the links you sent me.
0
Julian HansenCommented:
You are welcome. Glad you got sorted.

In future - code tags are put in place by highlighting your code in the comment window and clicking the Code Link in the options above.
Screenshot
0
AleksAuthor Commented:
Ah ... gotcha. That makes sense. Ill do that next time ... like this.

<script type="text/javascript">
 $(function () {
   $('#edit-modal').on('show.bs.modal', function(e) {
     var $modal = $(this),
         esseyId = $(e.relatedTarget).data('id'),
         mainuserid = $(e.relatedTarget).data('mainuserid'),
         fdescription = $(e.relatedTarget).data('fdescription');  
     
     $('input[name="idfield"]', $modal).val(esseyId); // SEND VALUE OF ID TO HIDDEN FIELD ID
     $('input[name="mainuserid"]', $modal).val(mainuserid); // SEND VALUE OF MAINUSERID
     $('input[name="fdescription"]', $modal).val(fdescription); // SEND VALUE OF DESCRIPTION      
   
     $modal.find('.edit-content').html(esseyId);  
   });
 });
 </script>

Open in new window

0
Julian HansenCommented:
Perfect. :)
1
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
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.