Computer Science Canada

Javascript onClick issues
Author:  Zeroth [ Sun Dec 14, 2008 12:13 am ]
Post subject:  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.
Javascript:

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:
HTML:

<form action="/create/6/1/" method="post" name ="item">
{snip...}
<li ><ul class="empty"></ul></li>
<li><button value="Access Controls"  onClick = "getNewVisForm()" />Access Controls</button><a href="/info/access/" style="font-size:0.8em">Whats this?</a></li>
<li><input type="submit" value="Submit"/></li>
Author:  gianni [ Sun Dec 14, 2008 4:48 am ]
Post subject:  Re: Javascript onClick issues
You should try to avoid onXXX event handler attributes (e.g. onClick="") at all costs. They are bad! Instead you should use proper event listening/handling provided by the jQuery click() method. The advantages are numerous.

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
Author:  Zeroth [ Sun Dec 14, 2008 12:01 pm ]
Post subject:  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!
Author:  gianni [ Sun Dec 14, 2008 2:42 pm ]
Post subject:  RE:Javascript onClick issues
Can you paste your new code and we can have a look at it?
Author:  Zeroth [ Sun Dec 14, 2008 3:18 pm ]
Post subject:  Re: Javascript onClick issues
Javascript:

$.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;
               
                         
            }
    );

}

HTML:

            <li ><ul class="empty"><li></li></ul></li>
            <li><button value="Access Controls"  id="click" >Access Controls</button><a href="/info/access/" style="font-size:0.8em">Whats this?</a></li>
            <li><input type="submit" value="Submit"/></li>

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.
Author:  gianni [ Sun Dec 14, 2008 8:35 pm ]
Post subject:  RE:Javascript onClick issues
There are several proper debuggers for JavaScript (e.g. Venkman, Webkit Nightly (Incredible dev browser IMHO), and a 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?
Author:  Zeroth [ Sun Dec 14, 2008 10:36 pm ]
Post subject:  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.

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy