✔ jQuery Fehler, Bild aktualisieren funktioniert nicht****?

DonDemf · 30. August 2011

ok, also nochmal, ich habe eig alles so gemacht wiees mir ein javascripter hier aus dem Board gesagt hat:

Inhalt der Textseite: http://fifaplace.pytalhost.com/fifaliga/viewpage.php?page_id=53

Code:

<form>
    <select id="spieler">
            <option value="1101|chmee">chmee</option>
            <option value="2568|DonDemf">DonDemf</option>
            <option value="2454|tutorials">tutorials</option>
        </select>
</form>
<img id="idbild" src="" alt="" title=""/>
<div id="namenausgabe"></div>

Der nötige Javascript, Jquery wird includiert im header per aufstellung.js:

Code:

window.onload = function() {
    formation("4-1-2-1-2")//Default
};
var all = {
    "4-1-2-1-2": {
        x: [33, 145, 274, 392, 215, 378, 50, 215, 313, 116],
        y: [501, 501, 501, 501, 409, 325, 325, 251, 153, 153]
    },
    "4-3-3": {
        x: [33, 145, 274, 392, 212, 365, 54, 212, 392, 35],
        y: [501, 501, 501, 501, 348, 315, 315, 128, 143, 143]
    },
	"4-3-1-2": {
        x: [33, 145, 274, 392, 212, 365, 54, 212, 329, 94],
        y: [501, 501, 501, 501, 348, 315, 315, 226, 125, 125]
    },
	"4-3-2-1": {
        x: [33, 145, 274, 392, 212, 365, 54, 212, 344, 79],
        y: [501, 501, 501, 501, 348, 315, 315, 128, 171, 171]
    }
    //usw.
};
function formation(form) {
    var pos = all[form];
 
    for (var $a = 1; $a < 12; $a++) {
        document.getElementById("s" + $a).style.left = pos.x[$a-1];
        document.getElementById("s" + $a).style.top = pos.y[$a-1];
    }
}
$ ("#spieler").change(
    function(){
        var sid = $("#spieler").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbild").attr("src",imgpurl);
        $("#idbild").attr("alt",data[1]);
        $("#idbild").attr("title",data[1]);
     
        $("#namenausgabe").html(data[1]);
    }
);

leider immer noch nicht das gewünschte ergebnis. Der erste teil der aufstellung.js bezieht sich auf die seite: http://fifaplace.pytalhost.com/fifaliga/viewpage.php?page_id=51

Der Javascript funktioniert auch. Nur das Jquery, welches sich auf den ersten Lnk bezieht ****t nicht...

CPoly · 30. August 2011

Fehlerkonsole sagt "Error: $ is not defined".

Du bindest deine "aufstellung.js" als erstes ein. Die muss aber hinter die jquery.js.

DonDemf · 30. August 2011

Jetzt ist es definitiv nach der jquery.js eingebunden..
http://fifaplace.pytalhost.com/fifaliga/viewpage.php?page_id=53

CPoly · 30. August 2011

Error: jQuery is not defined
Source File: http://fifaplace.pytalhost.com/fifaliga/includes/jscript.js
Line: 43

In der Datei (die vor jQuery eingebunden ist) hast du deinen "aufstellung.js" nochmal doppelt drin

Und wenn es danach immer noch nicht geht: Dein Selektor $("#spieler") wird nichts finden, weil an der Stelle existiert das Element noch nicht. Alles was du mit jQuery machst sollte in die document.ready Funktion:

Javascript:

$(function() {
    //Hier dein Code
});

DonDemf · 30. August 2011

wei nicht genau, was du mit document.ready funktion meinst, ich habe nun folgendes gemacht in aufstellung.js:

Code:

$(function() {
	$ ("#spieler").change(
    function(){
        var sid = $("#spieler").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbild").attr("src",imgpurl);
        $("#idbild").attr("alt",data[1]);
        $("#idbild").attr("title",data[1]);
     
        $("#namenausgabe").html(data[1]);
    }
);
});

und das doppelte bein der daei vorher entfernt.

DonDemf · 30. August 2011

