Solved

Combining multiple jQuery and JS functions

Posted on 2009-07-10
6
756 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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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 250 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Bootstrap Datable Spinner 3 30
Add Background to a PDF Programmatically 1 21
Css issue on scroll 1 18
Hidden Field Value 10 34
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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)
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now