Replace jQuery show with simple JavaScript

Question

Im putting my JS files, jquery.min before my sites tag. How can I replace the jQuery code in this, with simple JavaScript?

function generateScript()
{
    ?>
    <script type="text/javascript">
        $(document).ready(function(e) {
        <?php
        foreach($this->modules  AS $m) {
            echo '   $("#kategoria_'.$m.'").show() ;  '."\n";
        }
        ?>
        });
    </script>
    <?php
}

I want that, beacause if i put all the JS file includes to the tag, i get js error, because this generator code is before i call in js files, and the $ function will not exists.

Update:

Now, i use this:

function generateScript()
{
    ?>
    <script type="text/javascript">
        //$(document).ready(function(e) {
        <?php
        foreach($this->modules  AS $m) {
            //echo '   $("#kategoria_'.$m.'").show() ;  '."\n";
            echo 'document.getElementById("#kategoria_'.$m.'").style.display = "block";  '."\n";
        }
        ?>
        //});
    </script>
    <?php
}

It generates this to site site source:

document.getElementById("#kategoria_szamitastechnika-1").style.display = "block";  
document.getElementById("#kategoria_szamitastechinkai-periferiak-2").style.display = "block";  
document.getElementById("#kategoria_laptop-notebook-tablet-3").style.display = "block";  
document.getElementById("#kategoria_terkovek-kerti-lapok-13").style.display = "block";  
document.getElementById("#kategoria_szorakoztato-elektronika-18").style.display = "block";  
document.getElementById("#kategoria_konzol-es-pc-jatekszoftver-19").style.display = "block";  
document.getElementById("#kategoria_asztali-szamitogep-20").style.display = "block";  
document.getElementById("#kategoria_kellekek-kiegeszitok-21").style.display = "block";  
document.getElementById("#kategoria_vezetek-nelkuli-eszkozok-22").style.display = "block";  
document.getElementById("#kategoria_lego-38").style.display = "block";  
document.getElementById("#kategoria_irodai-butorok-57").style.display = "block";

Error in console:

Uncaught TypeError: Cannot read property 'style' of null

You could use `window.onload` or `document.onload` -- more info on them [here](http://stackoverflow.com/questions/588040/window-onload-vs-document-onload) -- and use `display = "inline";` or `display = "block";` like @A.Lau suggested. — freginold, Feb 02 '17 at 18:45
use `document.getElementById("#kategoria_'.$m.'").style.display = 'block';` block/inline — BetaDev, Feb 02 '17 at 18:48
By using a class instead of an ID you could probably get rid of your PHP loop inside the javascript — empiric, Feb 02 '17 at 18:49
oh my bad dont use `#`, Sorry my typo @Dave599....use `document.getElementById("kategoria_'.$m.'").style.display = 'block';` — BetaDev, Feb 02 '17 at 18:55
SO this means you dont have corresponding html elements to match with the ID. THere must be all the HTML elements with ID `kategoria_********` you should have all the HTML elements with the ID that your loop is generating and must be with property `style="display:none;"` — BetaDev, Feb 02 '17 at 18:58
Keep one more thing in your mind that what ever you create new JS script will not run, because JS will not respond to html if you create after page load — BetaDev, Feb 02 '17 at 19:02
I have to strongly recommend to find another way to solve your problem. Using jquery is always the better way. It seems to be the case that you have a general issue in the concept of how the resources are loaded. It should be mentioned to prefer jquery and i am wondering that nobody did it before. — steven, Feb 02 '17 at 19:09

Mojtaba · Answer 1 · 2017-02-02T19:58:28.743

function generateScript()
{
    ?>
    <script type="text/javascript">
        (function() {
        <?php
        foreach($this->modules  AS $m) {
            echo '   document.getElementById("kategoria_'.$m.'").style.display = "block";  '."\n";
        }
        ?>
        })();
     </script>
    <?php
}

You can replace $(document).ready(function(){...}); by this as a native JS code:

(function() {

})();

score 1 · Accepted Answer · answered Feb 02 '17 at 19:08

You try this.

function generateScript()
{
    ?>
    <script type="text/javascript">
        <?php
        foreach($this->modules  AS $m) {
            echo '   document.getElementById("kategoria_'.$m.'").style.display = "block";\n';
        }
        ?>
     </script>
    <?php
}

score 0 · Answer 3 · answered Feb 02 '17 at 19:02

0

The document.getElementById() don't need the symbol #, then:

replace document.getElementById("#kategoria_szamitastechnika-1") for document.getElementById("kategoria_szamitastechnika-1")

answered Feb 02 '17 at 19:02

Marc Puigventós Sanz

188
8

Replace jQuery show with simple JavaScript

3 Answers3