Variable ID - jQuery Mask Plugin

mrfogel · 30. Juli 2014

Hallo,

nun stehe ich erneut vor einem Problem.

Die Seite ist die Selbe wie im Beitrag davor. Nun möchte ich dass die neu hinzugefügten Textfelder mit dem jQuery Mask Plugin maskiert werden.
Ich habe es soweit hinbekommen, das ich variable Masken erstelle:

JavaScript

//Erstellen der Maskierung 
if(legungsmultiplikatorMc == 2){ 
for (i = 0; i < (legungsmultiplikatorFinal / 2); i++) 
{ 
legungsMaske = legungsMaske + "9-9/"; 
} 
}else { 
for (i = 0; i < (legungsmultiplikatorFinal / 4); i++) 
{ 
legungsMaske = legungsMaske + "9-9-9-9/"; 
} 
} 
legungsMaske = legungsMaske + "/"; 




console.log(legungsMaske);

Alles anzeigen

Diese kann ich mir auch problemlos ausgeben lassen. Jetzt zu meinem Problem. Ist es möglich, dass ich, für das Eingabefeld, dass maskiert werden soll, eine Variable verwende?

JavaScript

$(function($){ 
$('Hier soll eine Variable-ID stehen').mask(legungsMaske,{placeholder:" "}); 
});

Ich hab schon etliche Kombinationen versucht, aber nichts funktioniert. Hatte schonmal jemand ein ähnliches Problem und weiß eine Lösung oder ein gutes Work-Arround?

Vielen Dank schonmal!

Basi · 30. Juli 2014

Wenn du uns noch verrätst auf welchen Ebenen die beiden Codes ausgeführt werden (Global, in einer Funktion, etc.) dann ist die Hilfe etwas einfacher möglich. Es erschließt sich nicht besonders gut wie die beiden Codes in Zusammenhang stehen.

mrfogel · 30. Juli 2014

Tut mir Leid, manchmal ist es Recht schwer nachzudenken, und zu merken, dass alle anderen ja nicht die Datei vor den Augen haben^^

JavaScript

