Okei okei. En liten update.
Jeg er nå i mål, etter mye om og men, og er relativt fornøyd med løsningen all over. Noe pynting og opprydding kan sikkert gjøres men det får jeg ta en annen gang. Shitten funker ihvertfall og jeg tenkte å dele koden sånn tilfelle noen trenger noe lignende. Som sagt, det er ikke den mest sexy koden i historien, men jeg lar hver enkelt rydde og pynte selv jeg anser meg som relativt ferdig og orker ikke gjøre noe videre jobb akkurat nå for å legge til sexyness.
Okei, så først. Utgangspunktet mitt var en slik listing:
Den genereres fra backend gjennom denne koden:
Kode
<table id="dataTable">
<tr>
<td>Identifiertype</td>
<td width="10"></td>
<td>Identifier</td>
<td width="10"></td>
<td>Info</td>
<td width="30"></td>
<td>Markup</td>
<td width="10"></td>
<td>Netprice</td>
<td width="10"></td>
<td></td>
</tr>
<br/>
<%
int iterator = 0;
for(Iterator it = db.getData().iterator();it.hasNext();) {
EntryData entry = (EntryData)it.next();
%>
<tr>
<td><div id="editable1_<%=iterator%>" class="editable_select" onBlur="reset();" name="editable_select"><%=entry.getIdentifiertype()%></div><input type="hidden" id="newValue1_<%=iterator%>" value=""></td>
<td></td>
<td><div id="editable2_<%=iterator%>" class="editable"><%=entry.getIdentifier()%></div><input type="hidden" id="newValue2_<%=iterator%>" value="">
<td></td>
<td><%=entry.getIdentifierTitle() %></td>
<td></td>
<td><div id="editable3_<%=iterator%>" class="editable"><%if(entry.getEntrytype().equals("MARKUP")){out.println(entry.getEntrycontent());} %></div><input type="hidden" id="newValue3_<%=iterator%>" value=""></td>
<td></td>
<td><div id="editable4_<%=iterator%>" class="editable"><%if(entry.getEntrytype().equals("NETPRICE")){out.println(entry.getEntrycontent());} %></div><input type="hidden" id="newValue4_<%=iterator%>" value=""></td>
<td></td>
<td><input type="hidden" value="<%= entry.getIdentifiertype() %>" name="original_Identifiertype_<%=iterator%>" id="original_Identifiertype_<%=iterator%>"/></td>
<td><input type="hidden" value="<%= entry.getEntrycontent() %>" name="original_EntryContent_<%=iterator%>" id="original_EntryContent_<%=iterator%>"/></td>
<td><input type="hidden" value="<%= entry.getIdentifier() %>" name="original_Identifier_<%=iterator%>" id="original_Identifier_<%=iterator%>"/></td>
<td><input type="hidden" value="<%= entry.getEntrycontent() %>" name="original_Entrytype_<%=iterator%>" id="original_Entrytype_<%=iterator%>"/></td>
<td><input type="hidden" value="<%=iterator%>" name="iterator"/></td>
</tr>
<%
iterator++;}
%>
</table>
Så, for å forklare litt så brukes hidden-verdiene av backend for database-kjøring. Min backend er en javaløsning med en tilhørende oracle-database for de som interesserer seg for sånt. Det er vel såpass mye jeg gidder å gå ut med.
Det jeg opprinnelig ønsket å gjøre var å kunne trykke på hvilken som helst verdi og endre denne. Rett og slett for å slippe å slette og legge inn på nytt , som var den eneste muligheten tidligere.
Som man kan se så er har hver enkelt verdi en egen div med en editable_iterator-verdi, det er så jeg kan legge jquery-funksjonalitet på hver eneste verdi. Etter at en verdi er endret så legges den nye verdien til sitt tilhørende hidden-felt(newvalue_) som backend bruker sammen med original_Whatever-felt for å gjøre oppslag og database-endringer(man kan sikkert unngå bruk av de hidden original_value feltene, men som sagt det funker og pynting får du gjøre sjøl).
Okei, så noe av problemet var at jeg ville ha en dropdown-meny om jeg klikket på verdiene som ligger i identifiertype-rekken. Fordi man kan banne på at en eller annen jævel ikke klarer å skrive "ITEMNUMBER" riktig, så da skulle man bare få velge mellom de valg jeg bestemmer. For andre verdier så skulle man kunne skrive inn sjøl.
Jeg la til en knapp som slides fram, ved trykk på denne så submitter man formet tabellen er en del av til backend. Denne heter "updateData" om noen lurer.
Så, over til jQuery-koden:
Kode
<script type="text/javascript">
/*omfg. lulz to the lol. Edit in place-funskjonalitet for tabellene. */
$(document).ready(function(){
$("div.editable").click(function(){ //Denne funksjonen funker på tekstfeltene som man kan editere selv.
var newInput = "<input type ='text' class='newInput' value=\""+$(this).text()+"\">"; //definerer en string som "erstatter" opprinnelig kode ved trykk
$(this).html(newInput); //selve erstatningsfunkjsonen
var id = $(this).attr("id"); //henter ut id'en til verdien
$("input.newInput").focus(); //setter det nye lagede input-feltet i fokus
$("input.newInput").keydown(function(event){
if(event.which == 13){ //ved trykk på enter...
var value = $(this).val();
var str = id; //Okei, dette er id'en til elementet.
var strArray = str.match(/(\d+)/g); //her plukker jeg ut tallene fra id'en og legger dem i en array så jeg kan bruke dem til å tilegne den nye verdien til riktig input-felt
for(var i = 0;i<strArray.length;i++){ //her looper jeg gjennom arrayen og henter ut hvert enkelt tall. Dette er drittstygt, men igjen; pynte får du gjøre sjøl
if(i == 0){var temp0 = strArray[i];}
if(i == 1){var temp1 = strArray[i];}
}
$("#newValue"+temp0+"_"+temp1).val(value); //her slenger vi den nye verdien til tilegnet hidden-felt.
$(this).blur(); //bare for å loose focus ved entertrykket
slide(); //slider fram update-knappen
}
});
});
});
$(window).load(function(){
var clickFunction = function(){
var id = $(this).attr("id"); //henter id igjen
var select = '<select name="select" id="'+id+'" onChange="changeFunction();">'; //en ny textstring som vi "printer ut" i html og dermed erstatter koden som ligger der fra før..
var options = ["ITEMNUMBER", "GROUP", "ALLITEMS"]; //array med de verdier jeg vil ha inn i dropdownen
for(var i = 0;i<options.length;i++)
select += '<option value="'+options[i]+'">'+options[i]+'</option>';
select += '</select>'; //populerer droipdownen med array-verdiene
$(this).html(select);//skriver ut den stringen
$(this).unbind('click',clickFunction); //unbindfunksjon for click
}
$("div.editable_select").bind('click',clickFunction); //bindfunksjon for click
});
$('#dataTable select[name^="select"]').live('change', (function () { //denne er gull da jeg eliminerte problemet med at onChange fikk for mange "s og 's. Nå er dette selve onChange-funksjonen, sort of
var value1 = ($("option:selected", this).val()); //valgt value i dropdownen heter nå value1
var id = $(this).attr("id"); //henter ut id'en til verdien
var str2 = id;
var str2Array = str2.match(/(\d+)/g); //sammen styggge hack som over
for(var i = 0;i<str2Array.length;i++){
if(i == 0){var temp01 = str2Array[i];}
if(i == 1){var temp11 = str2Array[i];}
}
$("#newValue"+temp01+"_"+temp11).val(value1); //tilegner den nye verdien til tilhørende hidden-felt
slide(); //slider fram update knappen
}));
function slide(){
$("#updateData").slideDown("fast"); //selve funkjsonen som gjør at updateknappen på magisk vis popper opp ved endringer i tabellen
}
$(function(){
$('#updateData').click(function(){
updateFunksjonTilBackend(); //knappens onclick som sender inn formet for update
});
});
/*jepp, det var alt */
Oh. koden for knappen
Kode
<input type="button" name="updateData" id="updateData" value="update data" style="display:none;"/>
Som sagt, det er en del hacks og stygge løsninger. Men, overall så funker det bra. Jeg er ikke en veldig erfaren webutvikler så det finnes sikkert mer elegante lønsinger å gjøre det på (kom gjerne med input og tips til forbedringer).
Men, jeg ville gjøre det selv og ikke bruke feks
jeditable, selv om det sikkert er en mye bedre løsning. Synes også at mine 50-60 linjer med jquery fungerte like så bra for min del som jeditalbe sine mange hundre linjer.
Så, om folk ikke slakter meg totalt hadde det vært hyggelig
Jeg begynte jo på dette ned ~0 jquery-kunnskap. Seriøst, helt grønn
[COLOR="White"]Tilfelle noen googlesøker (lol, verb): jquery, edit in place, dynamic change to html, jquery selectbox, jquery edit[/COLOR]
