• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Newbie, JS-Ausführen

H

huberlix

Neues Mitglied
Irgendwie krieg ichs nicht hin.
Meine Script-Datei (im Unterordner "scripts") macht einfach gar nix. Hab schon mehrere Dinge probiert. Jetzt hab ich das ganze mal auf einen Button und ein Alert gekürzt. Aber auch das funktioniert nicht. Was mach ich falsch?

HTML:

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width , initial-scale=1">
     <meta charset="UTF-8">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css">
    <!--hier eigene css-->
    <link rel="stylesheet" type="text/css" href="CSS/Eigene.css">
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <!--hier eigene js-->
    <script type=“text/javascript“ src="scripts/eigene.js"></script>
    <script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js"></script>
</head>


<body>
    <div data-role="page" data-theme="d" id="home">
        
        <div data-role="header" id="header">
            <h1>Fuckin' Doko</h1>
        </div>

        <div data-role="content" id="content">
          <a data-role="button" id="button">Test</a>
         </div>
        
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    
</body>
</html>


JS:
$("#home").live('pageinit',function(event) {
$("#button").click(function(){doIt()});
});
function doIt()
{
alert("test");
};

 
huberlix schrieb:
Meine Script-Datei (im Unterordner "scripts") macht einfach gar nix. Hab schon mehrere Dinge probiert. Jetzt hab ich das ganze mal auf einen Button und ein Alert gekürzt. Aber auch das funktioniert nicht. Was mach ich falsch?
HTML: 
<head>
    <!-- ... -->
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <!--hier eigene js-->
    <script type=“text/javascript“ src="scripts/eigene.js"></script>
    <script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js"></script>
</head>
Zum Vergrößern anklicken....
  1. Die Reihenfolge, in der die jQuery-Bibliothek(en) und das individuelle jQuery-Script zu laden sind.
  2. Wenn's im Header, und nicht am Seitenende unmittelbar vor </body></html> steht, dürfte Deinem Script $(document).ready() fehlen - siehe https://learn.jquery.com/using-jquery-core/document-ready/
  3. Und falls der eigene Server nicht über HTTPS, sondern nur HTTP läuft/erreichbar ist, können die externen URLs vom Browser als "Gemischte Inhalte" betrachtet, und aus Sicherheitsgründen blockiert werden.

    Lösung, URL ohne http:-/https:-Protokoll angeben:
    HTML: 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js"></script>
<!--hier eigene js-->
<script type="text/javascript" src="scripts/eigene.js"></script>
 
Und noch ein Tipp: Suche dir möglichst keine Tutorials die älter als zwei Jahre sind.

Die oben aufgeführte Methode live() war schon veraltet, als ich mich noch mit jQuery beschäftigte und auch das liegt schon längere Zeit zurück.
 
@Spicelab:

1. Auf der JqueryMobile-Doc steht, dass eigene Scripts vor der Mobile-Script geladen werden müssen!?
Welche Reihenfolge müsste ich deiner Mainung nach laden?
Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded. Thus, we recommend linking to your JavaScript files in the following order:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Zum Vergrößern anklicken....

2. JQueryMobile-Doc:
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
Zum Vergrößern anklicken....
Also das Live-Ereignis ist eigentlich das Ready Ereignis. Vielleicht verwende ich es ja falsch!? Syntax?

3. Ich verwende Dreamweaver. Dann müsste es aber doch im in der Live-Vorschau innerhalb DW wenigstens funktionieren. Aber auch da passiert nix.

@Tronjer:
Also in der offiziellen Doc gibt es live() noch. JQueryMobile-Doc:
jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using live() or bind().
Zum Vergrößern anklicken....


Hab jetzt mal .bind benutzt. Funktioniert genausowenig:


$("#home").bind('pageinit',function(event) {
$("#button").click(function(){doIt()});
});
function doIt()
{
alert("test");
};
 
huberlix schrieb:
@Spicelab:

1. Auf der JqueryMobile-Doc steht, dass eigene Scripts vor der Mobile-Script geladen werden müssen!?
Welche Reihenfolge müsste ich deiner Mainung nach laden?


2. JQueryMobile-Doc:

Also das Live-Ereignis ist eigentlich das Ready Ereignis. Vielleicht verwende ich es ja falsch!? Syntax?

3. Ich verwende Dreamweaver. Dann müsste es aber doch im in der Live-Vorschau innerhalb DW wenigstens funktionieren. Aber auch da passiert nix.

