javascript - python django: How can I determine if a div should show or hide based on the parameter passed to template - Stack O

admin管理员组

文章数量:1289679

I need to set a div to show or hide based on the parameter that passed in from django views.py, but I just couldn't get it to work. My code is like the following:

In the body:

{% if report_type == "detail" %}
    visibility("detail");
{% endif %}

In javascript:

<script type="text/javascript">
    function visibility(reportType) {
        console.log(reportType);
        if(reportType == "detail") {
            $('#executive_summary').style.display = 'none';
        }
    }
</script>

However the above code just doesn't work. Can somebody give me some suggestions? Thanks.

I need to set a div to show or hide based on the parameter that passed in from django views.py, but I just couldn't get it to work. My code is like the following:

In the body:

{% if report_type == "detail" %}
    visibility("detail");
{% endif %}

In javascript:

<script type="text/javascript">
    function visibility(reportType) {
        console.log(reportType);
        if(reportType == "detail") {
            $('#executive_summary').style.display = 'none';
        }
    }
</script>

However the above code just doesn't work. Can somebody give me some suggestions? Thanks.

• javascript
• jquery
• django

Share Improve this question Follow edited Apr 18, 2012 at 17:21 bonsaiviking 6,00511 gold badge2323 silver badges3737 bronze badges asked Apr 18, 2012 at 15:08 Shang WangShang Wang 25.6k2121 gold badges7777 silver badges9595 bronze badges 2

• Are you using jQuery or normal js? Two dont mix like your syntax does. – Henrik Andersson Commented Apr 18, 2012 at 15:11
• Where is the {% if... block going? If you don't place it in a script element, and in one that exists after the page has finished loading (either by using jQuery's $(function onLoad(){}) magic or by putting a <script>visibility('detail')</script> tag at the very end of your document) it will never go off. That is probably why your console line is never getting reached. Then you will need to fix your use of the jQuery api as everyone has mentioned. – quodlibetor Commented Apr 22, 2012 at 21:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

By pure CSS:

        {% if report_type != "detail" %}
            <div style="display: none;">
        {% else %}
            <div style="display: block;">
        {% endif %}
        ...
        </div>

Or by using JavaScript (jQuery):

    {% if report_type != "detail" %}
    <script type="text/javascript">
        $('#executive_summary').hide();
    </script>
    {% endif %}

By JavaScript functions:

    <script type="text/javascript">
        /* If wanted to run when page is loaded. */
        $(function() {
            // Handler for .ready() called. 
            visibility("detail");
        });

        function visibility(reportType) {
            if(reportType == "detail") {
                $('#executive_summary').show();
            }
            else {
                $('#executive_summary').hide();
            }
        }
    </script>

The problem is you are using the nonexistent style attribute of the jQuery object returned by your '#executive_summary' selector. jQuery objects don't have the same attributes and methods as DOM nodes. Try this instead:

<script type="text/javascript">
    function visibility(reportType) {
        console.log(reportType);
        if(reportType == "detail") {
            $('#executive_summary').hide();
        }
    }
</script>

This will do what you want, but if you absolutely, necessarily, must directly set the display attribute, you could replace that one line with:

$('#executive_summary').css('display', 'none');

But that is not as clean as just using .hide()

You need to put the function call in a javascript tag. Try this instead:

<script type="text/javascript">
{% if report_type == "detail" %}
    $('#executive_summary').toggle();
{% endif %}
</script>

本文标签：