Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

EVENTS "ADVANCED" SEARCH

Posted by Simone on November 5, 2011 at 5:42pm in
Add a Tip for Other Network Creators (Ning 2)

Hi all,

in order to improve my network, I've create a kind of "Advanced" Search for Events... What hard work! :-)

So, these are - in summary - the steps to implement my function:

1 - Determinate what are the features/contitions search for events: for me, there was 4 kind of elements (type, day, country/state and county/zone, with county depends on world).

2 - Improve an external function that easily helps you to combinate each features in order to have a single result string with any possible combination. For example: type:course, day: monday, country: universe, county: world. You need this kind of string (comma separated): "course, monday, course-monday, universe, course-universe, monday-universe, course-monday-universe, universe-world, course-universe-world, monday-universe-world, course-monday-universe-world" (if county doesn't depend on country, you need also: "world, course-world, monday-world").

3 - Enable Events moderation and update the "TYPE" with the result string just created (use short code for needed value): in this way, you can use the LIST-BY-TYPE Ning feature (if you want, you can change the search result string in Language Editor) calling it with a button.

4 - Implement an html advaced search with Drop-Down-List and conditional search in a button. Here the code for picture in point 1:

<form>
<table style="width: 100%;"> // use a table to place options better
<tbody>
<tr>
<td style="width: 22000px;">
<table style="width: 100%;">
<tbody>
<tr>
<td>
<div class="xg_module eventmodule">
<div class="xg_module_head">
<h2>cerca evento</h2>
</div>
<div class="xg_module_body">
<table style="width: 261px; height: 74px;" class="style1" border="1">
<tbody>
<tr>
<td style="height: 35px;" class="style1">Tipo:</td>
<td style="height: 35px; width: 20px;" class="style2"> </td>
<td style="height: 35px; width: 181px;">
<div><select name="Tipo" id="Tipo">
<option value="0">Tutti</option>
<option value="congresso">Congresso</option>
<option value="corso">Corso</option>
<option value="festa">Festa</option>
<option value="serata">Serata</option>
<option value="stage">Stage</option>
<option value="viaggio">Vacanza</option>
</select></div>
</td>
</tr>
<tr>
<td style="height: 35px;">Giorno:<br />
</td>
<td style="height: 35px; width: 20px;" class="style2"> </td>
<td style="width: 181px; height: 35px;"><select name="Giorno" id="Giorno">
<option value="0">Tutti</option>
<option value="lun">Lunedì</option>
<option value="mar">Martedì</option>
<option value="mer">Mercoledì</option>
<option value="gio">Giovedì</option>
<option value="ven">Venerdì</option>
<option value="sab">Sabato</option>
<option value="dom">Domenica</option>
</select></td>
</tr>
<tr>
<td style="height: 35px;">Regione:</td>
<td style="height: 35px; width: 20px;" class="style2"> </td>
<td style="width: 181px; height: 35px;">
<div><select name="Regione" id="Regione">
<option value="0">Tutte</option>
<option value="abruzzo">Abruzzo</option>
<option value="basilicata">Basilicata</option>
<option value="calabria">Calabria</option>
<option value="campania">Campania</option>
<option value="emilia">Emilia-Romagna</option>
<option value="friuli">Friuli-Venezia Giulia</option>
<option value="lazio">Lazio</option>
<option value="liguria">Liguria</option>
<option value="lombardia">Lombardia</option>
<option value="marche">Marche</option>
<option value="molise">Molise</option>
<option value="piemonte">Piemonte</option>
<option value="puglia">Puglia</option>
<option value="sardegna">Sardegna</option>
<option value="sicilia">Sicilia</option>
<option value="toscana">Toscana</option>
<option value="trentino">Trentino-Alto Adige</option>
<option value="umbria">Umbria</option>
<option value="aosta">Valle d'Aosta</option>
<option value="veneto">Veneto</option>
</select></div>
</td>
</tr>
<tr>
<td style="height: 35px;">Provincia:</td>
<td style="height: 35px; width: 20px;" class="style2"> </td>
<td style="width: 181px; height: 35px;">
<div><select name="Provincia" id="Provincia">
<option class="0" value="0">Tutte</option>
<option class="abruzzo" value="0">Tutte</option>
<option class="abruzzo" value="ch">Chieti</option>
<option class="abruzzo" value="aq">L'Aquila</option>
<option class="abruzzo" value="pe">Pescara</option>
<option class="abruzzo" value="te">Teramo</option>
<option class="basilicata" value="0">Tutte</option>
<option class="basilicata" value="mt">Matera</option>
<option class="basilicata" value="pz">Potenza</option>
<option class="calabria" value="0">Tutte</option>
<option class="calabria" value="cz">Catanzaro</option>
<option class="calabria" value="cs">Cosenza</option>
<option class="calabria" value="kr">Crotone</option>
<option class="calabria" value="rc">Reggio di Calabria</option>
<option class="calabria" value="vv">Vibo Valentia</option>
<option class="campania" value="0">Tutte</option>
<option class="campania" value="av">Avellino</option>
<option class="campania" value="bn">Benevento</option>
<option class="campania" value="ce">Caserta</option>
<option class="campania" value="na">Napoli</option>
<option class="campania" value="sa">Salerno</option>
<option class="emilia" value="0">Tutte</option>
<option class="emilia" value="bo">Bologna</option>
<option class="emilia" value="fe">Ferrara</option>
<option class="emilia" value="fc">Forlì-Cesena</option>
<option class="emilia" value="mo">Modena</option>
<option class="emilia" value="pr">Parma</option>
<option class="emilia" value="pc">Piacenza</option>
<option class="emilia" value="ra">Ravenna</option>
<option class="emilia" value="re">Reggio nell'Emilia</option>
<option class="emilia" value="rn">Rimini</option>
<option class="friuli" value="0">Tutte</option>
<option class="friuli" value="go">Gorizia</option>
<option class="friuli" value="pn">Pordenone</option>
<option class="friuli" value="ts">Trieste</option>
<option class="friuli" value="ud">Udine</option>
<option class="lazio" value="0">Tutte</option>
<option class="lazio" value="fr">Frosinone</option>
<option class="lazio" value="lt">Latina</option>
<option class="lazio" value="ri">Rieti</option>
<option class="lazio" value="rm">Roma</option>
<option class="lazio" value="vt">Viterbo</option>
<option class="liguria" value="0">Tutte</option>
<option class="liguria" value="ge">Genova</option>
<option class="liguria" value="im">Imperia</option>
<option class="liguria" value="sp">La Spezia</option>
<option class="liguria" value="sv">Savona</option>
<option class="lombardia" value="0">Tutte</option>
<option class="lombardia" value="bg">Bergamo</option>
<option class="lombardia" value="bs">Brescia</option>
<option class="lombardia" value="co">Como</option>
<option class="lombardia" value="cr">Cremona</option>
<option class="lombardia" value="lc">Lecco</option>
<option class="lombardia" value="lo">Lodi</option>
<option class="lombardia" value="mn">Mantova</option>
<option class="lombardia" value="mi">Milano</option>
<option class="lombardia" value="mb">Monza e Brianza</option>
<option class="lombardia" value="pv">Pavia</option>
<option class="lombardia" value="so">Sondrio</option>
<option class="lombardia" value="va">Varese</option>
<option class="marche" value="0">Tutte</option>
<option class="marche" value="an">Ancona</option>
<option class="marche" value="ap">Ascoli Piceno</option>
<option class="marche" value="fm">Fermo</option>
<option class="marche" value="mc">Macerata</option>
<option class="marche" value="pu">Pesaro e Urbino</option>
<option class="molise" value="0">Tutte</option>
<option class="molise" value="cb">Campobasso</option>
<option class="molise" value="is">Isernia</option>
<option class="piemonte" value="0">Tutte</option>
<option class="piemonte" value="al">Alessandria</option>
<option class="piemonte" value="at">Asti</option>
<option class="piemonte" value="bi">Biella</option>
<option class="piemonte" value="cn">Cuneo</option>
<option class="piemonte" value="no">Novara</option>
<option class="piemonte" value="to">Torino</option>
<option class="piemonte" value="vb">Verbano-Cusio-Ossola</option>
<option class="piemonte" value="vc">Vercelli</option>
<option class="puglia" value="0">Tutte</option>
<option class="puglia" value="ba">Bari</option>
<option class="puglia" value="bt">Barletta-Andria-Trani</option>
<option class="puglia" value="br">Brindisi</option>
<option class="puglia" value="fg">Foggia</option>
<option class="puglia" value="le">Lecce</option>
<option class="puglia" value="ta">Taranto</option>
<option class="sardegna" value="0">Tutte</option>
<option class="sardegna" value="ca">Cagliari</option>
<option class="sardegna" value="ci">Carbonia-Iglesias</option>
<option class="sardegna" value="vs">Medio Campidano</option>
<option class="sardegna" value="nu">Nuoro</option>
<option class="sardegna" value="og">Ogliastra</option>
<option class="sardegna" value="ot">Olbia-Tempio</option>
<option class="sardegna" value="or">Oristano</option>
<option class="sardegna" value="ss">Sassari</option>
<option class="sicilia" value="0">Tutte</option>
<option class="sicilia" value="ag">Agrigento</option>
<option class="sicilia" value="cl">Caltanissetta</option>
<option class="sicilia" value="ct">Catania</option>
<option class="sicilia" value="en">Enna</option>
<option class="sicilia" value="me">Messina</option>
<option class="sicilia" value="pa">Palermo</option>
<option class="sicilia" value="rg">Ragusa</option>
<option class="sicilia" value="si">Siracusa</option>
<option class="sicilia" value="tp">Trapani</option>
<option class="toscana" value="0">Tutte</option>
<option class="toscana" value="ar">Arezzo</option>
<option class="toscana" value="fi">Firenze</option>
<option class="toscana" value="gr">Grosseto</option>
<option class="toscana" value="li">Livorno</option>
<option class="toscana" value="lu">Lucca</option>
<option class="toscana" value="ms">Massa-Carrara</option>
<option class="toscana" value="pi">Pisa</option>
<option class="toscana" value="pt">Pistoia</option>
<option class="toscana" value="po">Prato</option>
<option class="toscana" value="si">Siena</option>
<option class="trentino" value="0">Tutte</option>
<option class="trentino" value="bz">Bolzano</option>
<option class="trentino" value="tn">Trento</option>
<option class="umbria" value="0">Tutte</option>
<option class="umbria" value="pg">Perugia</option>
<option class="umbria" value="tr">Terni</option>
<option class="aosta" value="ao">Aosta</option>
<option class="veneto" value="0">Tutte</option>
<option class="veneto" value="bl">Belluno</option>
<option class="veneto" value="pd">Padova</option>
<option class="veneto" value="ro">Rovigo</option>
<option class="veneto" value="tv">Treviso</option>
<option class="veneto" value="ve">Venezia</option>
<option class="veneto" value="vr">Verona</option>
<option class="veneto" value="vi">Vicenza</option>
</select></div>
</td>
</tr>
<tr>
<td style="height: 35px;" colspan="3"><input class="button" value="Cerca" onclick="if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events'; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value;" type="button" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[
//Applies cascading behavior for the specified dropdowns
function applyCascadingDropdown(sourceId, targetId) {
    var source = document.getElementById(sourceId);
    var target = document.getElementById(targetId);
    if (source && target) {
        source.onchange = function() {
            displayOptionItemsByClass(target, source.value);
        }
        displayOptionItemsByClass(target, source.value);
    }
}

//Displays a subset of a dropdown's options
function displayOptionItemsByClass(selectElement, className) {
    if (!selectElement.backup) {
        selectElement.backup = selectElement.cloneNode(true);
    }
    var options = selectElement.getElementsByTagName("option");
    for(var i=0, length=options.length; i<length; i++) {
        selectElement.removeChild(options[0]);
    }
    var options = selectElement.backup.getElementsByTagName("option");
    for(var i=0, length=options.length; i<length; i++) {
        if (options[i].className==className)
            selectElement.appendChild(options[i].cloneNode(true));
    }
}

//Binds dropdowns
function applyCascadingDropdowns() {
    applyCascadingDropdown("Regione", "Provincia");
}

//execute when the page is ready
window.onload=applyCascadingDropdowns;
// ]]></script>
</div>
</div>
</td>
</tr>

5 - Hide "Most popular events type" with JQuery.

To see the functions: http://www.latinplaza.it/eventi

 

Bye!

Simone

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Tags: search, events
★
★
★
★
★
Votes: 0
Email me when people reply –
Follow

Replies

This reply was deleted.

Featured Discussions

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Paul Jackson updated their profile
Aug 28
eric1612 updated their profile
Aug 20
Tony A updated their profile
Aug 13
Tyler Masonry updated their profile
Aug 9
NC for Hire
⚡JFarrow⌁ posted a discussion
Has Anyone Ever Built an Application using the Ning API
I am trying to find just one working example of an app or utility that runs with the Ning API. No…
See More
Aug 7
Eva updated their profile
Aug 2
Eva liked Steve C's discussion Ning's staff is in Kyiv. Keep them in your hearts.
Aug 2
Eva liked ⚡JFarrow⌁'s discussion What is going on with Ning? What Do We have to Look Forward To?
Aug 2
Chris Egg updated their profile
Jul 30
Eva liked Ning Support's discussion New feature added into Group Permissions
Jul 29
Arissa Seah updated their profile
Jul 27
APOSTLE TEYSHANA WILEY liked Ning Support's discussion New feature added into Group Permissions
Jul 25
More…

Meanwhile, you can check our social media channels