jquery fade in - Seite 2

nikosch · 08.02.2012, 00:47

Ich denke mal, das passiert, wenn Du den Wert auslesen willst.

Dark Guardian · 08.02.2012, 01:35

Zitat:

Zitat von nikosch

Ich denke mal, das passiert, wenn Du den Wert auslesen willst.

Nein, es handelte sich schon um die Deklaration.

Hier habe ich was gefunden (ob vertrauenswürdige Quelle sei mal dahingestellt, jedenfalls beschreibt er das Problem):

http://ragrawal.wordpress.com/2007/1...ur-javascript/

Zitat:

5. Source: Defining variable without “var”:I was surprised to find this one. But within my document block for jquery, I defined a variable without “var” modifier and this raised an issue in IE7. Here is how my document block was originally coded

Code:

$(document).ready(function(){
library = “hello”;
message = “world”;
if(“form#” + library).submit(….
….
);
});

Allerdings lief auf unseren Firmenrechnern der IE8.

rudygotya · 08.02.2012, 05:40

Zitat:

Zitat von nikosch

In JSON sollten die Bezeichner als Strings ausgezeichnet werden

Jo, aber das darf man bei der Parameter-Übergabe mMn. ignorieren. Empfind ich nicht als schlampig.

Zitat:

ja ich hab mittlerweile verstanden dass ich kein besonders guter programmierer bin, aber ich mache das nur nebenbei ich hab mir alles selbst beigebracht und hab dementsprechend keine ahnung was man wie machen sollte....

Nicht gleich beleidigt sein, stattdessen fragen, wies besser geht!

Um das auf die schnelle sauberer hinzubiegen, hab ich schnell was angescribbelt:

PHP-Code:

  <div class="mywidget" data-animal="elephant" data-prefix="benjamin" data-id="123">  
    <a class="readmore">read more</a>
</div>
<div class="readmore"><!-- dein <p> wrap kann auch vom server kommen, wenn du eh html nachlädst</p> --></div>

Dein Code auf das boilerplate oben gemüntzt:

PHP-Code:

  $('.readmore').click(function(){
    var parent = $(this).parents('.mywidget');
    parent
        .next()
        .load( '/php/getDescbyId.php', {
            animal: parent.data('animal') || "",
            ID: parent.data('prefix') || 0,
            prefix: parent.data('id') || ""
        } );
});

Sieht schon besser aus, hat aber noch 2 Probleme:
- du bist immer noch von der html-struktur abhängig - immerhin wirft das nie einen Fehler. Es geht aber im Zweifelsfall halt nicht.
- Jeder Benutzer kann unbegrenzt viele Requests parallel abschicken, er muss einfach nur wild klicken.

Für Problem 2 kannst du zur schnellen Lösung eine Loadmask einsetzen. Beim Klicken anzeigen, nach dem Laden ausblenden.

Um deinen Code unabhängiger von bestehendem Markup zu machen, würd ich die jQueryUI widget factory benutzen und jQuery templates verwenden. Dann könnte dein Code fürs Widget bspw so aussehen:
- Dein Template:

PHP-Code:

  <script id='readMoreTemplate' type='text/x-jquery-tmpl'>
<div class='mywidget'>  
    <a class='readmore'>read more about ${animal}</a>
</div>
<div class='readmore'></div>
</script>

-Dein Widget:

PHP-Code:

  (function( $) {

$.animal = $. animal || {};

$.widget( 'animal.readmore', {
    options : {
        autoLoad : true,
        container : null,
        loadmask : null,
        url : '',
        animal : '',
        prefix : '',
        id : 0
    },
    _create : function () {
        var o = this.options;
        if( ! o.container.jquery || ! o.loadmask.jquery ) {
            throw TypeError( 'content has to be an jQuery object' )
        }
    },
    _init : function() {
        if( this.options.autoLoad ) {
            this.load();
        }
    },
    load : function () {
        var o = this.options;
        o.loadmask.show();
        o.container.load(
            o.url,
            {
                animal: o.animal,
                prefix: o.prefix,
                id: o.id
            },
            function () {
                o.loadmask.hide();
            }
        );
        
    }

});

})(jQuery);

-Dein noch prozedualer Code:

PHP-Code:

  // das hier kannst du dir von php per json_encode erzeugen lassen:
var readMores = [
    { id : 1, prefix : 'benjamin', animal : 'elephant' },
    { id : 2, prefix : 'blümchen', animal : 'zwergelephant' }
];

$(function () {
    // einziges ziel für den load, aber das kannst du für jede Instanz einzeln entscheiden.
    var $container = $('#myReadMoreContentContainer'),
        $content = $('#content'),
        $template = $('readMoreTemplate')
        $loadMask = $('#loadmask');
    
    $.each( readMores, function( options ) {

        options.loadmask = $loadmask;
        options.container = $container;
        
        var readmoreLink = this.template
            // template evaluieren
            .tmpl( options )
            // hier wird reingerendert
            .appendTo( $content );
        readmoreLink.readmore( options );
    });
});

Deine Vorteile sind jetzt:
- Funktionalität/ Darstellung gekapselt
- Dem Widget ists egal, wo es reinlädt, das heißt du kannst immer in denselben Container reinladen oder auch für jeden Link einen eigenen Container angeben, das ist nur noch Konfigurationssache.
- Du kannst den Code leichter testen und wiederverwenden
- du kannst dein widget jederzeit erstellen - auch im Nachhinein -, wenn du ihre Konfiguration und ihr Template kennst - und das mit 3 Zeilen Code.
- Du machst dich nicht anhängig von (data-) Attributen, was andere mit dem DOM anstellen, ist dir fast egal.
- Load ist auch von außen aufrufbar und nicht an den click gebunden.
- jegliche Option kannst du zur Laufzeit auslesen oder verändern - der DOM tree interessiert dich immer noch nicht.

Was noch fehlt: Events des Widgets, Fehlerbehandlung,...

Komplett ungetestet. Versuch dich doch mal reinzudenken.

Viele Grüße

Basti

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQueryLog new extension for debugging jquery (feedback request)	jquerylog	JavaScript, Ajax und mehr	8	26.12.2011 11:58
JQuery Ajax PHP Aktualisierung	thiagojonas	PHP Einsteiger	3	25.10.2011 23:22
jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen	K00S	JavaScript, Ajax und mehr	6	10.09.2011 13:54
[Erledigt] Jquery mobile form action verhalten unterdrücken	drsoong	JavaScript, Ajax und mehr	1	21.07.2011 14:57
jQuery: Select Area in Input Feld umwandeln	Elementus	JavaScript, Ajax und mehr	1	12.07.2011 20:31
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
jQuery, einem DOM-Knoten eine Payload anhängen	Chriz	JavaScript, Ajax und mehr	6	22.12.2010 15:31
jQuery - Text an Cursorposition einfügen	Koala	JavaScript, Ajax und mehr	5	11.11.2010 21:28
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35

08.02.2012, 00:47
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich denke mal, das passiert, wenn Du den Wert auslesen willst. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten