InstantListFilter using jQuery 1.3.x

Sep 23, 2010 at 12:30 PM

Hi,

I tried to use the JQuery in CEWP, but nothing happened.

I have a list that have some folders within. Inside these folders I have PDF files. These PDf files are associate to a content type with some atributes/columns.

The webpart i tested works from this list.

I inserted CEWP, I made a copy/paste of code  to "Source/Editor" but wihtiu success.

It is necessary to adapt  something in the code to work in my environment? What can be the problem?

 

Best Regards

Luis

 

Sep 23, 2010 at 12:40 PM

Luis:

Did you make the change documented here?
 http://instantlistfilter.codeplex.com/Thread/View.aspx?ThreadId=49123

M.

Sep 24, 2010 at 1:12 PM

Hi again,

Yes, I made.

<SCRIPT src="http://sebsa033mossfp2:82/Pages2/jquery/jquery-1.3.1.min.js" type=text/javascript></SCRIPT>


<script>

google.setOnLoadCallback(function() { 

$(document).ready(function()
{	
	jQuery.extend(jQuery.expr[':'], {
	   containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0}
	});



	
	$("table.ms-listviewtable tr.ms-viewheadertr").each(function()
	{
		if($("td.ms-vh-group", this).size() > 0)
		{
			return;	
		}
		
		var tdset = "";
		
		var colIndex = 0;
		
		$(this).children("th,td").each(function()
		{
			if($(this).hasClass("ms-vh-icon"))
			{
				// attachment
				tdset += "<td></td>";
			}
			else
			{
				// filterable
				tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";				
			}
			
			colIndex++;
		});
		
		var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
		
		$(tr).insertAfter(this);
	});	
	
	
	$("input.vossers-filterfield")
		.css("border", "1px solid #7f9db9")
		.css("width", "100%")
		.css("margin", "2px")
		.css("padding", "2px")
		.keyup(function()
		{			
			var inputClosure = this;
			
			if(window.VossersFilterTimeoutHandle)
			{
				clearTimeout(window.VossersFilterTimeoutHandle);
			}
			
			window.VossersFilterTimeoutHandle = setTimeout(function()
			{
				var filterValues = new Array();
				
				$("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()
				{				
					if($(this).val() != "")				
					{
						filterValues[$(this).attr("filtercolindex")] = $(this).val();
					}
				});		
				
							
				$(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()
				{
					var mismatch = false;
					
					$(this).children("td").each(function(colIndex)
					{
						if(mismatch) return;
						
						if(filterValues[colIndex])
						{
							var val = filterValues[colIndex];
							
							// replace double quote character with 2 instances of itself
							val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));							
																				
							if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))
							{
								mismatch = true;
							}						
						}
					});
					
					if(mismatch)
					{
						$(this).hide();
					}
					else
					{
						$(this).show();
					}		
				});				
				
			}, 250);
		});
});

});

</script>

Luis

Oct 1, 2010 at 10:11 AM

Hi Luis,

I also experienced the same problem as you - nothing happened when I used the script, and had made the change for jQuery 1.3 and higher...

I had a bit of a dig and discovered that the selector $("table.ms-listviewtable tr.ms-viewheadertr") returns no elements.
i.e. the SharePoint generated page with a DVWP doesn't have a table with class "ms-listviewtable".
If you go to a List View page, then there is such an element... but I am wanting this to work on a DVWP page.

I therefore made a simple change:

//$("table.ms-listviewtable tr.ms-viewheadertr").each(function()
$("#WebPartWPQ2 table tr:has(th)").each(function()

This is dependent on the layout of your page - e.g. in mine, the DVWP webpart renders a <div> with ID "WebPartWPQ2".

Clearly because we have control of the final rendered output (in the XSLT in the DVWP), we can create HTML markup as we like, and then modify the selector accordingly.
e.g. on the header row add our own class "add-filters" and then change the selector to

$("tr.add-filters").each(function()

Hope this helps,
Alex

Nov 6, 2014 at 1:11 PM
I have a DVWP on a DispForm. I used Alex's selector and got the input box to show, but it's not filtering. Should I change something else in the code?