10 Replies Latest reply on Aug 4, 2014 6:36 AM by Xoco

    Accessing into element of a child symbol with array

    Xoco Level 3

      Hi, I have this code:

       

      var aXefsA = [];

      for (var i = 1; i <= maxXefs; i++) {

           sXefA = sym.createChildSymbol("sXefA", "rXefsList");

           aXefsA[i] = sXefA;

           aXefsA[i].getSymbolElement().css({"position":"fixed"});    

           aXefsA[i].getSymbolElement().css("left",x); //works fine

           sym.getSymbol(aXefs[i]).$("foto").css("background-image",'url('+'images/'+fXefs[i].imatge +')'); //don't work

      }

          

      In last line the console show this error: Javascript error in event handler! Event Type = element

       

      I try too:

           sym.getSymbol(sXefA).$("foto").css("background-image",'url('+'images/'+fXefs[i].imatge+') '); //don't work

      and:

           var symTest = sym.getSymbol(aXefs[i]);

           sym.getSymbol(symTest).$("foto").css("background-image",'url('+'images/'+fXefs[i].imatge+ ')'); //don't work

      but nothing, why?


        • 1. Re: Accessing into element of a child symbol with array
          joel_pau Level 5

          Hi,

          Did you try this one: "url( "images/"+fXefs[i].imatge+" )" );

          • 2. Re: Accessing into element of a child symbol with array
            Xoco Level 3

            Well, I just had not tried this:

                 aXefsA[i].$("foto").css("background-image",'url('+'images/'+fXefs[i].imatge +')');

            or:

                 sXefA.$("foto").css("background-image",'url('+'images/'+fXefs[i].imatge +')');


            I've changed image from div to img for clean syntax and I prefer your code, the array is unnecessary.

             

            Thank you very much.

            • 3. Re: Accessing into element of a child symbol with array
              Xoco Level 3

              Now more difficult (for me).

               

              I need a code for every xef element of child symbols created dynamically:

              elements.jpg

              But this code must be different for every instance of symbol, for example when click on xef <div> that show name of chef or when click on xef <div> show dates element.

               

              I don't know how to access to a dates <div> element, if I try:

              sXef.$("xef").click(

                   function onClickXef(evt){

                       $("dates").show();

              });

              or:

              sXef.$("xef").click(

                   function onClickXef(evt){

                        this.hide();

              });

              then:

              Uncaught TypeError: undefined is not a function

               

              And for the names of the chefs do not even know where to start, they are in array of objects (fXefs[5].nom for example). Can I to construct a string with variables for the function to assign to event or something?

              • 4. Re: Re: Accessing into element of a child symbol with array
                joel_pau Level 5

                I don't know if i understood.

                But to add click event on "foto", i will script:

                for (var i = 1; i <= maxXefs; i++) {

                    var sXefA = sym.createChildSymbol("sXefA", "rXefsList");

                    sXefA.getSymbolElement().css({"position":"fixed", "left",x});   

                    sXefA.$("foto").css("background-image","url("images/"+fXefs[i].imatge +")")

                                    .on("click", function(){window.open("http://www"+address, "_blank")})//address can be an array or a json.

                                    .on("mouseenter", doSomething)

                                    .on("mouseleave", doSomething);

                 

                So, you set events when you populate your symbol instances.

                • 5. Re: Re: Accessing into element of a child symbol with array
                  joel_pau Level 5

                  Now, i understood.

                  A case: The foto click will hide dates element. The loop will be:

                  sXefA.$("foto").css("background-image","url("images/"+fXefs[i].imatge +")")

                                      .on("click", function(){sXefA.$("dates").hide()});


                   

                  And for the names of the chefs do not even know where to start, they are in array of objects (fXefs[5].nom for example). Can I to construct a string with variables for the function to assign to event or something?

                   

                  Well, i don't imagine how your array is built.

                  1 person found this helpful
                  • 6. Re: Accessing into element of a child symbol with array
                    Xoco Level 3

                    Thanks for your answers.

                     

                    First I try:

                    sXef.$("xef").on("click", function(){

                         alert("Hola" + fXefs[i].nom);

                    });

                    but:

                    Uncaught TypeError: Cannot read property 'nom' of undefined

                     

                    And after I tried:

                    var nom = fXefs[i].nom;

                    sXef.$("xef").on("click", function(){

                         alert("Hola " + nom);});

                    but when click on any chef then show the name of the last chef of For loop (the last of array)!

                     

                    The problem for to make custom events for every instance using variables is not solved yet.

                     

                    And I have problem accessing to elements inside instances with custom code events, if I try:

                    sXef.$("xef").on("click", function(){

                         sXef.$("dates").css("display","block"); //nothing happens

                         sXef.$("nom").html("hola"); //nothing happens

                         alert("Hola"); //work

                    });

                    nothing happens and no errors in console, for to reference elements inside is not necessary something like this or parent? all other things outside events work perfectly, the symbol instance are created and with the For loop I change photo and name dynamically without problems.

                    • 7. Re: Accessing into element of a child symbol with array
                      joel_pau Level 5

                      Jo no tinc el do de la ubiqüitat. Yo no tengo el don de la ubicuidad. I am not ubiquitous.

                      I am trying to imagine your mistake.

                      I don't see instance name.

                      You have to use instance name and not library name.

                      symbole.jpg

                      Could you send me your file via a private message?

                      • 8. Re: Accessing into element of a child symbol with array
                        Xoco Level 3

                        Sorry, I changed symbol name, before was two symbols (sXefA and sXefB) and now only one symbol (sXef) with both elements.

                         

                        Private message sent to you.

                        • 9. Re: Re: Accessing into element of a child symbol with array
                          joel_pau Level 5

                          Code to fill the form (i mean to put the json inside the symbol):

                          var fXefs = {"cap":[

                          {inicials:"roca",nom:"Joan Roca",restaurant:"El Celler de Can Roca",imatge:"JoanRoca.jpg",dates:["2409"]},

                          and so on...

                          {inicials:"jr",nom:"Jordi Ribas",restaurant:"Sol Blanc",imatge:"JordiRibas.jpg",dates:["2310","2410","3010","3110"]}

                          ]};

                           

                          $.each(fXefs.cap, function(index,item){

                            var sXef = sym.createChildSymbol("sXef", "rXefsList");

                            sXef.getSymbolElement().css({"display":"inline-block","margin":"4px"});

                            sXef.$("foto").attr('src', 'images/'+item.imatge);

                            sXef.$("nom").html(item.nom.toUpperCase()+'<br>'+item.restaurant);

                            sXef.$("xef").on("click", function(){ sXef.$("xef").hide() });

                            sXef.$("dates").on("click",function(){ sXef.$("xef").show() });

                            var container = sXef.$("dates");

                            $.each(item.dates, function(index,item){

                            var dates = sym.createChildSymbol("dates", container);

                            dates.getSymbolElement().css({"display":"inline-block","margin":"10px"});

                            dates.$("data1d").html(item);

                            });

                          });

                           

                          Explanations:

                          I browse the json using: $.each(fXefs.cap, function(index,item){ ... });

                          I fill the form: sXef. sXef is a library symbol.

                           

                          Note: At last but not least, it runs fine. I tested it.

                          • 10. Re: Re: Accessing into element of a child symbol with array
                            Xoco Level 3

                            Thank you for your educational response.

                             

                            At the end of the code has been this (with the same lines of example, original code has more lines):

                             

                            var aXefs = [];

                            var fXefs = [

                            {inicials:"roca",nom:"Joan Roca",restaurant:"El Celler de Can Roca",imatge:"JoanRoca.jpg",dates:["2409"]},

                            and so on...

                            {inicials:"jr",nom:"Jordi Ribas",restaurant:"Sol Blanc",imatge:"JordiRibas.jpg",dates:["2310","2410","3010","3110"]}

                            ];

                             

                            The element "(cap)" (as "(none)" in english) is unnecessary because it was part of an old code to insert images in a div changing x and y before knowing the value inline of CSS display property in this post. I used a For loop from 1 to n and the first position (0) was not used.


                            I think that the problem with the first element "(cap") maybe was that the array contained a first string element while the rest elements were objects.

                             

                            $.each(fXefs.cap, function(index,item){

                              var sXef = sym.createChildSymbol("sXef", "rXefsList");

                              aXefs.push(sXef);

                              sXef.getSymbolElement().css({"display":"inline-block","margin":"4px"});

                              sXef.$("foto").attr('src', 'images/'+item.imatge);

                              sXef.$("nom").html(item.nom.toUpperCase()+'<br>'+item.restaurant);

                              sXef.$("xef").on("click", function(){ sXef.$("xef").hide() });

                              sXef.$("dates").on("click",function(){ sXef.$("xef").show() });

                              var container = sXef.$("dates");

                              $.each(item.dates, function(index,item){

                                var dates = sym.createChildSymbol("dates", container);

                                dates.getSymbolElement().css({"display":"inline-block","margin":"10px"});

                                dates.$("data1d").html(item);

                              });

                            });

                             

                            Finally I used an array because I need to access after to all instance for to show/hide chefs or dates in THE CHEFS section and I don't know another way to do:

                            viewdates.jpg

                            for (var i = 0; i <= maxXefs; i++) { aXefs[i].$("dates").hide() }

                            or

                            for (var i = 0; i <= maxXefs; i++) { aXefs[i].$("dates").show(); }

                             

                            With this change, the index_edge.js file before 250 kb and now 100 kb and web load faster. Thanks for all.