Und siehe da, es klappt! Du bist ein GOTT! vielen DANK! Habe, jetzt ungelogen, seit gestern abend 22uhr ununterbrochen(ja ich habe nicht geschlafen) daran gebastelt.

DonDemf · 30. August 2011

Das einzige was ich jetzt noch gerne verbessern würde ist folgendes:

wenn man die Seite nun betritt erscheint erstmal kein Bild. Wenn man dann jedoch den wert im Dropdown ändert erscheint das bild.

Kann ich es machen, dass sofort das Bild erscheint, des automatisch angewählten Wertes?

edit, hinzufügen:

Ich versuche nun, dass Script auf mein aufstellungsscript zu übertragen, dazu habe ich die spieler.js erweitert auf:

Code:

$(function() {
	$ ("#s1").change(
    function(){
        var sid = $("#s1").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds1").attr("src",imgpurl);
        $("#idbilds1").attr("alt",data[1]);
        $("#idbilds1").attr("title",data[1]);
     
        $("#namenausgabes1").html(data[1]);
    }
);
});

$(function() {
	$ ("#s2").change(
    function(){
        var sid = $("#s2").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds2").attr("src",imgpurl);
        $("#idbilds2").attr("alt",data[1]);
        $("#idbilds2").attr("title",data[1]);
     
        $("#namenausgabes2").html(data[1]);
    }
);
});
$(function() {
	$ ("#s3").change(
    function(){
        var sid = $("#s3").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds3").attr("src",imgpurl);
        $("#idbilds3").attr("alt",data[1]);
        $("#idbilds3").attr("title",data[1]);
     
        $("#namenausgabes3").html(data[1]);
    }
);
});
$(function() {
	$ ("#s4").change(
    function(){
        var sid = $("#s4").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds4").attr("src",imgpurl);
        $("#idbilds4").attr("alt",data[1]);
        $("#idbilds4").attr("title",data[1]);
     
        $("#namenausgabes4").html(data[1]);
    }
);
});
$(function() {
	$ ("#s5").change(
    function(){
        var sid = $("#s5").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds5").attr("src",imgpurl);
        $("#idbilds5").attr("alt",data[1]);
        $("#idbilds5").attr("title",data[1]);
     
        $("#namenausgabes5").html(data[1]);
    }
);
});
$(function() {
	$ ("#s6").change(
    function(){
        var sid = $("#s6").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds6").attr("src",imgpurl);
        $("#idbilds6").attr("alt",data[1]);
        $("#idbilds6").attr("title",data[1]);
     
        $("#namenausgabes6").html(data[1]);
    }
);
});
$(function() {
	$ ("#s7").change(
    function(){
        var sid = $("#s7").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds7").attr("src",imgpurl);
        $("#idbilds7").attr("alt",data[1]);
        $("#idbilds7").attr("title",data[1]);
     
        $("#namenausgabes7").html(data[1]);
    }
);
});
$(function() {
	$ ("#s8").change(
    function(){
        var sid = $("#s8").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds8").attr("src",imgpurl);
        $("#idbilds8").attr("alt",data[1]);
        $("#idbilds8").attr("title",data[1]);
     
        $("#namenausgabes8").html(data[1]);
    }
);
});
$(function() {
	$ ("#s9").change(
    function(){
        var sid = $("#s9").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds9").attr("src",imgpurl);
        $("#idbilds9").attr("alt",data[1]);
        $("#idbilds9").attr("title",data[1]);
     
        $("#namenausgabes7").html(data[1]);
    }
);
});
$(function() {
	$ ("#s10").change(
    function(){
        var sid = $("#s10").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds10").attr("src",imgpurl);
        $("#idbilds10").attr("alt",data[1]);
        $("#idbilds10").attr("title",data[1]);
     
        $("#namenausgabes10").html(data[1]);
    }
);
});
$(function() {
	$ ("#tor").change(
    function(){
        var sid = $("#tor").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbildstor").attr("src",imgpurl);
        $("#idbildstor").attr("alt",data[1]);
        $("#idbildstor").attr("title",data[1]);
     
        $("#namenausgabestor").html(data[1]);
    }
);
});

