SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    Aveiro, Portugal
    Posts
    165
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Building a web app ala Yahoo Autos

    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:

    Code:
    //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:

    HTML Code:
    <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:

    HTML Code:
    <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.
    Yours truely
    Mário Ramos

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    Aveiro, Portugal
    Posts
    165
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok, I was able to get the onclick function working.

    Modified:
    Code:
    //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
    Code:
    //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
    Yours truely
    Mário Ramos

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    Aveiro, Portugal
    Posts
    165
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    * bump
    Yours truely
    Mário Ramos

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    Aveiro, Portugal
    Posts
    165
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Yours truely
    Mário Ramos


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •