This JQuery seems inefficient

[Pinchanzee]

I've got lists of links which change order when you click the "most" or "least" buttons, have a quick look at it, easier to understand: http://pinchweb.com/browse/

The problem is, I see a lot of repeated code, which seems pretty inefficient. There's 4 filters - leastrec (least recent), mostrec, leastpop (least popular) and mostpop, and I've had to make a JQuery function for each of them, even though they all do pretty similar things. Is there any way I can configure the JQuery to take parameters, and reduce it to one function?

Here's what they look like:

<script>
	<!--
	var $j = jQuery.noConflict();
	$j(function() {
	    $j(".mostrec").click(function(evt) {
		$j("#1").load("content.php?order=most&f=recent")
		evt.preventDefault();
	    })
	})
	//-->
    </script>

    <script>
	<!--
	var $j = jQuery.noConflict();
	$j(function() {
	    $j(".leastrec").click(function(evt) {
		$j("#1").load("content.php?order=least&f=recent")
		evt.preventDefault();
	    })
	})
	//-->
    </script>

    <script>
	<!--
	var $j = jQuery.noConflict();
	$j(function() {
	    $j(".mostpop").click(function(evt) {
		$j("#2").load("content.php?order=most&f=popular")
		evt.preventDefault();
	    })
	})
	//-->
    </script>

    <script>
	<!--
	var $j = jQuery.noConflict();
	$j(function() {
	    $j(".leastpop").click(function(evt) {
		$j("#2").load("content.php?order=least&f=popular")
		evt.preventDefault();
	    })
	})
	//-->
    </script>

With each link having the relative #id ("recent" or "popular" column), and filter (least or most).
But I notice they're all activated by different link objects, maybe could cut it down to 2 at best?
Or even, would it be better to put them all in 1 function that waits on all 4?

Any help is greatly appreciated.

[mrnutty]

idk too much about jQuery but it seems you can abstract:

<script>
function foo(name,id)
{
       var $j = jQuery.noConflict();
	$j(function() {
	    $j(name).click(function(evt) {
		$j(id).load("content.php?order=most&f=recent")
		evt.preventDefault();
	    })
	})

}

 foo("mostrec","#1");
 foo(".leastrec","#1");
 //...so on
</script>

[Pinchanzee]

Works a charm, thanks!

<script>
	<!--
	function waitEvent(order,column){
		var $j = jQuery.noConflict();
		$j(function() {
		    $j("."+order).click(function(evt) {
				if (order[0]=='m')
					val="most";
				else
					val="least";
				val2 = order.substring(1,order.length);
				$j("#"+column).load("content.php?order="+val+"&f="+val2)
				evt.preventDefault();
		    })
		})
	}
	
	waitEvent("mrecent","1");
	waitEvent("lrecent","1");
	waitEvent("mpopular","2");
	waitEvent("lpopular","2");
	//-->
    </script>

[Airshow]

jQuery's noConflict method allows jQuery to coexist with other libs (eg. Prototype), which use $ as ana alias.

As these libs all install themselves in the global namespace, there's no point calling jQuery.noConflict(); anywhere other than in the global namespace (ie not inside a function).

Airshow

[Pinchanzee]

jQuery's noConflict method allows jQuery to coexist with other libs (eg. Prototype), which use $ as ana alias.

As these libs all install themselves in the global namespace, there's no point calling jQuery.noConflict(); anywhere other than in the global namespace.

Airshow

Sorry I don't quite follow (new to JQuery) - I used noConflict because I'm using a lot of php too, where would it be better to place it rather than var $j = jQuery.noConflict; ?
When would I define the $j variable, then, and what as?
Just $j = JQuery;?
In which case would the lack of noConflict not be a problem?

Cheers.

[stbuchok]

You don't need noConflict if you are using PHP, you only need to use noConflict if you are using other JavaScript Libraries, like Prototype or YUI.

Please try reading some of the jQuery documentations to get a better understanding of what you are using.

[Pinchanzee]

Fair enough, changed to just $ - thought it wouldn't do much harm as a precaution.

[Airshow]

jquery.noConflict is actually quite clever. The API tells us that:

... If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict(): ...

In other words, regardless of the order in which jQuery and other libs are loaded, jquery.noConflict() will cause whichever lib had ownership of $ prior to jQuery loading, to be given back that ownership.

I've not tested but expect that jquery.noConflict() (either globally or in an inner scope) in the absence of another lib will simply release the token $ in the global scope. Any other jQuery statements that rely on global $ , executed after jquery.noConflict() , will therefore fail.

For these reasons, var $j = $; and var $j = $.noConflict(); are not equivalent.

Airshow