DEVHIDE
Login Or Sign up

jQuery function $.html() does not wait for other lines of code to finish

111 Views Asked by At

I am trying to read data from another file and use this data in HTML (x3d, to be more precise).

In order to do that, I am using $.getJSON to read the data, and $("div").html( "*html code*" ), using variables inside the html code to display the data in a website.

The problem is that *$("div").html( "html code" )* is executed before the data is read by $.getJSON.

Here is my code:

<html> 
    <head> 
        <title>Superficie soja 63</title>           
        <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> 
        
    </head> 

    <body> 
        <h1>Superficie soja 63</h1> 
        
        <div></div>
        <script>
            var a = [];
            var b = [];
            var c = [];
            var tria = [];
            var trib = [];
            var tric = [];
            var str = "";
            var str_tri = "";

            $.getJSON("dados_teste.json", function(data) {
                for(var cont in data.pontos){
                        a.push(data.pontos[cont].x);
                        b.push(data.pontos[cont].y);
                        c.push(data.pontos[cont].z);

                        str += (`${a[cont]} ${b[cont]} ${c[cont]}, `);
                }
                str = str.slice(0, -2);
            });

            $.getJSON("tri_teste.json", function(data) {
                for(var cont in data.triangulos){
                    tria.push(data.triangulos[cont].tri_a);
                    trib.push(data.triangulos[cont].tri_b);
                    tric.push(data.triangulos[cont].tri_c);

                    str_tri += (`${tria[cont]} ${trib[cont]} ${tric[cont]}, `);
                }
                str_tri = str_tri.slice(0, -2);
            });

        setTimeout(() => {  console.log(str); }, 1000);
        setTimeout(() => {  console.log(str_tri); }, 2000);

        $("div").html( ` 

            <x3d width='1000px' height='1000px'> 
                <scene> 
                    <shape> 
                        <appearance>
                            <ImageTexture 
                            url='https://thumbs.dreamstime.com/b/macro-soybean-food-texture-background-top-view-96368287.jpg'/>
                        <TextureTransform
                            translation='0 0'
                            rotation='0'
                            repeats='true'
                            repeatt='true'
                            scale='80 80'/>
                        </appearance>
                        
                        <IndexedTriangleSet 
                            ccw='true' 
                            colorPerVertex='true' 
                            index='${str_tri}'
                            normalPerVertex='true' 
                            solid='false'
                            containerField='geometry'>
                            <Coordinate id="teste"
                                point='${str}'/>
                            <Viewpoint
                                position='0 0 10'
                                orientation=''
                                description='camera'/>
                        </IndexedTriangleSet>
                    </shape> 
                </scene> 
            </x3d> ` )

    </script>

    </body> 
</html>

I already tried using setTimeout() and delay() to solve this problem, but it looks like the $.html() function ignores other functions and is always executed first.

If I simply assign the data directly to the variables, it works. The problem is that I need to read a JSON file to get the data.

How can I solve this problem?

EDITED: I just found out that this problem only happens when I use X3D inside the HTML. With normal HTML, $.html() works fine. But with X3D, the function $.html() doesn't behave properly. So I am still trying to figure out how to solve this problem.

javascript html jquery x3d
Original Q&A
3

There are 3 best solutions below

0
mvoelcker On

Im not an expert in jQuery, but by rapidly looking it up, I think you should try the .then() function after the getJSON, and then write the rest of the code inside the then brackets. An example of this is used in this question

Also, instead of .then(), you could use the .done() as specified in this link (you will have to scroll down a little to see the .done() examples)

Another alternative would be to add your $("div").html() inside the getJson call back function, like this:

 $.getJSON("dados_teste.json", function(data) {
     //your current code
     //you $("div").html() code
 }

let me know if this answer is helpful :)

3
Kinglish On

Trying to time the execution of one task with the beginning of another is called a race condition and should be avoided. Instead call your .html() AFTER you have received your variables. Because you have 2 separate dependent processes creating variables, you can just check for them in the makeDiv() function.

var str, str_tri
 $.getJSON("dados_teste.json", function(data) {
               ...
                str = str.slice(0, -2);
                makeDiv();
            });
 $.getJSON("tri_teste.json", function(data) {
               ...
                str_tri = str_tri.slice(0, -2);
                makeDiv();
            });


function makeDiv() {
 if (!str || !str_tri || str =='' || str_tri == '') return;
 $("div").html( `......`);
}
0
Lucas Voelcker On

I tried making this code work in many different ways using javascript and figured out that the problem was the X3D. All the answers posted so far make sense, but they don't work when there is X3D included in the HTML code.

So I decided to use PHP instead, and now it is working!

<html> 
    <head> 
        <title>Superficie soja 63</title>           
        <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> 
        
    </head> 

    <body> 
        <h1>Superficie soja 63</h1> 

        <?php
            $path = "dados_teste.json";
            $file = fopen($path, "r");
            $data="";
            while(!feof($file)){
                $data .= fread($file, filesize($path));
            }
            fclose($file);
            $data= json_decode($data, true);
            $str="";
            for($cont=0; $cont < count($data["pontos"]); $cont++){
                if($cont < count($data["pontos"])-1)
                    $str .= ($data["pontos"][$cont]["x"] . " " . $data["pontos"][$cont]["y"] . " " . $data["pontos"][$cont]["z"] . ", " );
                else
                    $str .= ($data["pontos"][$cont]["x"] . " " . $data["pontos"][$cont]["y"] . " " . $data["pontos"][$cont]["z"] );
            }
            
            $path = "tri_teste.json";
            $file = fopen($path, "r");
            $data="";
            while(!feof($file)){
                $data .= fread($file, filesize($path));
            }
            fclose($file);
            $data= json_decode($data, true);
            $str_tri="";
            for($cont=0; $cont < count($data["triangulos"]); $cont++){
                if($cont < count($data["triangulos"])-1)
                    $str_tri .= ($data["triangulos"][$cont]["tri_a"] . " " . $data["triangulos"][$cont]["tri_b"] . " " . $data["triangulos"][$cont]["tri_c"] . ", " );
                else
                    $str_tri .= ($data["triangulos"][$cont]["tri_a"] . " " . $data["triangulos"][$cont]["tri_b"] . " " . $data["triangulos"][$cont]["tri_c"] );
            }

            echo "
            <x3d width='1000px' height='1000px'> 
                <scene> 
                    <shape> 
                        <appearance>
                            <ImageTexture 
                            url='https://thumbs.dreamstime.com/b/macro-soybean-food-texture-background-top-view-96368287.jpg'/>
                        <TextureTransform
                            translation='0 0'
                            rotation='0'
                            repeats='true'
                            repeatt='true'
                            scale='80 80'/>
                        </appearance>
                        
                        <IndexedTriangleSet 
                            ccw='true' 
                            colorPerVertex='true' 
                            index='${str_tri}'
                            normalPerVertex='true' 
                            solid='false'
                            containerField='geometry'>
                            <Coordinate
                                point='${str}'/>
                            <Viewpoint
                                position='0 0 10'
                                orientation=''
                                description='camera'/>
                        </IndexedTriangleSet>
                    </shape> 
                </scene> 
            </x3d>
            ";
        ?>

    </body> 
</html>

My conclusion is: if you are working with X3D, it might be better to use a back-end programming language.

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in X3D

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.