How to display dynamic content in ASP.net using JavaScript

Question

I have two separate .inc file which I would like to alternately show based on whether a DIV is shown or hidden (mobile [phones/tablets] or desktop)

Here is my code which is in the BODY:

<script>
$(function () {
    if ($('#leftNavCustom').css('display') == 'block') {
        alert('mobile');
        <!-- #include virtual ="includeNav/msMobile.inc" -->
    }
    if ($('#leftNavCustom').css('display') == 'none') {
        alert('desktop');
            <!-- #include virtual ="includeNav/msDesktop.inc" -->
    }
});
</script>

If I remove the two #include line, the alert works fine but with the above code, it's neither displaying the .inc contents nor is it showing me the alert.

How can I modify the above code to work correctly?

unless those .inc files actually contain more javascript, this will not work. You cannot just output stuff inside javascript except javascript. To write stuff to the DOM, you might use something like document.write() — Reinder Wit
– Reinder Wit, Commented Apr 24, 2014 at 14:28
This is server-side include and will occur anytime, so basicly the content of those files is almready displayed in your source, but as you do nothing to display it into your DOM, of course it won't happen. Lol almost the same remark as Reinder Wit :-) — Laurent S.
– Laurent S., Commented Apr 24, 2014 at 14:29

Reinder Wit · Accepted Answer · 2014-04-24 14:38:33Z

1

unless those .inc files actually contain more javascript, this will not work. You cannot just output stuff inside javascript except javascript. To write stuff to the DOM, you might use something like

document.write('<div class="content">text</div>')

Another option would be to output both the .inc files in a separate <div>, but hide them using CSS. Then in your javascript, you can show the corresponding <div>:

JS

    $(function () {
        if ($('#leftNavCustom').css('display') == 'block') {
            document.getElementById('desktop').style.display = 'none';
            document.getElementById('mobile').style.display = 'block';
        }
        if ($('#leftNavCustom').css('display') == 'none') {
            document.getElementById('desktop').style.display = 'block';
            document.getElementById('mobile').style.display = 'none';
        }
    });

HTML

<div id="mobile"><!-- #include virtual ="includeNav/msMobile.inc" --></div>
<div id="desktop"> <!-- #include virtual ="includeNav/msDesktop.inc" --></div>

edited Apr 24, 2014 at 14:38

answered Apr 24, 2014 at 14:31

Reinder Wit

6,6551 gold badge29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Si8 Over a year ago

I was just about to do that but you beat me to it. Thanks.

Si8 Over a year ago

This was easy peezy! :)

Si8 Over a year ago

Answer accepted. I don't think the CSS part is needed. Or would you beg to differ?

Community · Accepted Answer · 2017-05-23 11:49:25Z

1

Or if you're already using jQuery, based on Reinder Wit's solution, you could do something like this:

HTML

<div id="ms-mobile" class="hide">
    <!-- #include virtual ="includeNav/msMobile.inc" -->
</div>
<div id="ms-desktop" class="hide">
    <!-- #include virtual ="includeNav/msDesktop.inc" -->
</div>

CSS

.hide {
    display: none;
}

JS

<script>
    $(function () {
        var navDisplay = $('#leftNavCustom').css('display'),
            msMobile = $('#ms-mobile'),
            msDesktop = $('#ms-desktop');

        msMobile.toggleClass('hide', navDisplay == 'none');
        msDesktop.toggleClass('hide', navDisplay == 'block');
    });
</script>

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Apr 24, 2014 at 14:46

Nicolae Olariu

2,5652 gold badges20 silver badges31 bronze badges

1 Comment

Si8 Over a year ago

I will test out both. Thank you for the response. UPVOTED.

Collectives™ on Stack Overflow

How to display dynamic content in ASP.net using JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related