Salve,
mi sto cimentando nella programmazione php e jquery, volevo aggiungere una mia personale funzione ad un mio sito che sfrutta un CMS (osclass) abbastanza recente.
Lo script funziona, se pur ho avuto diverse difficoltà viste le mie scarse conoscenze, adesso volevo chiedere il parere agli esperti del settore per sapere se è ottimizzabile e/o troppo esoso in risorse.
Spiego velocemente cosa voglio ottenere con lo script:
Esiste un input field
generato automaticamente dal CMS, sul quale viene eseguito del codice Jquery, scritto da me, il quale attiva una funzione Jquery, "autocomplete()", e mostra alcuni valori presi da un database.
Dopo aver fatto ciò, se l'utente seleziona un valore dall'autocomplete vengono presi altri valori dal database, inseriti in altri campi input, nascosti i campi input e mostrato una stampa di ciò che è stato preso a lato.
Ecco qui il codice, essendo un CMS ha alcuni hooks che mi permettono di eseguire un determinato codice ad un determinato momento.
Quello che segue è la prima parte di codice Jquery( non è completa), per testarla l'ho creata solo per un elemento, viene eseguita al caricamento della pagina.
La parte in php, quella richiamata dal source invece è questa:
Infine ho un'ultima funzione Jquery, che gestisce la stampa nel caso in cui qualcosa al momento della validazione andasse storto e viene eseguita solo quando vengono costruiti i campi di input. Ed è questa:
Per capire meglio il funzionamento potete recarvi qui: http://tecnomercatino.it/item/new
In categoria selezionate Processori [CPU]
In componente iniziate a scrivere "a", aspettate un po' [E' ancora hostato su un host free quindi è molto lento, soprattutto il database Mysql], si apre " l'autocomplete".
Selezionate AMD FX-6300
E si attiva la prima parte del codice.
Per vedere l'ultima parte dovete compilare anche il resto della pagina, tutto tranne titolo e descrizione, in modo da costringerlo ad un errore di validazione dei form.
Quindi inserite un prezzo, una regione, una provincia e una città, e una mail anche a casaccio ([email protected]), e premete pubblica, si attiva la seconda parte
Vi chiedo già scusa per questo pappone di codice che vi lascio, come detto all'inizio mi interesserebbe principalmente ottimizzarlo
Grazie in anticipo
mi sto cimentando nella programmazione php e jquery, volevo aggiungere una mia personale funzione ad un mio sito che sfrutta un CMS (osclass) abbastanza recente.
Lo script funziona, se pur ho avuto diverse difficoltà viste le mie scarse conoscenze, adesso volevo chiedere il parere agli esperti del settore per sapere se è ottimizzabile e/o troppo esoso in risorse.
Spiego velocemente cosa voglio ottenere con lo script:
Esiste un input field
Codice:
<input id="meta_componente" class="text ui-autocomplete-input" type="text" value="" name="meta[1]" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></input>Dopo aver fatto ciò, se l'utente seleziona un valore dall'autocomplete vengono presi altri valori dal database, inseriti in altri campi input, nascosti i campi input e mostrato una stampa di ciò che è stato preso a lato.
Ecco qui il codice, essendo un CMS ha alcuni hooks che mi permettono di eseguire un determinato codice ad un determinato momento.
Quello che segue è la prima parte di codice Jquery( non è completa), per testarla l'ho creata solo per un elemento, viene eseguita al caricamento della pagina.
Codice:
<?php function test() { ?>
<script type="text/javascript">
jQuery(document).ready(function($)
{
$('.meta_list').hide();
myobj = {"116":"monitors_tab","100":"cpu_tab","113":"mouse_tab","114":"mousepad_tab","115":"keyboard_tab","102":"psu_tab","106":"case_tab","103":"dissipatori_tab","105":"exthd_tab","99":"inthd_tab","104":"masterizzatori_tab","107":"ram_tab","108":"aux_tab","109":"mobo_tab","110":"pci_tab","111":"vga_tab","101":"ssd_tab"};
var selectVal= myobj[$('#catId :selected').val()];
var changed=0;
$('#itemimg').hide();
$('li[id^="lis"]').hide();
$('.item_dblist').hide();
$('#catId').live("change", function() {
selectVal = myobj[$('#catId :selected').val()];
//$('li[id^="lis"]').hide();
$('li[id^="lis"]').text(' ');
$('#itemimg').attr("src", '');
//$('.item_dblist').hide();
//$('#itemimg').hide();
changed=1;
});
$(document).on('focus.autocomplete','#meta_componente' , function(){
$(this).autocomplete({
source: "http://tecnomercatino.it/oc-content/plugins/databasehd/codicephp.php?tab="+selectVal,
minLength: 0,
select: function (event, ui)
{
$('.meta_list').hide();
$('input[id^="meta"]').attr('readonly', true);
$('.item_dblist').show();
if(selectVal=='cpu_tab')
{
$('input[id="meta_modello"]').val((ui.item.modello).replace(/-/g, " "));
$('li[id="lis_modello"]').html("<b>Modello: </b>" +ui.item.modello);
$('li[id="lis_modello"]').show();
$('input[id="meta_anno"]').val(ui.item.anno);
$('li[id="lis_anno"]').html("<b>Anno: </b>" +ui.item.anno);
$('li[id="lis_anno"]').show();
$('input[id="meta_produttore"]').val(ui.item.produttore);
$('li[id="lis_produttore"]').html("<b>Produttore: </b>" +ui.item.produttore);
$('li[id="lis_produttore"]').show();
$('input[id="meta_arch"]').val(ui.item.arch);
$('li[id="lis_arch"]').html("<b>Architettura: </b>" +ui.item.arch);
$('li[id="lis_arch"]').show();
$('input[id="meta_socket"]').val(ui.item.socket);
$('li[id="lis_socket"]').html("<b>Socket: </b>" +ui.item.socket);
$('li[id="lis_socket"]').show();
$('input[id="meta_corenum"]').val(ui.item.corenum);
$('li[id="lis_corenum"]').html("<b>Numero Core: </b>" +ui.item.corenum);
$('li[id="lis_corenum"]').show();
$('input[id="meta_threadnum"]').val(ui.item.threadsnum);
$('li[id="lis_threadnum"]').html("<b>Numero Threads: </b>" +ui.item.threadsnum);
$('li[id="lis_threadnum"]').show();
$('input[id="meta_l2cache"]').val(ui.item.l2cache);
$('li[id="lis_l2cache"]').html("<b>Cache L2: </b>" +ui.item.l2cache);
$('li[id="lis_l2cache"]').show();
$('input[id="meta_l3cache"]').val(ui.item.l3cache);
$('li[id="lis_l3cache"]').html("<b>Cache L3: </b>" +ui.item.l3cache);
$('li[id="lis_l3cache"]').show();
$('input[id="meta_benchurl"]').val(ui.item.bench);
$('input[id="meta_imgurl"]').val(ui.item.imgurl);
}
else $('li[id^="lis"]').val('');
}
});
});
});
</script>
<?php } ?>La parte in php, quella richiamata dal source invece è questa:
Codice:
<?php
$mydb = new mysqli("db4free.net","tecnomercatino","carpediem1992", "hardware");
$text = $mydb->real_escape_string($_GET['term']);
$table="componenti";
$table2=$_GET["tab"];
$sqlquery ="SELECT * FROM $table as o, $table2 as c WHERE o.ID=c.componenti_ID AND (produttore LIKE '%$text%' OR nome LIKE '%$text%' )";
$result = $mydb->query($sqlquery);
$json = '[';
$first=true;
while($row = $result->fetch_assoc())
{
if (!$first) { $json .= ','; } else { $first = false; }
if(strcasecmp($table2, 'cpu_tab')==0){
$json .= '{
"id":"'.$row['ID'].'",
"label":"'.$row['produttore'].' '.$row['nome'].' @ '.$row['clock'].'mhz",
"modello":"'.$row['nome'].'",
"anno":"'.$row['anno'].'",
"produttore":"'.$row['produttore'].'",
"arch":"'.$row['architettura'].'",
"socket":"'.$row['socket'].'",
"corenum":"'.$row['corenum'].'",
"threadsnum":"'.$row['threadsnum'].'",
"l2cache":"'.$row['l2cache'].'",
"l3cache":"'.$row['l3cache'].'",
"bench":"'.$row['bench'].'",
"imgurl":"'.$row['img'].'"
}';}
else {
$json .= '{
"id":"'.$row['ID'].'",
"value":"'.$row['produttore'].' '.$row['nome'].'"
}';}
}
$json .= ']';
echo $json;
?>Infine ho un'ultima funzione Jquery, che gestisce la stampa nel caso in cui qualcosa al momento della validazione andasse storto e viene eseguita solo quando vengono costruiti i campi di input. Ed è questa:
Codice:
<?php function valor() {?>
<script type="text/javascript">
jQuery(document).ready(function($)
{
myobj = {"116":"monitors_tab","100":"cpu_tab","113":"mouse_tab","114":"mousepad_tab","115":"keyboard_tab","102":"psu_tab","106":"case_tab","103":"dissipatori_tab","105":"exthd_tab","99":"inthd_tab","104":"masterizzatori_tab","107":"ram_tab","108":"aux_tab","109":"mobo_tab","110":"pci_tab","111":"vga_tab","101":"ssd_tab"};
var selectVal= myobj[$('#catId :selected').val()];
if((selectVal=='cpu_tab')&&(($('input[id="meta_imgurl"]').val())!='')){
$('.meta_list').hide();
$('.item_dblist').show();
$('li[id="lis_anno"]').html("<b>Anno: </b>" +$('#meta_anno').val());
$('li[id="lis_anno"]').show();
$('li[id="lis_modello"]').html("<b>Modello: </b>" +$('#meta_modello').val());
$('li[id="lis_modello"]').show();
$('li[id="lis_produttore"]').html("<b>Produttore: </b>" +$('#meta_produttore').val());
$('li[id="lis_produttore"]').show();
$('li[id="lis_arch"]').html("<b>Architettura: </b>" +$('#meta_arch').val());
$('li[id="lis_arch"]').show();
console.log($('#meta_anno').val());
}
else { $('.item_dblist').hide();}
});
</script>
<?php } ?>Per capire meglio il funzionamento potete recarvi qui: http://tecnomercatino.it/item/new
In categoria selezionate Processori [CPU]
In componente iniziate a scrivere "a", aspettate un po' [E' ancora hostato su un host free quindi è molto lento, soprattutto il database Mysql], si apre " l'autocomplete".
Selezionate AMD FX-6300
E si attiva la prima parte del codice.
Per vedere l'ultima parte dovete compilare anche il resto della pagina, tutto tranne titolo e descrizione, in modo da costringerlo ad un errore di validazione dei form.
Quindi inserite un prezzo, una regione, una provincia e una città, e una mail anche a casaccio ([email protected]), e premete pubblica, si attiva la seconda parte
Vi chiedo già scusa per questo pappone di codice che vi lascio, come detto all'inizio mi interesserebbe principalmente ottimizzarlo
Grazie in anticipo
