?
Solved

Combining multiple jQuery and JS functions

Posted on 2009-07-10
6
Medium Priority
?
778 Views
Last Modified: 2012-05-07
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!
----------[ 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?idTrip=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?idTrip=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?idTrip=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?idTrip=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("idTrip") %>
<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%">&nbsp;</td>
		<td width="20%">&nbsp;</td>
		<td width="20%">&nbsp;</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 ]----------

Open in new window

0
Comment
Question by:aspdevguy
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:anoyes
ID: 24974971
Still working on this?  It's a bit of work, so if you're not still having this trouble I won't bother...
0
 

Author Comment

by:aspdevguy
ID: 24976050
I couldn't get any answers on any of the boards so I picked up a jQuery in Action book and... umm a professional JavaScript developer. So this problem was not technically solved, but rather worked around.

I do have a related question though. If I am loading a dynamic page using that same AJAX call, I have trouble working with DOM elements within that loaded page. Here is a simple example.

Page index.html has a script within it that let's say applies a style to all the UL's on the page when I click a certain link contained directly within index.html.
<script>
$(function(){
$('#thelink').click(function(){
$('ul').addClass('somenewclass');
})
})
</script>
However, if I place that link (that calls a function) within a page that loads dynamically through that AJAX call, it does not work. It only works if I first place the script in a separate function like this...:

<script>
$(function(){
myfunction();
})

function myfunction() {
$('#thelink').click(function(){
$('ul').addClass('somenewclass');
})

}
</script>

...and then place this within the source of the page that will be loaded with AJAX:

<script>
myfunction();
</script>

Can you help me understand why it does what it does?

Thanks!
0
 
LVL 16

Expert Comment

by:anoyes
ID: 24976344
Yah, sure.  The $(function() {.... only gets called when the document is ready - I believe it's tied to the window.onload event - but when you load a page via AJAX that window.onload event never gets fired.  Script, however, will be executed, which is why your aliased function there works.  There's a little on the document.ready function here: http://docs.jquery.com/Events/ready#fn, and a decent discussion here: http://www.mail-archive.com/jquery-en@googlegroups.com/msg38208.html

Does that make sense?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:aspdevguy
ID: 24980398
I believe LiveQuery is the solution. It finds DOM elements that were added after the window loaded.

http://docs.jquery.com/Plugins/livequery
0
 
LVL 16

Accepted Solution

by:
anoyes earned 750 total points
ID: 24980832
Actually if you're using v 1.3 or later, you don't need the plugin, you just use $('element').live('click', function() {...});  This still needs to be on the page making the AJAX call however.
0
 

Author Comment

by:aspdevguy
ID: 24981139
Oh I see. I'll give it a shot. Thanks!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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.

Join & Write a Comment

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

584 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question