Solved my own problem. using var a = this in the object declaration
was all I needed. I tried it before but apparently screwed something
up.
On Jul 10, 11:44 pm, ScottyUCSD <[EMAIL PROTECTED]> wrote:
> 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>
