Building a web app ala Yahoo Autos

JavaScript
1

I’m building a web site ala autos.yahoo.com on servicos.mpl.pt/comparador/css1.php

I have a sidebar with filtering options grouped in an accordion.
The accordion panels get populated via jquery like:


//getMarcas
	$(function() {				
		//get tag feed
		$.getJSON("marcascloud.php?callback=?", function(data) {
		
			//create list for tag links
			$("<ul class='twocol'>").attr("id", "tagListMarcas").appendTo("#tagMarcas");
			
			//create tags
			$.each(data.tags, function(i, val) {
				
				//create item
				var li = $("<li class='twocol'>");
				
				//create link
				$("<a>").text(val.marca+" ("+val.nummodelos+")").attr({
					title:"Veja todos os modelos " + val.marca,  
					'class':"aul",

					click: function(){ QS('marca[]='+ val.idmarca );return false;}
				}).appendTo(li);
				
				
				
				//add to list
				li.appendTo("#tagListMarcas");
				
			});
		});
	});

A couple of things I need to achieve:

  • how to apply an onclick event to each list item?

The sidebar structure:


<div id="sidebar">
		<p>
			<div id="accordion">
				<h3><a name="marcas">Marca</a></h3>
				<div id="tagMarcas">
					<p>Seleccione até 4 marcas na lista abaixo</p>
					<p>
												   
					</p>
				</div>

At the moment the generated code for the unordered list on the sidebar is:


<ul id="tagListMarcas" class="twocol">
<li class="twocol"><a href="#" class="aul" title="Veja todos os modelos Abarth">Abarth (1)</a></li>
<li class="twocol"><a href="#" class="aul" title="Veja todos os modelos Alfa Romeo">Alfa Romeo (21)</a></li>
<li class="twocol"><a href="#" class="aul" title="Veja todos os modelos Aston Martin">Aston Martin (23)</a></li><li class="twocol"><a href="#" class="aul" title="Veja todos os modelos Audi">Audi (259)</a></li>
<li class="twocol"><a href="#" class="aul" title="Veja todos os modelos Bentley">Bentley (8)</a></li>
</ul>

My onclick event is not being assigned.

  • after being able to assign the onclick event, what would the function look like so I can pass all the parameters chosen to the server side script result.php that queries the database?
  • how do I make a jquery load call to populate the content div with the results?

Hope I was clear explaining.

Thankx in advance.

2

Ok, I was able to get the onclick function working.

Modified:


//create link
$("<a>").text(val.marca+" ("+val.nummodelos+")").attr({
    title:"Veja todos os modelos " + val.marca,  
    'class':"aul",
    'href': '#',
    click: function(){ QS('marca[]='+ val.idmarca );return false;}
}).appendTo(li);

to


//create link
$("<a>").text(val.marca+" ("+val.nummodelos+")").attr({
    title:"Veja todos os modelos " + val.marca,  
    'class':"aul",
    'href': '#',
    'onclick': "QS('marca[]="+ val.idmarca +"')"
}).appendTo(li);

So basically I need help on passing the clicked values to the server side script.
I’m concatenating all the clicked values in a textbox, so it looks like:
?marca=6&marca=1&marca=153…

Thankx

3
  • bump
4

Apparently what I was missing was that as I created the unordered lists dinamically, I had to use jQuery’s .live() method.

So basically I added:

$(‘a.aul’).live(‘click’, function () {
var searchparams = $(“#txtparams”).val();
//$(“Content”).load(“result1.php”, {proj: $(this).attr(‘id’)} );
$(“Content”).load(“result.php”, {proj: searchparams} );

  return false;
});

which binds the click event to the link tags in the unordered lists. In my click event I use jQuery’s .load() event to populate my result div with a grid of results.
Hope this helps anybody.