.js Datei erstellen

Thema wurde von Richard--, 28. August 2017 erstellt.

  1. Richard--

    Richard-- Aktives Mitglied

    Registriert seit:
    12. Februar 2017
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    11
    #1 Richard--, 28. August 2017
    Zuletzt von einem Moderator bearbeitet: 29. August 2017
    Hey, vielen Dank schonmal für eure Hilfe.

    Nun zu meinem Problem: Ich habe mit Hilfe eines Tutorials eine .js-Datei erstellt um eine Anmeldemaske auszuwerten, welche ich auch schon im HTML-Editor erstellt habe. Den text an sich habe ich hinbekommen, allerdings kann ich Ihn nicht testen, da ich nicht weiß, was ich noch alles außer dem reinen verarbeitenden Text da rein schreiben muss ,bzw wo ich diese Javascript-datei einbinden muss. Muss dies im Header geschehen oder an einer anderen Stelle.
    Da ich im Forum leider nicht fündig geworden bin habe ich hier mal das Thema erstellt:


    Hier mein Quelltext:

    Code:
    <script>
        $('frmkontakt').submit(funtion(){
        var formConrtol = true;
        var frmGrpVorname = $('frmGrpVorname');
        var frmGrpNachname = $('frmGrpNachname');
        var frmGrpEmail = $('frmGrpEmail');
        frmGrpVorname.removeClass('has-error');
        frmGrpNachname.removeClass('has-error');
        frmGrpEmail.removeClass('has-error');
        var vorname =$('#vorname').val();
        var nachname =$('#nachname')val();
        var email =$('#email')val();
        if(vorname == '')
        {
        frmControl = false;
        frmGrpVorname.addClass('has-error');
        }
        if(nachname == '')
        {
        frmControl = false;
        frmGrpNachname.addClass('has-error');
        }
        if(email == '')
        {
        frmControl = false;
        frmGrpEmail.addClass('has-error');
        }
        if(fromConrtol){
            $.ajax({
                type: 'POST'
                url: 'php/absenden.php'
                data {vorname:vorname, nachname:nachname, email:email}
            }).done(funtcion(message){
                var erfolgsmeldung = $('#erfolgsmeldung');
                erfolgsmeldung.html(message);
                erfolgsmeldung.addClass('alert')
                erfolgsmeldung.addClass('alert-success')
            });
        }
        return false;
        });
    
    </script>

    Gruß
    Richard
     
  2. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Du hast im Template Ordner einen Usermod Bereich für eigene CSS und eigene JS Dateien.
    Darin sind unterordner für versch. Stellen im Shop. Einfach deine JS Datei in den unterordner wo sie geladen werden soll. dann macht der Shop das.
    Global wenn du es für alle Seiten brauchst. Wenn nur auf bestimmten dann auch nur in diesen Ordner, damit nicht unnötig auf anderen Seiten mitgeladen werden muss.
     
  3. Richard--

    Richard-- Aktives Mitglied

    Registriert seit:
    12. Februar 2017
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    11
  4. Richard--

    Richard-- Aktives Mitglied

    Registriert seit:
    12. Februar 2017
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    11
    Hey, ich habe die .js datei nun im Ordner templates/honeygrid/usermod/javascript/global/ gespeichert.

    Wie kann ich diese nun auf meiner Seite aufrufen? Muss ich dazu im HTML-Text die .js-Datei erwähnen?
     
  5. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    nein - caches vom SHop und Browser leeren, dann wird die autom. mit geladen. man muss die usermod JS Dateien nicht extra aufrufen um die einzubinden dafür ist der usermod Ordner da. Dateien die dort abgelegt werden läd der shop autom. an der Stelle mit die der Ordnername angibt.
    In der Datei darf nur reines JS sein, bzw. in einer CSS Datei dann nur das CSS keinerlei html elemente.

    Du solltest die Funktion deines JS nun im Content deiner Wahl nutzen können.
     
  6. Richard--

    Richard-- Aktives Mitglied

    Registriert seit:
    12. Februar 2017
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    11
    Hallo Dennis erst einmal danke für deine Hilfe

    Die .js-datei sieht immer noch aus wie oben. Sie heißt jetzt emailprotokoll_test.js

    der Pfad bei uns ist /templates/honeygrid/usermod/javascript/global/emailprotokoll_test.js
    Diesen haben wir jetzt in Gambio SEO-Trackingcodes eingefügt:

    Code:
    <script src="/Zwischenspeicher/templates/honeygrid/usermod/javascript/global/emailprotokoll_test.js" ></script>
    Zwischenspeicher ist dabei der Ordner auf unserer Domain in dem der Shop liegt. Leider funktioniert immer noch nichts. Muss eventuell der Code zu
    Code:
    <script src="https://aesthedicated.com/templates/honeygrid/usermod/javascript/global/emailprotokoll_test.js" ></script>
    bzw:
    Code:
    <script src="/templates/honeygrid/usermod/javascript/global/emailprotokoll_test.js" ></script>
    geändert werden. Bzw muss der Link woanders gesetzt werden, oder kann es sein, dass unsere .js-Datei falsch aufgebaut ist?
     
  7. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    warum? Das script wird durch das ablegen im usermod doch schon geladen

    du hast da oben 3 mal die Datei eingebunden.
    Die muss man nicht einbinden die is schon im globalen JS drinnen. du musst nur das html einbinden das diese JS Funktion benötigt.
    deine html Maske muss das JS auch nnutzen.
    Kann auch sein das du JS fehler hast weil du es nun 3 mal eingebunden hast.
    Da müsstest mal inder Console vom Broser schauen.
     
  8. Richard--

    Richard-- Aktives Mitglied

    Registriert seit:
    12. Februar 2017
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    11
    Also ich haben jetzt nochmal alles entfernt, da ich feststellen mussten, dass die Datei bestimmte Funktionen des Shops ausschaltet, auch wenn ich keine Verlinkung setzen.

    In diesem konkreten Fall nutze ich die Datei um folgende Daten auf Vollständigkeit zu testen und würde ich sie gern nur auf dieser Seite einbinden:

    Bildschirmfoto 2017-08-29 um 13.36.24.png

    Der HTML-Text im Content-manager ist folgender:
    Code:
    <form role="form" id="frmContact"> <!-- Formular Beginn -->
        <div class='row'>
            <div class='col-md-6'>
            <div id ="successnotify"></div>
                <form>
                    <div class="form-group" id="frmGrpVorname">
                         <label for="vorname" class="control-label">Vorname</label>
                         <input type="text" id="vorname" class="form-control"
                            placeholder="Dein Vorname">
                    </div>
           
                    <div class="form-group" id="frmGrpNachname">
                         <label for="vorname" class="control-label">Nachname</label>
                      <input type="text" id="vorname" class="form-control"
                        placeholder="Dein Nachname">
                    </div>
               
                    <div class="form-group" id="frmGrpEmail">
                         <label for="vorname" class="control-label">Email</label>
                         <input type="email" id="vorname" class="form-control"
                           placeholder="Deine E-Mail">
                     </div>
                        
                    <div class="g-recaptcha" data-sitekey="meinsitekey"></div>
                   
                    <div class="form-group text-left">
                     <button
                          type="submit"
                          id="submitBtn"
                          class="btn btn-primary btn-lg">
                               Absenden
                         </button>
                     </div>
                </form>
            </div>
        </div>
    unser Java--scriptcode hier nochmal:

    Code:
    $(function () {
         $( '#frmContact').submit( function() {
              var formControl = true;
            
                                     var frmGrpVorname = $('#frmGrpVorname')
                                     var frmGrpNachname = $('#frmGrpNachname')
                                     var frmGrpEmail = $('#frmGrpEmail')
                                   
                                     frmGrpVorname.removeClass ('has-error);
                                     frmGrpNachname.removeClass ('has-error);
                                     frmGrpEmail.removeClass ('has-error);
                                 
                                     var vorname = $('#vorname').val();
                                     var nachname = $('#nachname').val();
                                     var email = $('#email').val();
                                     var isHuman = grecaptcha.getResponse();
                                   
                                     If (vorname == '') {
                                     formControl = false
                                     frmGrpVorname.addClass ('has-error');
                                      }
                                   
                                     If (nachname == '') {
                                     formControl = false
                                     frmGrpNachname.addClass ('has-error');
                                     }
                                   
                                     If (email == '') {
                                     formControl = false
                                     frmGrpEmail.addClass ('has-error');
                                     }
                                   
                                     if(isHuman.length == 0) {
                                     formControl = false;
                                     }
                                   
                                     if (formControl) {
                                   
                                     $.ajax ({
                                     type: 'POST'
                                     url: '/absenden.php'
                                     data: { vorname:vorname, nachname:nachname, email:email, isHuman:isHuman}
                                     }) .done(function(message){
                                     var successnotify = $('successnotify');
                                     successnotify.html(message);
                                     successnotify.addClass('alert');
                                     successnotify.addClass('alert-success');
                                     });
                                 
                                   
                                    }
                                 
                                   
                                    return false;
         } );
    });
    Da das Einfügen in usermod/global/ nicht funktioniert hat weiß ich leider nicht weiter, was zu tun ist, über Ideen und Anregungen wäre ich sehr dankbar
     
  9. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Dann bind dein JS doch mal direkt als script code unter deinem html ein.

    global wäre ja eh falsch da du es ja nur auf einer bestimmten seite brauchst.
     
  10. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.656
    Danke erhalten:
    1.261
    Danke vergeben:
    300
    @Richard-- Ich habe mir dein JavaScript Code einmal genauer angesehen und einige Fehler festgestellt. Hier sind einige Semikolon und einige Anführungszeichen und einige Schreibweisen von if falsch gewesen. Der JavaScript Code ist somit nicht ausführbar gewesen. Ich habe alle Fehler beseitigt. Wenn du jetzt eine .js Datei im Ordner /templates/Honeygrid/usermod/javascript/Global/ anlegst mit folgendem Inhalt sollte das JavaScript ohne Probleme geladen und ausgeführt werden:

    Code:
    $(function () {
        $('#frmContact').submit( function() {
            var formControl = true;
    
            var frmGrpVorname = $('#frmGrpVorname');
            var frmGrpNachname = $('#frmGrpNachname');
            var frmGrpEmail = $('#frmGrpEmail');
    
            frmGrpVorname.removeClass('has-error');
            frmGrpNachname.removeClass('has-error');
            frmGrpEmail.removeClass('has-error');
    
            var vorname = $('#vorname').val();
            var nachname = $('#nachname').val();
            var email = $('#email').val();
            var isHuman = grecaptcha.getResponse();
    
            if (vorname == '')
            {
                formControl = false;
                frmGrpVorname.addClass ('has-error');
            }
    
            if (nachname == '')
            {
                formControl = false;
                frmGrpNachname.addClass ('has-error');
            }
    
            if (email == '')
            {
                formControl = false;
                frmGrpEmail.addClass ('has-error');
            }
    
            if(isHuman.length == 0) {
                formControl = false;
            }
    
            if (formControl) {
    
                $.ajax ({
                    type: 'POST',
                    url: '/absenden.php',
                    data: { vorname:vorname, nachname:nachname, email:email, isHuman:isHuman}
                }) .done(function(message){
                    var successnotify = $('successnotify');
                    successnotify.html(message);
                    successnotify.addClass('alert');
                    successnotify.addClass('alert-success');
                });
    
    
            }
    
    
            return false;
        } );
    });
    Weitere Einbindungen über script Tags sind dann nicht nötig.
     
  11. Richard--

    Richard-- Aktives Mitglied

    Registriert seit:
    12. Februar 2017
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    11
    Hallo Till!

    Vielen Dank! haben ein workaround gefunden. siehe neuer Beitrag :) Da hakt es am Bild.