-----------------------------------

Zeroth

Sun Dec 14, 2008 12:13 am


Javascript onClick issues

-----------------------------------

Okay, so, I'm working on a webapp. It is built in Django+Python(whoot RAD). I'm having some issues with javascript/jquery.
Basically the access controls button will call the js, then it ends up submitting the page. How do I stop that? I want to have additional elements show up.

var counter = 0;
function getNewVisForm()
{
    $.getJSON("/ajax/newVisibility/"+counter.toString()+"/", 
            function (data)
            {
                var form = data.form;
                if(counter==0){
                    $.getJSON("/ajax/newVisibilityStart/", 
                        function (data)
                        {
                            $(".empty").html(data.form);
                        }
                    )
                }
                $(".empty").append(data.form);
                if(counter!=0)
                {
                    $("#id_visible-TOTAL_FORMS").each( 
                        function (element)
                        {
                            element.value=element.value+1;
                        }
                    );
                    $("#id_visible-INITIAL_FORMS").each(
                        function (element)
                        {
                            element.value=element.value+1;
                        }
                    );
                }
                counter+=1;
                
                         
            }
      );
}

The ids it is referring to don't exist in the html, not until the url /ajax/newVisibilityStar/ is accessed, with the results inserted onto the page. 

And here is a portion of the html:


{snip...}

Access ControlsWhats this?




-----------------------------------

gianni

Sun Dec 14, 2008 4:48 am


Re: Javascript onClick issues

-----------------------------------

You should try to avoid onXXX event handler attributes (e.g. onClick="") at all costs. They are bad!Solution: You'll want to setup a "click" event listener on your object. Then, inside your handler method, you'll want to prevent the default behavior of that event from being executed. I would also give your button either an id or a class to make life a bit easier on yourself.

This is where you can find the documentation you're looking for: http://docs.jquery.com/Events

Let me know how this works out


-----------------------------------

Zeroth

Sun Dec 14, 2008 12:01 pm


Re: Javascript onClick issues

-----------------------------------

Argh, yeah, my javascript is STILL not executing. I've got a $.ready call, running a function, it doesn't get called when the page is refreshed. I've enabled javascript, but why on earth does it not run?!  Firebug says there are no errors... it just doesn't run!


-----------------------------------

gianni

Sun Dec 14, 2008 2:42 pm


RE:Javascript onClick issues

-----------------------------------

Can you paste your new code and we can have a look at it?


-----------------------------------

Zeroth

Sun Dec 14, 2008 3:18 pm


Re: Javascript onClick issues

-----------------------------------


$.ready(function ()
    {
        $("click").click( function (e)
            {
                
                getNewVisForm();
                e.preventDefault();
            }
        );
    }
);

var counter = 0;
function getNewVisForm()
{
    $.getJSON("/ajax/newVisibility/"+counter.toString()+"/", 
            function (data)
            {
                var form = data.form;
                if(counter==0){
                    $.getJSON("/ajax/newVisibilityStart/", 
                        function (data)
                        {
                            $(".empty").html(data.form);
                        }
                    );
                    
                }
                $(".empty").append(data.form);
                if(counter!=0)
                {
                    $("#id_visible-TOTAL_FORMS").each( 
                        function (element)
                        {
                            element.value=element.value+1;
                        }
                    );
                    $("#id_visible-INITIAL_FORMS").each(
                        function (element)
                        {
                            element.value=element.value+1;
                        }
                    );
                }
                counter+=1;
                
                         
            }
    );

}


            
            Access ControlsWhats this?
            

Here you go. Okay, so it does appear to run, but not on the click of the button. Extremely frustrating, and this is why so many people see javascript as a toy language. Until there are proper debuggers(firebug is good, just not good enough), and a standardized spec that ALL the browsers work to, javascript is just difficult to work with.


-----------------------------------

gianni

Sun Dec 14, 2008 8:35 pm


RE:Javascript onClick issues

-----------------------------------

There are several proper debuggers for JavaScript (e.g. [url=http://www.mozilla.org/projects/venkman/]Venkman, [url=http://nightly.webkit.org/]Webkit Nightly (Incredible dev browser IMHO), and a [url=http://www.google.ca/search?q=javascript%20debuggers]few more). There are also Javascript standards - but nobody can force people to follow them. I think once you get the hang of it you'll find Javascript a pleasure to work with, I do.

Anyway, on to your problem, what does the jQuery (aka $) method expect for an argument?


-----------------------------------

Zeroth

Sun Dec 14, 2008 10:36 pm


Re: Javascript onClick issues

-----------------------------------

Thanks for the link to Venkman. Sorry I got frustrated there. It was just so frustrating not having any idea what was wrong. I finally got it working, now I just need to style it and lay it out nicely.