Combining multiple jQuery and JS functions
I apologize for such lengthy post, but I couldn't trim it down. I am new to jQuery and need some help.
I have a grid that I am populating dynamically. It consists of simple rows of data that I would like to expand with more details about that particular row through jQuery, edit the data, submit it using jQuery .serialize, close that expanded row and flash highlight the row that was just updated.
So the desired chain of events is:
When a row is clicked:
1. Call loadContent wich would in-turn show the "loading" message, then load the sub-layer with remotely loaded form1.asp data.
2. If the date field is clicked within the loaded (form1.asp) sub-layer , call the jQuery datepicker function.
3. When the Submit button is clicked, serialize the form data and pass it on to form1update.asp (not part of the current script as of right now).
4. If success, Close the opened sub-layer and flash highlight the parent row (
http://docs.jquery.com/UI/Effects/Highlight
).
Additionally, I'd like to know if there is a better way to load that content DIV than placing an empty one within each row. Could this be done through jQuery append or some other function?
Each row contains basic non-editable data and when it is clicked, it "slides" down another layer that contains an editable form with additional informatoin. The form is loaded from an external page (in a sub-folder) for each row (upong clicking on the row).
What I have so far is poorly written, incomplete jQuery/JS with the most basic HTML/CSS. I know there has to be a better way of writing this and I need some help.
The complete code is included, but here is some more info to help you understand the problem better:
There is a page called grid1.asp. This page consists of DIV rows with id="row1", "...row2", etc. Each row also contains an empty DIV inside of it which is then loaded with the form1.asp data through AJAX. The form1.asp page dynamically loads the form data depending on which row is calling it. The function is called loadContent(elementSelector, sourceUrl) that tells AJAX which page to load. The elementSelector and sourceUrl values are passed to it from each row through onclick="loadContent('#row1cont', 'forms/form1.asp?idrow=1');".
Within form1.asp there is a datepicker field that I would like to pull up for every row and I have only been able to do it by including the jQuery script within the form1.asp page and assigning an ID to it through ASP.
-
$(function() {
$("#datepicker<% =row %>").datepicker();
});
I am having the same issue with the .serialize function (i.e. I can only get it to work by including it on the form1.asp page with ASP encoded row number) and right now it looks like this (for now I'm just displaying it on page for testing purposes):
-
function showValues() {
var str = $("form#frm<% =row %>").serialize();
$("#results<% =row %>").text(str);
}
$("#FSubmit<% =row %>").click(showValues);
Thanks in advance!
Here is the actual code:
-
----------[ BEGIN GRID1.ASP ]----------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test Grid 1</title>
<link type="text/css" href="../../~lib/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../../~lib/jq/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../~lib/jq/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
});
</script>
<script>
function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").slideToggle("fast");
$(""+elementSelector+"").html('Loading...');
$.ajax({
url: sourceUrl,
type: 'get',
dataType: 'html',
cache: false,
success: function(data) {
$(""+elementSelector+"").empty().html(data);
}
});
}
</script>
<style>
.row {
width:100%;
border: 1px solid gray;
clear:both;
overflow:auto;
margin-top: -1px;
}
.rowcont {
width: 100%;
display: none;
position: relative;
margin: 0px;
background: lightyellow;
float:left;
}
</style>
</head>
<body>
<div id="row1" class="row"><a href="#" onclick="loadContent('#row1cont', 'forms/form1.asp?idrow=1');" rel="nofollow">Test</a> res row 1<div id="row1cont" class="rowcont"></div></div>
<div id="row2" class="row"><a href="#" onclick="loadContent('#row2cont', 'forms/form1.asp?idrow=2');" rel="nofollow">Test</a> res row 2<div id="row2cont" class="rowcont"></div></div>
<div id="row3" class="row"><a href="#" onclick="loadContent('#row3cont', 'forms/form1.asp?idrow=3');" rel="nofollow">Test</a> res row 3<div id="row3cont" class="rowcont"></div></div>
<div id="row4" class="row"><a href="#" onclick="loadContent('#row4cont', 'forms/form1.asp?idrow=4');" rel="nofollow">Test</a> res row 4<div id="row4cont" class="rowcont"></div></div>
</body>
</html>
----------[ END GRID1.ASP ]----------
----------[ BEGIN FORM1.ASP ]----------
<% row = Request.QueryString("idrow") %>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#datepicker<% =row %>").datepicker();
});
function showValues() {
var str = $("form#frm<% =row %>").serialize();
$("#results<% =row %>").text(str);
}
$("#FSubmit<% =row %>").click(showValues);
$("#FClose<% =row %>").click(closeMe);
function closeMe() {
$("#row<% =row %>cont").slideToggle("fast");
}
});
</script>
<form id="frm<% =row %>">
<table border="0" width="100%" cellspacing="0" cellpadding="3" id="table1">
<tr>
<td width="20%">Date</td>
<td width="20%">Time</td>
<td width="20%">First Combo</td>
<td width="20%">Second Combo</td>
<td width="20%">Third Combo</td>
</tr>
<tr>
<td width="20%"><input type="text" name="Date" size="10" id="datepicker<% =row %>"></td>
<td width="20%"><input type="text" name="Time" size="10"></td>
<td width="20%"><select size="1" name="combo1">
<% For d=1 to 40 %>
<option value="<% =d %>">Value <% =d %></option>
<% Next %>
</select></td>
<td width="20%"><select size="1" name="combo2">
<% For c=1 to 60 %>
<option value="<% =c %>">Value <% =c %></option>
<% Next %>
</select></td>
<td width="20%"><select size="1" name="combo3">
<% For v=1 to 15 %>
<option value="<% =v %>">Value <% =v %></option>
<% Next %>
</select></td>
</tr>
<tr>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%">
<input type="button" name="Close" value="Close Form" id="FClose<% =row %>"></td>
<td width="20%"><input type="button" name="Submit" value="Submit Form" id="FSubmit<% =row %>"></td>
</tr>
</table><p><tt id="results<% =row %>"></tt></p>
</form>
----------[ END FORM1.ASP ]----------