Javascript onClick issues

[Zeroth]

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>

[gianni]

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

[Zeroth]

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]

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

[Zeroth]

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.

[gianni]

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?

[Zeroth]

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.