I'm in the middle of building a form wizard and I've run into a
problem with one of the object's methods.  The object sjm_wizard is
supposed to allow you to traverse a set of divs one div at a time.
The problem is that I can't figure out how to call the object's
methods within .click().  The scope is such that I can't just call
this.turn() or this.update(), and when I try to use .call(whatever) to
change the scope it will run through the .click()s when the page loads
and then stop working.

Here's the code:<script type="text/javascript" src="jquery-1.2.6.js"></
script>
<script type="text/javascript">

    function change_page(){
        alert("function call works")
    }

    function update_pages(visible_page){
        alert("function call 2 works")
    }

    function sjm_wizard(start_page, div_name){
        this.start_page = start_page || 0
        this.div_id = div_name
        this.turn = change_page
        this.update = update_pages
        var a = this

        $('#' +this.div_id+
' .page').eq(this.start_page).css({display: "block"})

        $('#' +this.div_id+ ' .next_btn').click(function()
{ alert("test") })  //User clicks on the "Next" button (this works)

        $('#' +this.div_id+ ' .prev_btn').click((function()
{ this.turn()}).call(a))  //User clicks on the "Previous" button (this
doesn't work)
    }

    $(document).ready( function(){
        var current_page = 0

        merlin_1 = new sjm_wizard(current_page, 'form1')
    })

</script>

<style type="text/css">
    .page{
        height: 300px;
        border: solid black 1px;
        display: none;
    }
</style>

<div class="cll_main_content">
    <div class="full_width" id="form1">
        <div class="full_width page">
            <button id="worked">Worked?</button>
        </div>
        <div class="full_width page">
            2
        </div>
        <div class="full_width page">
            3
        </div>
        <div class="full_width page">
            4
        </div>
        <div class="full_width page">
            5
        </div>
        <div class="full_width page">
            6
        </div>
        <div class="full_width">
            <button class="prev_btn">Previous</button>
            <button class="next_btn">Next</button>
        </div>
</div>
    </div>

Reply via email to