Sprich ich habe für jeden DropDown Div eine neue funktion gebastelt und sie dementsprechen genannt. ausgabestor, ausgabes2, ausgabes3 etc. Leider zeigt er mir nun keine Bilder an, die Daten werden nun aber auch per php aus der mysql gelesen:

PHP:

echo '<div id="tor" style="position: absolute; left: 213; top: 596; z-index: 1;">
  <select id="tor">';
   mysql_data_seek($spieler2,0);
    while($rowst= mysql_fetch_object($spieler2))
   {
   echo '<option value="'.$rowst->id.'|'.$rowst->name.'">'.$rowst->name.'</option>';
   }
    echo '</select><br />
<img id="idbildstor" src="" alt="" title=""/>
<div id="namenausgabestor"></div>
<br />
</div>';

CPoly · 30. August 2011

Bei der Version, die jetzt online ist, ist wieder die aufstellung.js ganz als erstes.

Zu document.ready: http://api.jquery.com/ready/
Das ist wichtig, wenn man mit jQuery arbeitet.

Um am Anfang ein Bild ausgewählt zu haben, kannst du einfach das "change" Event auslösen, um deine Funktion aufzurufen.

Javascript:

$('#spieler').change();
//Oder auch
$('#spieler').trigger('change');

Du hast im Moment sehr sehr viel doppelten Code (wobei doppelt untertrieben ist)

Den ganzen Code der so aussieht

Javascript:

$(function() {
    $ ("#s1").change(
    function(){
        var sid = $("#s1").val();
        var data = sid.split("|");
        
        var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
        
        $("#idbilds1").attr("src",imgpurl);
        $("#idbilds1").attr("alt",data[1]);
        $("#idbilds1").attr("title",data[1]);
     
        $("#namenausgabes1").html(data[1]);
    }
);
});

unterscheidet sich ja nur durch die eine Zahl!

Das kannst du so ungefähr vereinheitlichen (ungetestet)

Javascript:

$(function() {
	$ ("#s1, #s2, #s3, #s4, #s5").change(
		function(){
			var elemid = this.id.match(/[0-9]+/);
			var sid = this.value;
			var data = sid.split("|");
			
			var imgpurl = "http://fifaplace.pytalhost.com/fifaliga/image/spieler/"+data[0]+".jpg";
			
			$("#idbilds" + elemid)
				.prop("src",imgpurl)
				.prop("alt",data[1])
				.prop("title",data[1]);
			
			$("#namenausgabes" + elemid).html(data[1]);
		}
	);
});

DonDemf · 30. August 2011

Das problem ist, wenn ich die aufstellung.js nicht als erstes mache, akzeptiert firefox sie irendwie nicht.

und der code von dir scheint nicht zu funktionieren, wo du verusuchst die s1, s2 etc usammenzufügen.

DonDemf · 30. August 2011

ich habe jetzt mal den selben code, der auf http://fifaplace.pytalhost.com/fifaliga/viewpage.php?page_id=53 funktionert (unteres dropdown) auf der seite http://fifaplace.pytalhost.com/fifaliga/viewpage.php?page_id=51 eingefügt (dropdown wo nur 3 auswahl möglichkeiten sind->rechts) und es scheint nicht zu funktionieren.
Kann es sein, das der das Bild hinter dem Spielfeld oder ähnliches generiert?

Code von seite 51:

Code:

<div id="s9" style="left: 392px; top: 143px; position: absolute; z-index: 1;">
<form>
    <select id="s9">
            <option value="1101|chmee">chmee</option>
            <option value="2568|DonDemf">DonDemf</option>
            <option value="2454|tutorials">tutorials</option>
        </select>
</form>
<img id="idbilds9" src="" alt="" title=""/>
<div id="namenausgabes9"></div>
</div>

✔ jQuery Fehler, Bild aktualisieren funktioniert nicht****?

DonDemf

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

DonDemf

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

DonDemf

Erfahrenes Mitglied

DonDemf

Erfahrenes Mitglied

DonDemf

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

DonDemf

Erfahrenes Mitglied

DonDemf

Erfahrenes Mitglied

Neue Beiträge