[Django] Probleme mit js aufruf im template system

[zerocity]

hmm wie fange ich an ....

In meinem Projekt sollen Konzentrationen umgerechnet werden was an sich nicht schwer is . Das problem liegt daran das ich nicht nur eine Konzentration umrechnen muss sondern mehrere.
Bis jetzt habe ich den function mit onclick aufgerufen das is eigentlich keine schöne Lösung da die Daten von Anfang an so dastehen sollten nicht erst beim click. onload gibt es nicht auf nem <a> / div ... nur auf dem body .

Natürlich könnte ich von python her alles ausrechnen lassen nur wie speichere ich das ab ? Ich habe das schon mal alles in ein dict abgespeichert. Nur der Zugriff via dem Template System war nicht gerade sehr ideal.


Bis jetzt habe ich das so gelöst

Code: Alles auswählen

function unit_converter(unit)
{
....
}

function calculate(id,id2,id3,id4) {
    AAA_weight = $(id).text();
    AAA_vol = $(id2).text();
    AAA_vol_unit = $(id3).text();
    AAA_factor = unit_converter(AAA_vol_unit);

    AAA_weight = AAA_weight.replace(",",".");
    AAA_vol = AAA_vol.replace(",",".");

    AAA_result = parseFloat(AAA_weight) * parseFloat(AAA_vol) * AAA_factor ;
    $(id4).text(AAA_result+"g/"+AAA_vol+ " "+AAA_vol_unit);
}

{%  for sol in data.solution_material_composition.all %}
                            <li>
                                <table>
                                       <tr>
                                            <th>{{ sol.title }} </th>
                                            <th>
                                                <span class="sol">Total Volume : </span>
                                                <span class="sol" id="{{ sol.id}}-vol">{{sol.vol}}</span>
                                                <span class="sol" id="{{ sol.id}}-vol-unit">{{sol.unit_vol}}</span>
                                            </th>
                                        </tr>
                                </table>
                                <div class="comp">
                                <table>
                                        <tr>
                                            <th>Compounds</th>
                                            <th>weight</th>
                                            <th>concentration</th>
                                            <th>costom</th>
                                        </tr>
                                             {% for comp in sol.chemical_composition.all %}
                                         <tr>
                                            <td>{{ comp.compartment.name }}</td>
                                            <td><span id="{{comp.compartment.id}}">{{ comp.weight }}</span><span>g/L</span></td>
                                            <td>{{comp.concentration  }} {{ comp.unit_concentration }}</td>
                                            <td>
<a href="#" onclick="calculate('#{{comp.compartment.id}}','#{{ sol.id}}-vol','#{{ sol.id}}-vol-unit','#{{comp.compartment.id}}-a');" >
                                                <span id="{{comp.compartment.id}}-a">  g/{{sol.vol}}{{sol.unit_vol}}</span>
                                            </a></td>
                                        </tr>
                                           {% endfor %}
                                    </table>
                                </div>
                             </li>
                        {% endfor %}

ich danke euch schon mal für eure Hilfe

Gruß Zerocity

[sma]

Was sollen denn die "AAA" vor den globalen Variablen in der JavaScript-Funktion? Willst du nicht lieber lokale Variablen benutzen? So zum Beispiel:

Code: Alles auswählen

    function calc(weightId, volId, volUnitId, resultId){
        function toF(id){
            return parseFloat($(id).text().replace(",", ".")); 
        }
        var weight = toF(weightId), 
            vol = toF(volId),
            volUnit = $(volUnitId).text(),
            result = weight * vol * unitConverter(volUnitId);
        $(resultId).text(result + "g/" + vol + " " + volUnitId);
    }

Noch besser wäre es aber IMHO, den ganzen jQuery-Kram aus der Funktion herauszuhalten. Sagen wir, du hast dafür eine Funktion calucate():

Code: Alles auswählen

    function calculate(){
        calc('#{{comp.compartment.id}}','#{{ sol.id}}-vol','#{{ sol.id}}-vol-unit','#{{comp.compartment.id}}-a');
    }

Nun binde diese auch mit jQuery und ohne "onclick"-Handler an den Link und dann kannst du die doch auch bei domReady aufrufen, also:

Code: Alles auswählen

    $(function(){
        $('#deinHandler').click(calculate);
        calculate();
    });

Irgendwie durchschaue ich aber noch nicht den Sinn darin, Dinge im Browser auszurechnen, wenn da nirgendwo ein Eingabefeld ist, über das man auch die Werte ändern kann, sodass eine Neuberechnung innerhalb der Seite überhaupt Sinn macht.

Stefan

[DasIch]

Du solltest Javascript von den Templates trennen. Andernfalls schickst du zu viele unnotige Daten hin und her, die der Browser cachen konnte.