function updateLegung(legungsId) 
{ 
//Falls eine Legung neu erstellt werden soll, ist de Uebergabewert == Null. 
if (legungsId == 0){ 




//Es wird die Anzahl der Legungen iteriert. 
anzahlLegungen++; 
//Initialisierung von Hilfsvariablen. 
var m = anzahlLegungen; 
var n = anzahlLegungen.toString(); 




//Der spaetere Namen fuer diese Legung wird erstellt. 
var lengthName = "length_" + n; 
var legebarrenName = "legebarren_" + n; 
var legungName = "legung_" + n; 
var stueckzahlName = "anzahl_" + n; 
var tabelleName = "tabelle_" + n; 







//Jetzt werden die Eingabefelder erstellt. 
var einzufuegendeLength = document.createElement("input"); 
var einzufuegendeLegebarren = document.createElement("select"); 
var einzufuegendeLegung = document.createElement("input"); 
var einzufuegendeStueckzahl = document.createElement("input"); 




//Attribute werden zugewiessen. 
einzufuegendeLength.type = "number"; 
einzufuegendeLength.name = "Die gewünschte Rapportlänge"; 
einzufuegendeLength.id = lengthName; 
einzufuegendeLength.step = "2"; 




einzufuegendeLegebarren.name = "Der gewünschte Legebarren"; 
einzufuegendeLegebarren.id = legebarrenName; 
//HIER NOCH WERTE EINFUEGEN!!! 
einzufuegendeLegebarren.options[0] = new Option(""); 




einzufuegendeLegung.type = "text"; 
einzufuegendeLegung.name = "Die gewünschte Legung"; 
einzufuegendeLegung.id = legungName; 
einzufuegendeLegung.maxLength = ""; 
einzufuegendeLegung.size = "10"; 




einzufuegendeStueckzahl.type = "number"; 
einzufuegendeStueckzahl.name = "Die gewünschte Anzahl"; 
einzufuegendeStueckzahl.id = stueckzahlName; 







//Jetzt werden die Objekte in die bestehende Tabelle angefuegt. 
var table = document.getElementById("tabelleLegung"); 
var lastRow = numRows("tabelleLegung"); 
var row_0 = table.insertRow(lastRow); 
var row_1 = table.insertRow(lastRow + 1); 
var row_2 = table.insertRow(lastRow + 2); 
var cell_00 = row_0.insertCell(0); 
var cell_01 = row_0.insertCell(1); 
var cell_10 = row_1.insertCell(0); 
var cell_11 = row_1.insertCell(1); 
var cell_20 = row_2.insertCell(0); 
var cell_21 = row_2.insertCell(1); 
var cell_22 = row_2.insertCell(2); 
var tdhtml1 = document.createElement("td"); 
var tdhtml2 = document.createElement("td"); 
var tdhtml3 = document.createElement("td"); 




tdhtml1.innerHTML = "Rapportlänge:"; 
tdhtml2.innerHTML = "Legebarren:"; 
tdhtml3.innerHTML = ""; 







cell_00.appendChild(tdhtml1); 
cell_01.appendChild(einzufuegendeLength); 
cell_10.appendChild(tdhtml2); 
cell_11.appendChild(einzufuegendeLegebarren); 
cell_20.appendChild(tdhtml3); 
cell_21.appendChild(einzufuegendeLegung); 
cell_22.appendChild(einzufuegendeStueckzahl); 







//Jetzt werden noch zusaetzliche Attribute gesetzt. 
document.getElementById(legungName).setAttribute("required", "required"); 
document.getElementById(lengthName).setAttribute("required", "required"); 
document.getElementById(stueckzahlName).setAttribute("required", "required"); 
document.getElementById(legebarrenName).setAttribute("required", "required"); 




//Jetzt wird noch der Eventlistener angehaengt. 
document.getElementById(legungName).addEventListener("focus", function(){ 
updateLegung(m); 
} 
); 




} else { 




//Initialisierung von der Maximalen Laenge und den Legungsmultiplikatoren 
var legungsName = "legung_" + legungsId; 
var maximaleLaenge = null; 
var i = null; 
var legungsmultiplikatorRapport = null; 
var legungsmultiplikatorFinal = null; 
var rapportlaenge = "length_" + legungsId; 
var legungsMaske = ""; 




//Erfassung der maximalen Laenge und des finalen legungsmultiplikators 
legungsmultiplikatorRapport = document.forms['formular'][rapportlaenge].value; 
legungsmultiplikatorFinal = (legungsmultiplikatorRapport * legungsmultiplikatorMc); 
maximaleLaenge = (2 * legungsmultiplikatorFinal) + 1; 




//Die maximale Laenge des Feldes wird angepasst. 
document.forms['formular'][legungsName].maxLength = maximaleLaenge; 







//Erstellen der Maskierung 
if(legungsmultiplikatorMc == 2){ 
for (i = 0; i < (legungsmultiplikatorFinal / 2); i++) 
{ 
legungsMaske = legungsMaske + "9-9/"; 
} 
}else { 
for (i = 0; i < (legungsmultiplikatorFinal / 4); i++) 
{ 
legungsMaske = legungsMaske + "9-9-9-9/"; 
} 
} 
legungsMaske = legungsMaske + "/"; 




//Konsolenausgabe 
console.log(legungsMaske); 




//Jetzt wird das Textfeld maskiert 
$(function($){ 
$("#legungName").mask(legungsMaske,{placeholder:" "}); 
}); 




} 
}

Alles anzeigen

Ich habe einen Button im Formular der der diese Funktion mit dem Übergabewert 0 aufruft. Dann werden ein paar weitere Eingabefelder erneut in die Tabelle eingefügt. Immer wenn der Focus auf bestimmte Input-Felder kommt, wird der die Funktion mit der entsprechenden Nummerierung aufgerufen. Also beim zweiten entsprechenden Input-Feld dann mit dem Übergabewert 1. Ich hoffe das ist soweit verständlich.

Jetzt hätte ich auch noch gerne, dass diese Felder maskiert werden. Wie sie maskiert werden, habe ich, wie oben zu sehen, schon hinbekommen. Aber leider weiß ich jetzt nicht ("#legungName") dynamisch verändern kann. Eine variable ist dort ja nicht erlaubt. Wenn ich statisch z.B.: ("#legung_1") festlege funktioniert es für dieses Feld.

Basi · 30. Juli 2014

In Zeile 86 nutzt du doch legungName (beinhaltet die ID des Containers), diese Variable kannst du doch weiter unten immer noch nutzen?

mrfogel · 30. Juli 2014

Das war auch meine erste Überlegung, leider funktioniert es nicht.

JavaScript

$(function($){
$(legungName).mask(legungsMaske,{placeholder:" "});
});

Wenn ich das so schreibe, wird das Eingabefeld leider nicht maskiert.

Edit: mal die zwei Variablen legungsName und legungName. mal zu einer zusammen gefasst^^

Basi · 30. Juli 2014

Einfach in der anonymen Funktion mal übergeben:

JavaScript

$(function(legungName) {

Und auch in der anonymen Funktion mal legungName in der Kosnole loggen.

mrfogel · 30. Juli 2014

Ich glaube mein Gehirn ist am Ende Ich steh immer noch auf dem Schlauch, tut mir leid.

JavaScript

$(function(legungname){
	$(legungName).mask(legungsMaske,{placeholder:" "});
});

So, oder habe ich was vergessen?

Basi · 30. Juli 2014

Groß/Kleinschreibung beachten bei Variablen

JavaScript

$(function(legungName, legungsMaske){
  $(legungName).mask(legungsMaske,{placeholder:" "});
  console.log(legungName);
  consoloe.log(legungsMaske);
});

mrfogel · 30. Juli 2014

Vielen Dank für deine Hilfe. Für mich ist es jetzt echt zu spät.
Ich hab deine Tipp jetzt soweit übernommen, aber jetzt meldet er einen Fehler: TypeError: input.data(...) is not a function in der jquery.maskedinput.js in Zeile 79.
Die Datei ist hier zu finden, an dieser habe ich bis jetzt nichts geändert.

Als Einsteiger in dieses Thema ist das mir jetzt sehr komplex

Basi · 30. Juli 2014

Leider kenne ich mich mit der Erweiterung absolut nicht aus und habe gerade auch keine Zeit mir das durchzulesen, werde ich bei Gelegenheit tun und dann entsprechend antworten wenn sich auch sonst niemand auskennt.

mrfogel · 31. Juli 2014

Zitat von Basiii

Leider kenne ich mich mit der Erweiterung absolut nicht aus und habe gerade auch keine Zeit mir das durchzulesen, werde ich bei Gelegenheit tun und dann entsprechend antworten wenn sich auch sonst niemand auskennt.

Ja klar, das du das für mich machst, hatte ich auch nicht erwartet

Heute morgen frisch, habe ich nun auch endlich die Lösung gefunden! Der Fehler war, dass ich hier:

JavaScript

$(function(){ 
$(legungName).mask(legungsMaske,{placeholder:" "}); 
});

zwar die richtige ID des Inputfeldes mit übergeben, aber natürlich wenn ich eine ID verwende ja "#" vor der ID stehen muss, damit klar ist, was ich ansprechen will. Wenn ich das so anstelle:

JavaScript

$(function(){ 




var maske_test = "#" + legungName; 
console.log(maske_test); 
$(maske_test).mask(legungsMaske,{placeholder:" "}); 
console.log(legungName); 
console.log(legungsMaske); 
});

Alles anzeigen

funktioniert es einwandfrei! Vielen Dank für die Hilfe

Basi · 31. Juli 2014

Schön dass es funktioniert, ich würde mir noch die eine Zeile sparen:

JavaScript

$("#"+ legungName).mask(...

Variable ID - jQuery Mask Plugin

Jetzt mitmachen!

Teilen