Dynamische Inhalte mit for-schleife generieren


preko

Erfahrenes Mitglied
#1
Hallo,

ich möchte eine dynamische Ausgabe des folgenden Codes per JavaScript generieren lassen:
Javascript:
$(document).ready(function(){
    var date_input=$('input[name="mod_1_start"]');
    var container=$('.bootstrap-iso form').length>0 ? $('.kurse').parent() : "body";
    date_input.datepicker({
        language: "de",
        container: container,
        todayHighlight: true,
        clearBtn: true,
        autoclose: true,
        daysOfWeekDisabled: [0],
        datesDisabled: [],   
        startView: 1,
        assumeNearbyYear: true
    })
})   

$(document).ready(function(){
    var date_input=$('input[name="mod_1_ende"]');
    var container=$('.bootstrap-iso form').length>0 ? $('.kurse').parent() : "body";
    date_input.datepicker({
        language: "de",
        container: container,
        todayHighlight: true,
        clearBtn: true,
        autoclose: true,
        daysOfWeekDisabled: [],
        datesDisabled: [],   
        startView: 1,
        assumeNearbyYear: true
    })
})
Da ich dies jedoch nicht x-Mal händisch eintragen möchte, sondern Bedarfsgerecht, soll diese Ausgabe in einer FOR-Schleife eingebunden werden. Meine Vorstellung ist so etwas:

Javascript:
var modules = 10; 
        
for (var i = 1;i <= modules;i++) {   
    $(document).ready(function(){
        var date_input=$('input[name="mod_ + modules + _start"]');
        var container=$('.bootstrap-iso form').length>0 ? $('.kurse').parent() : "body";
        date_input.datepicker({
            language: "de",
            container: container,
            todayHighlight: true,
            clearBtn: true,
            autoclose: true,
            daysOfWeekDisabled: [0],
            datesDisabled: [],   
            startView: 1,
            assumeNearbyYear: true
        })
    })   

    $(document).ready(function(){
        var date_input=$('input[name="mod_ + modules + _ende"]');
        var container=$('.bootstrap-iso form').length>0 ? $('.kurse').parent() : "body";
        date_input.datepicker({
            language: "de",
            container: container,
            todayHighlight: true,
            clearBtn: true,
            autoclose: true,
            daysOfWeekDisabled: [],
            datesDisabled: [],   
            startView: 1,
            assumeNearbyYear: true
        })
    }) 
}
Dies ist ein Teil eines Kalenderscripts, welches diverse Inputfelder mit einem Kalender ausstattet innerhalb eines HTML/PHP-Formulars. Das Problem ist, dass das Ganze nicht entsprechend dynamisch ausgegeben wird, sprich wie in diesem konstruierten Fall von 10 "Durchläufen".

Ich vermute, dass es ein Problem in diesem Bereich ist: ="mod_ + modules + _start", und "mod_ + modules + _ende", wo irgendwo die Anführungszeichen falsch gesetzt sind. Hat jemand einen Tipp für mich?

Beste Grüße!
 

basti1012

Erfahrenes Mitglied
#2
Sollte man die Zeilen nicht so machen ??
Code:
 var date_input=$('input[name="'+mod_ + modules + _start+'"]');
     var date_input=$('input[name="'+mod_ + modules + _ende+'"]');
mehr sehe ich gerade auf der schnelle nicht
 

preko

Erfahrenes Mitglied
#5
@basti1012:
Nein, ist noch nicht online. Habe aber aufgrund des gravierenden Zeitmangels das Ganze mit einer PHP Ausgabe realisiert, die den JavaSript-Code mit PHP-Variablen ausgibt. Quick & dirty, aber funktionierend. Vielen Dank nochmals!
PHP:
$modules = 10;

for ($i = 1; $i <= $modules; $i++) {   
        echo "
        $(document).ready(function(){
            var date_input=$('input[name=\"mod_" . $i . "_start\"]');
            var container=$('.bootstrap-iso form').length>0 ? $('.kurse').parent() : \"body\";
            date_input.datepicker({
                language: \"de\",
                container: container,
                todayHighlight: true,
                clearBtn: true,
                autoclose: true,
                daysOfWeekDisabled: [0],
                datesDisabled: [],   
                startView: 1,
                assumeNearbyYear: true
            })
        })   

        $(document).ready(function(){
            var date_input=$('input[name=\"mod_" . $i . "_ende\"]');
            var container=$('.bootstrap-iso form').length>0 ? $('.kurse').parent() : \"body\";
            date_input.datepicker({
                language: \"de\",
                container: container,
                todayHighlight: true,
                clearBtn: true,
                autoclose: true,
                daysOfWeekDisabled: [],
                datesDisabled: [],   
                startView: 1,
                assumeNearbyYear: true
            })
        })"; 
    }
Aber jetzt wo ich das gerade schreibe, glaube ich den Fehler im Javascript gefunden zu haben. :eek:

Es müsse wohl statt:
var date_input=$('input[name="mod_ + modules + _ende"]'); tatsächlich
var date_input=$('input[name="mod_ + i + _ende"]');
lauten, da ansonsten die Gesamtanzahl der Module (in diesem Falle 10 - Variable "modules") und nicht die aufsteigende Iteration (Variable "i") eingesetzt wird!

Naja, höchste Zeit für Feierabend! :D
 

Neue Beiträge