@Tronjer:
Also in der offiziellen Doc gibt es live() noch. JQueryMobile-Doc:


Hab jetzt mal .bind benutzt. Funktioniert genausowenig:


$("#home").bind('pageinit',function(event) {
$("#button").click(function(){doIt()});
});
function doIt()
{
alert("test");
};
Zum Vergrößern anklicken....

jQuery Mobile ist ein Relikt vergangener Tage.
"mobileinit" != "pageinit".
$.live() ist zwar in der Doku, aber kategorisiert unter "Deprecated" -> "Veraltet".
Die Dreamweaver Live-Vorschau solltest du noch nicht mal anrühren. Großen Bogen um alle WYSIWYG Editoren machen!

Zum eigentlichen Problem, da du die Scripts im <head> einbindest, existiert zum Zeitpunkt der Scriptausführung noch kein Element '#home', daher kann das Event auch mit keinem Element verknüpft werden. Lösung: "eigene.js" erst vor dem schließenden Body-Tag einbinden. Hat @Spicelab eh bereits in seiner Antwort geschrieben...
 
OK, hab jetzt das Script direkt vor </body> geladen
....
....
<script type=“text/javascript“ src="scripts/eigene.js"></script>
</body>
</html>

und die scriptdatei geändert:

$(document).on( "pageinit", "#home", function( event ) {
alert( "This page was just enhanced by jQuery Mobile!" );
});

function doIt()
{
alert("test");
};


Geht trotzdem nix. weder in DW, noch auf dem Server.
 
huberlix schrieb:
OK, hab jetzt das Script direkt vor </body> geladen
....
....
<script type=“text/javascript“ src="scripts/eigene.js"></script>
</body>
</html>

und die scriptdatei geändert:

$(document).on( "pageinit", "#home", function( event ) {
alert( "This page was just enhanced by jQuery Mobile!" );
});

function doIt()
{
alert("test");
};


Geht trotzdem nix. weder in DW, noch auf dem Server.
Zum Vergrößern anklicken....

So, war jetzt ziemlich mühsam eine funktionierende Kombination aus jQuery und jQuery Mobile zu finden:
https://jsfiddle.net/4ov19thh/
jQuery: 2.2.4
jQuery Mobile: 1.4.5

Sieh nächstes mal einfach in die Browserkonsole.
 
scbawik schrieb:
So, war jetzt ziemlich mühsam eine funktionierende Kombination aus jQuery und jQuery Mobile zu finden:
https://jsfiddle.net/4ov19thh/
jQuery: 2.2.4
jQuery Mobile: 1.4.5

Sieh nächstes mal einfach in die Browserkonsole.
Zum Vergrößern anklicken....
Weil für's ungeübte Auge auf den ersten Blick nicht so richtig ersichtlich/greifbar ist, wo im Fiddle alle Scripts sich verstecken :D

External Resources (Frame links - klickbar)
  • https://code.jquery.com/jquery-2.2.4.min.js
  • https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
JAVASCRIPT-settings- (Frame links unten - klickbar)
 
Habs jetzt rausgefunden: Die eigene.js wurde nicht geladen.
type=“text/javascript“ ist das Problem
<script type=“text/javascript“ src="scripts/eigene.js"></script> funktioniert nicht
<script src="scripts/eigene.js"></script> funktioniert
 
huberlix schrieb:
Habs jetzt rausgefunden: Die eigene.js wurde nicht geladen.

<script type=“text/javascript“ src="scripts/eigene.js"></script> funktioniert nicht
<script src="scripts/eigene.js"></script> funktioniert
Zum Vergrößern anklicken....
Fällt Dir hier (allein schon am zweifarbigen Attributwert gegenüber dem ansonsten roten) nichts auf?
HTML: 
<script type=“text/javascript“ src="scripts/eigene.js"></script>
Anderes Beispiel:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_external - funktioniert
https://www.w3schools.com/code/tryit.asp?filename=FDO28AH4IXJO - funktioniert plötzlich nicht mehr

... noch immer nicht den Unterschied entdeckt?

“ != "
huberlix schrieb:
type=“text/javascript“ ist das Problem
Zum Vergrößern anklicken....
Fazit: type="text/javascript" ist überhaupt kein Problem.
HTML: 
<script type="text/javascript" src="scripts/eigene.js"></script>
PS: Hätte den Fehler eigentlich von Beginn an in meiner Liste aufnehmen müssen :p
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben