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
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
ASKER
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("formcas
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
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("formcas
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
ASKER
I tried this but does not pass the parameter to the modal window.
<a href="#myModalformcaseid=<
<a href="#myModalformcaseid=<
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
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)
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)
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.
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>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">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);
})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.
ASKER
Ok .. let me take a step at the time. I just named the form 'form2'
Ill try the code above see if it works.
Ill try the code above see if it works.
ASKER
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("formcas
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.
var $modal = $(this),
esseyId = e.relatedTarget.id;
$modal.find('.edit-content
})
$('#edit-modal').on('show.
var $modal = $(this),
esseyId = e.relatedTarget.id;
$('input[name="idfield"]',
$modal.find('.edit-content
})
</script>
It still doesn't show the ID number in the field : $
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("formcas
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.
var $modal = $(this),
esseyId = e.relatedTarget.id;
$modal.find('.edit-content
})
$('#edit-modal').on('show.
var $modal = $(this),
esseyId = e.relatedTarget.id;
$('input[name="idfield"]',
$modal.find('.edit-content
})
</script>
It still doesn't show the ID number in the field : $
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.
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>ASKER
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
code.PNG
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?
Have you tested the sample?
ASKER
Let me just attach the whole page. I removed the connections and recordsets, the rest is there.
page.txt
page.txt
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)%> <%=(rs_case.Fields.Item("MiddleNm").Value)%> <%=(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)%>&userid=<%=(rs_forms.Fields.Item("mainuserid").Value)%>&Activityid=<%=(rs_forms.Fields.Item("id").Value)%>&qid=<%=(rs_forms.Fields.Item("qid").Value)%>&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> <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> <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)%> <%=(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">×</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>ASKER
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
parameter.PNG
ASKER
Any clues on why the parameter is not making it to the form element ?
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
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.
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" ... />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.
ASKER
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 ..
Ill test the code you have and get back to you. Thanks for taking the time ..
ASKER
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 :)
ASKER
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
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
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.
ASKER
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.It
would it be something like:
<a href="#myModal" data-toggle="modal" id="<%=(rs_forms.Fields.It
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.
var $modal = $(this),
esseyId = e.relatedTarget.id;
$('input[name="idfield"]',
$modal.find('.edit-content
});
$('#edit-modal').on('show.
var $modal = $(this),
esseyId2 = e.relatedTarget.beneficiar
$('input[name="beneficiary
$modal.find('.edit-content
});
$('#edit-modal').on('show.
var $modal = $(this),
esseyId3 = e.relatedTarget.descriptio
$('input[name="description
$modal.find('.edit-content
});
});
</script>
--
This part:
<a href="#myModal" data-toggle="modal" id="<%=(rs_forms.Fields.It
would it be something like:
<a href="#myModal" data-toggle="modal" id="<%=(rs_forms.Fields.It
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.
var $modal = $(this),
esseyId = e.relatedTarget.id;
$('input[name="idfield"]',
$modal.find('.edit-content
});
$('#edit-modal').on('show.
var $modal = $(this),
esseyId2 = e.relatedTarget.beneficiar
$('input[name="beneficiary
$modal.find('.edit-content
});
$('#edit-modal').on('show.
var $modal = $(this),
esseyId3 = e.relatedTarget.descriptio
$('input[name="description
$modal.find('.edit-content
});
});
</script>
--
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
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
The code below demonstrates how to retrieve values and pass them to the modal
In your code above you have the following code repeated
$('#edit-modal').on('show.bs.modal', function(e) {
...
});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>$(e.releatedTarget)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>ASKER
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.
var $modal = $(this),
esseyId = e.relatedTarget.id;
mainuserid = $(e.relatedTarget).data('m
description = $(e.relatedTarget).data('d
$('input[name="idfield"]',
$('input[name="mainuserid"
$('input[name="fdescriptio
$modal.find('.edit-content
});
});
</script>
Passing just the idfield before was working just fine. When I added the two new (mainuserid and description) it stopped.
Based on the above I changed the code but the modal stopped working all together:
<script type="text/javascript">
$(function () {
$('#edit-modal').on('show.
var $modal = $(this),
esseyId = e.relatedTarget.id;
mainuserid = $(e.relatedTarget).data('m
description = $(e.relatedTarget).data('d
$('input[name="idfield"]',
$('input[name="mainuserid"
$('input[name="fdescriptio
$modal.find('.edit-content
});
});
</script>
Passing just the idfield before was working just fine. When I added the two new (mainuserid and description) it stopped.
Can you post your full listing.
ASKER
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
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
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.
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.
ASKER
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.It
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
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.It
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
<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>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>Custom attributes HAVE to be prefixed with data-
ASKER
I used your code and modified the script to match:
<script type="text/javascript">
$(function () {
$('#edit-modal').on('show.
var $modal = $(this),
esseyId = e.relatedTarget.id;
mainuserid = $(e.relatedTarget).data('d
fdescription = $(e.relatedTarget).data('d
$('input[name="data-id"]',
$('input[name="data-mainus
$('input[name="data-fdescr
$modal.find('.edit-content
});
});
</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="myModalLa
<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">×
<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
<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.Fiel
<%
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.
</div> </div>
<div class="form-group"><label class="col-sm-2 control-label">Description
<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 type="submit" class="btn btn-primary" id = "mdlsave" name = "mdlsave" >Save changes</button>
</div>
</form></div>
</div>
</div>
---
Error is:
SCRIPT5009: 'data' is undefined
<script type="text/javascript">
$(function () {
$('#edit-modal').on('show.
var $modal = $(this),
esseyId = e.relatedTarget.id;
mainuserid = $(e.relatedTarget).data('d
fdescription = $(e.relatedTarget).data('d
$('input[name="data-id"]',
$('input[name="data-mainus
$('input[name="data-fdescr
$modal.find('.edit-content
});
});
</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="myModalLa
<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">×
<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
<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.Fiel
<%
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.
</div> </div>
<div class="form-group"><label class="col-sm-2 control-label">Description
<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 type="submit" class="btn btn-primary" id = "mdlsave" name = "mdlsave" >Save changes</button>
</div>
</form></div>
</div>
</div>
---
Error is:
SCRIPT5009: 'data' is undefined
SCRIPT5009: 'data' is undefinedThat 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.
ASKER
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.
I will put a demo page online for you to view. Ill post it in 5 min.
ASKER
Page errors
error '80020009'
/bluedot2016/Intranet/Cases/forms_index.asp, line 72 ASKER
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.Fiel
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.
var $modal = $(this),
esseyId = e.relatedTarget.id;
mainuserid = $(e.relatedTarget).data('d
fdescription = $(e.relatedTarget).data('d
$('input[name="data-id"]',
$('input[name="data-mainus
$('input[name="data-fdescr
$modal.find('.edit-content
});
});
</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
Line 241 passes the values for the modal window:
<a href="#myModal" data-toggle="modal" data-id="<%=(rs_forms.Fiel
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.
var $modal = $(this),
esseyId = e.relatedTarget.id;
mainuserid = $(e.relatedTarget).data('d
fdescription = $(e.relatedTarget).data('d
$('input[name="data-id"]',
$('input[name="data-mainus
$('input[name="data-fdescr
$modal.find('.edit-content
});
});
</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
It is very simple.
Open the page in your browser.
View the page source
Copy the html
Paste it here.
Open the page in your browser.
View the page source
Copy the html
Paste it here.
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.
ASKER
OK. here is the HTML:
I fixed all the items you listed.
----
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 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">×</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" > 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 Carlos 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&userid=30638&Activityid=954&qid=41258&Blobid=','BlueForm','scrollbars=yes,resizable=yes,width=1000,height=800')"><i class=" btn btn-white btn-sm fa fa-eye"></i></a> <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> <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 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&userid=30638&Activityid=955&qid=41257&Blobid=25','BlueForm','scrollbars=yes,resizable=yes,width=1000,height=800')"><i class=" btn btn-white btn-sm fa fa-eye"></i></a> <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> <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 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 © 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">×</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 C. Mucino ( Son)</option>
<option value="30574">Ana Sofia R. Mucino ( Daughter)</option>
<option value="31053">Patricia MiddleNm Mucino ( Spouse)</option>
<option value="30710">Sergio Mucino ( Father)</option>
<option value="31227">Angelica Mucino ( Mother)</option>
<option value="30638">Alejandro Carlos Mucino ( 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 -->ASKER
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
error.PNG
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
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
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
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');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$('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 DESCRIPTIONYou 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
ASKER
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:
And this is the script:
This is the link that passes the value:
data-id="<%=(rs_forms.Fields.Item("id").Value)%>" <input type="hidden" id = "idfield" name ="idfield" >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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
Next week Ill have more time to go over the links you sent me.
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.
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.
ASKER
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>
Perfect. :)
This is server side code
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.