CODEWITHSUNDEEP
javascriptjquerydjango
Shang Wang
Shang Wang

Reputation: 25549

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

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.

Upvotes: 1

Views: 7329

Answers (3)

niko.makela
niko.makela

Reputation: 547

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>

Upvotes: 9

bonsaiviking
bonsaiviking

Reputation: 6005

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()

Upvotes: 1

Burhan Khalid
Burhan Khalid

Reputation: 174672

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>

Upvotes: 0

Related Questions