?
Solved

Combining multiple jQuery and JS functions

Posted on 2009-07-10
6
Medium Priority
?
773 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Linux Academy Android App Now Supports Chromecast

We have some fantastic news for our Android fans. We’re so excited to announce that the Linux Academy Android app is now available with Chromecast support. That’s right – simply download the latest update of the Linux Academy App and start casting your favorite course videos!

 

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

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

771 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