[jQuery] Trigger caller herleiden

[IMarks]

Ik ben bezig om een wizard te maken met behulp van de JavascriptLibrary Fuel Ux (link). Nu wil ik de next functie uitbreiden met validate van de huidige `step`.

Tot nu toe heb ik het werkend dat het script niet meer verder gaat nadat de trigger change is opgevangen en de huidige step een error class bevat.

Echter hebben ze voor zowel hun functie previous als next de trigger change gebruikt waardoor ik nu dus ook niet meer terug kan.

Is er een mogelijkheid om de change functie alleen op te vangen wanneer deze afkomstig is uit de next.

mocht het handig zijn, dit is mijn huidige code

JavaScript:

var wizard = $(".wizard").wizard();
wizard.on('change', function(e){
    if ($('.fuelux').find('.active .icon-remove').length > 0){
        alert('Gestopt');
        e.preventDefault();
    }
});

De wizard functie (die ik niet wil aanpassen, i.v.m. het kunnen upgraden) is alsvolgt opgebouwd

JavaScript:

var Wizard = function(){
    ~~ Opties ~~
}

Wizard.prototype = {
    constructor: wizard,

    previous: function () {
        this.element.trigger(change);
        ~~ Na de vorige stap ~~
    }

    next: function(){
        this.element.trigger(change):
        ~~ Na de volgende stap ~~
    }

}

[Bosmonster]

Heb je gekeken naar de verschillen in het event-object? (in jouw geval "e")?

[IMarks]

Gedaan, op top level is alleen de timestamp anders. Voor de rest kan ik er eerlijk gezegt niet wijzer uit worden. Ik weet niet of er een manier is deze te kopieren en te plakken?

[Bosmonster]

http://jsfiddle.net/cFKMF/

Check de console. Een origineel event heeft veel meer properties dan een gesimuleerd event.

(ik gebruik Firefox/Firebug, maar neem aan dat je in andere debuggers ook wel de het volledige object kunt bekijken )

(hint: met name originalEvent is een interessante)

[ Voor 42% gewijzigd door Bosmonster op 21-10-2013 13:16 ]

[IMarks]

Dit is het gene wat ik terug krijg (uit me eigen script)

JavaScript:

x.Event {type: "change", timeStamp: 1382354139782, jQuery11020011859082849696279: true, isTrigger: 3, namespace: ""…}
currentTarget: div.wizard
data: undefined
delegateTarget: div.wizard
handleObj: Object
isTrigger: 3
jQuery11020011859082849696279: true
namespace: ""
namespace_re: null
result: undefined
target: div.wizard
timeStamp: 1382354139782
type: "change"
__proto__: Object

De originalEvent zie ik hierin dus niet terug, of hij moet ergens genest zitten

[Bosmonster]

Ja, dat is dus het "trigger" event. Klik nu eens handmatig op de knop en bekijk dat object

Het gaat erom dat je verschillen tussen die twee kunt bepalen, waarmee je dus kunt zien of het een gesimuleerd of echt event is. Je post er nu maar eentje.

Origineel event:

JavaScript:

altKey: false,
bubbles: true,
button: 0,
buttons: 0,
cancelable: true,
clientX: 37,
clientY: 21,
ctrlKey: false,
currentTarget: button,
data: undefined,
delegateTarget: button,
eventPhase: 2,
fromElement: undefined,
handleObj: Object { type="click", origType="click", guid=2, more...},
jQuery11010023507496744558987: true,
metaKey: false,
offsetX: undefined,
offsetY: undefined,
originalEvent: click clientX=37, clientY=21,
pageX: 37,
pageY: 21,
relatedTarget: null,
screenX: 1103,
screenY: 356,
shiftKey: false,
target: button,
timeStamp: 18878613,
toElement: undefined,
type: "click",
view: Window /cFKMF/show/,
which: 1

"Trigger" event:

JavaScript:

currentTarget: button,
data: undefined,
delegateTarget: button,
handleObj: Object { type="click", origType="click", guid=2, more...},
isTrigger: 3,
jQuery11010023507496744558987: true,
namespace: "",
namespace_re: null,
result: undefined,
target: button,
timeStamp: 1382356336020,
type: "click"

Sorry als ik wat cryptisch ben, maar wil je het proces laten zien van hoe je zelf tot een oplossing kunt komen voor dergelijke problemen

[ Voor 72% gewijzigd door Bosmonster op 21-10-2013 13:58 ]

[IMarks]

Hmm, oke ik snap wat je wilt maar ik zie het nut niet helemaal.
De tweede die jij wilt is de gene die je ziet bij ''natuurlijke input' dit komt echter nooit voor.
Het script zal altijd bovenstaande output returneren, daarnaast zal dit niet het verschil tussen de next en previous aantonen.

Zelfs al zou het nodig zijn, zie ik niet hoe ik een change als 'natuurlijke' moet laten returneren met een div (de wizard) en een button (next of previous).

[Bosmonster]

Ow sorry, dan heb ik heel je vraag niet goed gelezen!

In dat geval denk ik dat er weinig aan te doen is als je niet je originele code wilt aanpassen en bijvoorbeeld een extra parameter wilt meegeven bij de trigger...

[NNF]

Als ik de documentatie goed lees dan kun je handmatig een stap terug, dus zoiets zou wellicht kunnen werken?

JavaScript:

var wizard = $(".wizard").wizard();
wizard.on('change', function(e){
    if ($('.fuelux').find('.active .icon-remove').length > 0){
        alert('Gestopt');
        e.preventDefault();
        $('.wizard').wizard('previous'); // terug naar vorige stap omdat de validatie gefaald is
    }
});

[ Voor 10% gewijzigd door NNF op 21-10-2013 20:36 ]

[IMarks]

Hmm dat is ook niet helemaal wat ik zoek, gezien je dan automatisch terug gaat, maar je hebt me wel even wakker geschud.

Ik kan inderdaad er iets om heen bouwen om het werkend te maken.
Ik ga nog wat proberen en laat het van de week weten wat de definitieve code is geworden.

[IMarks]

Het heeft iets langer geduurd maar ik heb nu de oplossing.
De previous wilde ook niet helemaal werken omdat als ik er iets om heen bouwde ik alsnog de trigger weer opving en dus opnieuw werd geblokkeerd. Daarom ben ik weer gaan kijken of ik kon achterhalen welk element die trigger verstuurde. Gezien het event Change altijd wordt gedaan door ':focus' heb ik die maar als selector gebruikt me code is nu dus als volgt

JavaScript:

(function($)
{
    $(function () {
        var wizard = $(".wizard").wizard();
        wizard.on('change', function(e){
            if ($('.fuelux').find('.active .icon-remove').length > 0){
                if ($(':focus').hasClass('btn-next')){
                    $('#testModal').modal();
                    e.preventDefault();
                }
            }
        });
    });
})(jQuery);

[Verwijderd]

Misschien heb je al een oplossing, maar als ik even in de bron kijk van die Fuel UX demos, zie ik:

code:

$('#MyWizard').on('change', function(e, data) {
    console.log('change');
    if(data.step===3 && data.direction==='next') {
        // return e.preventDefault();
    }
});

Lijkt me dat het data object ook wat interessante info bevat.