jquery script buttons not working when accessed through my app

Question

After trying to find a way of having multiple selected buttons for my site, i found that a jquery 1.8 file did exactly that. Being new to programming and learning python and django, i have not yet delved into the world of javascript. But what ive garnered so far is that you can incorporate these jquery files in your html, without having to do anything on the server side. After all, in this case i just simply want my buttons to do something.

Now the jquery script works when i double click on the html file, but when im running the html file through my app it dosent. It thus makes me believe that when running my app i have to do something on the server side to make it work.

Does this make sense?

The Html code in question, i havent retouched anything in the views file.

<link rel="stylesheet" href="/home/jamie//Downloads/jquery-ui-1.8.10/themes/base/jquery.ui.all.css">
<script src="/home/jamie/Downloads/jquery-ui-1.8.10/jquery-1.4.4.js"></script>
<script src="/home/jamie/Downloads/jquery-ui-1.8.10/ui/jquery.ui.core.js"></script>
<script src="/home/jamie/Downloads/jquery-ui-1.8.10/ui/jquery.ui.widget.js">         </script>
<script src="/home/jamie/Downloads/jquery-ui-1.8.10/ui/jquery.ui.button.js"></script>
<link rel="stylesheet" href="/home/jamie/Downloads/jquery-ui-1.8.10/demos/demos.css">
<script>
$(function() {
    $( "#check" ).button();
    $( "#format" ).buttonset();
});
</script>

<style type="text/css">
table.ranking {position: absolute; top: 351; left: 450; }
ul {position: absolute; top: 400; left: 200; }   
format { margin-top: 2em; }   
</style>   

<div class="demo">

<input type="checkbox" id="check" /><label for="check">Toggle</label>

<div id="format">
<input type="checkbox" id="check1" /><label for="check1"> SQ </label>
<input type="checkbox" id="check2" /><label for="check2"> DL </label>
<input type="checkbox" id="check3" /><label for="check3"> BP </label>
<input type="checkbox" id="check4" /><label for="check4"> Snatch </label>
<input type="checkbox" id="check5" /><label for="check5"> CJ </label>
</div>
</div>

The above link tells you to: 1 put your static files were they will be found. '/home/jamie/mysite/static/' Done 2.Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS. Done. 3.included context processor which allows template code. Done. Does it work NO! — JT., Oct 11 '11 at 01:53
Sigh. You haven't read it. And you're referring to the file paths, not the URLs - your initial assertion that "you can incorporate these jquery files in your html, without having to do anything on the server side" is simply wrong. — Daniel Roseman, Oct 11 '11 at 09:13
Sorry if the NO! was a little harsh, that wasn't my intention, just my fustration. Youve replied to a few of my questions before and im gratefull, it wont happen again.The '/home/jamie/mysite/static/' actually refers to were i actually put the files themselves and nothing else. After reading the 3 step process, yes the one thing i did garner was that altering the server side was required. Now after following the steps, a step was missing however, see http://stackoverflow.com/questions/7720802/django-documentation-serving-static-files-3-simple-steps-nope — JT., Oct 11 '11 at 12:09

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

I suspect that the paths to your various jQuery files (in your tags) are only valid for your local copy, not your uploaded copy.

Try using the Google Code versions, which will work anywhere (as long as your browser is online):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />

(See here for how to access other CSS themes.)

edited May 23 '17 at 12:27

Community

1
1

answered Oct 10 '11 at 14:12

Blazemonger

90,923
26
142
180

so even if my site is still in development stage and not online this would work? – JT. Oct 11 '11 at 11:48
@JT. As long as your browser has access to the Internet, yes. – Blazemonger Oct 11 '11 at 12:39

score 1 · Answer 2 · answered Oct 11 '11 at 07:36

If you want to select or deselect all checkboxes by selecting/deselecting "Toggle" try this:

$(document).ready(function(){
            var checked = true;
            $('#check').click(function(){
                if (checked) {
                    $("#format input[type=checkbox]").attr('checked',true);
                    checked = false;
                } else {
                    $("#format input[type=checkbox]").attr('checked',false);
                    checked = true;
                }
            });
        });

At this stage probably not, it was just code i copied over to try to get working, but i will keep this in mind. cheers — JT., Oct 11 '11 at 11:54

jquery script buttons not working when accessed through my app

2 Answers2