AJAX load div that uses a queryset

Question

I'm developing a dice roller app; I'm using Django (2.1), Bootstrap (4), mySQL, a pinch of JavaScript, and now AJAX, which is where I am struggling. I'm passing a queryset into the template as a kwarg, and then rendering that as an "action log" (history of the dice rolls) in it's own div. I thought that I could just use AJAX to reload that div, but I seem to be missing something. I'm using, amongst other things, this stackoverflow question as a reference.

template.html

<div class="container-fluid" id="action_log" style="padding:0">
    ... <!--display actions-->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<script>
    $(function refresh_action_log(){
        $.ajaxSetup ({
            cache: false,
            complete: function() {
                setTimeout(refresh_action_log, 2000);
            }
        });
        $('#action_log').load(document.URL + '#action_log');
    })
</script>

What I think should happen is that, after 2 seconds (2000 ms), the AJAX should refresh only the named div. One thing I know I have questions about is the syntax of the last line in the function. In the comments on the page linked above, I see a couple different syntaxes, and I can't figure out which one is right.

What have I missed?

(eta: well, one thing I missed was a closing paren...)

Thanks, -Van

schillingt · Accepted Answer · 2018-11-16T20:42:08.833

0

ajaxSetup is for configuring all ajax calls. I don't think that's what you want to use. I imagine you want something closer to this:

$(function() {
    function refresh_action_log(){
        var url = document.URL + '#action_log'
        $('#action_log').load(url, function () {
            // When it loads, schedule the next request for 2s later
            setTimeout(refresh_action_log, 2000)
        });
    }
    refresh_action_log()
})

edited Nov 16 '18 at 20:42

answered Nov 15 '18 at 20:40

schillingt

13,493
2
32
34

hmmmm.... That doesn't seem to do it, schillingt. Let me ask a more basic question: can I test AJAX running on localhost, with two different browsers open (e.g. Chrome and Firefox)? – Van Nov 15 '18 at 20:53
Yes. I think the problem is with `document.URL`. It should be the url for the server endpoint that will render that div. If you're using django, it should be some additional view. – schillingt Nov 15 '18 at 20:59
I hate to say this, but I am still lost. Running the script as schillingt has given me gives me a SyntaxError of 'missing ) after argument list' (referring to the last curley bracket. After a day of trying to learn the syntax of jQuery, I am still not grokking it. I clearly need to work on my jQuery skills. – Van Nov 16 '18 at 19:43
The jquery syntax was wrong. It was missing the wrapping `function() {}` – schillingt Nov 16 '18 at 20:42
Got it! Thanks schillingt! – Van Nov 17 '18 at 01:51
I suppose I should add why I needed to add the space: The script was taking the whole page and inserting it into the div. Thankfully, there was no infinite regression of successively smaller versions of the page. But, the space made it so that the div was replaced by the div only. – Van Nov 17 '18 at 02:04

AJAX load div that uses a queryset

1 Answers1