jQuery .load & .after

JavaScript
1

Hello,

I just wondered if anyone knows of a way to use the .after and .load functions in jQuery at the same time!

What I am trying to achieve, is that when a button within a specific <tr> is a click the .load function is called and the results of the .load are placed are the after <tr> where the button resides!

This is racking my head!

I have tried this:


//Quick Edit
$(".qEdit").click(
	function(){
		var $pageID = $(this).parents('tr').attr('id');	
		var $editID = $pageID.replace(/pageID/, "editID");
			
		//Remove Any Other Quick Edits
		if ($("tr.quickEdit")) {
			$("tr.quickEdit").remove();
		}
			
		//Hide Page TR & Display Quick Edit
		$(this).parents('tr').hide();
                $(this).parents('tr').after(.load('assets/ajax/quickEdit.php', { editID: $editID }));
			return false;
		}
	);

But it does work!

Any ideas anyone?

Regards

2

Shouldn’t it be $.load() instead of just .load() ?

BTW. If ($(“tr.quickEdit”)) doesn’t work, since jQuery does not return false when nothing is found, but returns a jQuery object, which evaluates to true.
What I always do instead is

if ($(“tr.quickEdit”).size() > 0)

However, you can simply put

$(“tr.quickEdit”).remove();

whithout any if statement. jQuery doesn’t raise an error if no tr.quickEdit exists.

3

It just tells me that $.load is not a function!

Thanks for the fast reply thou! :smiley:

4

I just read that in the docs …

You should try

$(this).parents(‘tr’).after($(‘<div>’).load(‘assets/ajax/quickEdit.php’, { editID: $editID }));

Which creates a new div, loads the data into that div, and puts it after the tr

5

Awesome! Thats about done it!

Thank you so much!

Modified it, so the <div> isn’t used:

$(this).parents(‘tr’).after($(‘<tr class=“quickEdit” id=’+$editID+‘>’).load(‘assets/ajax/quickEdit.php’, { editID: $editID }));

6

Although I like your idea of using AJAX for quick edit fields, I wonder if you have also considered the following.

  1. Create a div with an id like “editDiv”
  2. This div has the contents of assets/ajax/quickEdit.php
  3. Whenever someone clicks an .qEdit element, you move “editDiv” so it goes below the tr for which the .qEdit element was clicked. You can than also have a hidden field within this div with the name editID which you can populate with the id of the .qEdit element was clicked.

For example


$('.qEdit').click( function() {
   var id = $(this).attr('id');
   var $editID = id.substring(id, lastIndexOf('_') + 1);
   $('#editID).val($editID);
});

Assuming the hidden field has the editID and every .qEdit element has an id in the form “edit_{editID}”.

It would save bandwith and make thing looks more smooth since there is no AJAX loading time.

7