5 Replies Latest reply on Mar 11, 2013 11:16 AM by joel_pau

    Insert a table in Edge from Wordpress thorough Json, but...

    AmintaAdobe Level 1

      Hi folks!

       

       

      I have to insert automatically a table contained in a page of a Wordpress site in a Edge composition.

       

      So, I've got the Json code of the page thorough a WP Plugin, validated it with JsonLint, copied in the file "Prova.json" and succesfully inserted in a Edge Composition in this way:

       

      CompositionReady

       

       

      $.getJSON('Prova.json', function(data){

       

       

        $.each(data,function(i,item){

                    sym.$("json").html(item.content)

                })

       

       

                                     })

       

       

      The problem is: the output - you see - is not a table.

       

       

      Original html page:

       

      OriginalHtml.jpg

       

      Edge output:

       

      EdgeOutput.jpg

       

      Here's the Json validated content:

       

      [

          {

              "title": "Organigramma",

              "content": "<tableborder='0'>\r\n<tbody><tr>\r\n<td>Udine</td>\r\n<td>Proloco</td>\r\n</tr>\r\n<tr>\ r\n<td>Latisana</td>\r\n<td>Proloco</td>\r\n</tr>\r\n<tr>\r\n<td>SanGiorgio</td>\r\n<td>Pr oloco</td>\r\n</tr>\r\n<tr>\r\n<td>Begamo</td>\r\n<td>Proloco</td>\r\n</tr>\r\n<tr>\r\n<td >Milano</td>\r\n<td>Proloco</td>\r\n</tr>\r\n<tr>\r\n<td>Genova</td>\r\n<td>Proloco</td>\r \n</tr>\r\n<tr>\r\n<td>Roma</td>\r\n<td>Proloco</td>\r\n</tr>\r\n<tr>\r\n<td>Trani</td>\r\ n<td>Proloco</td>\r\n</tr>\r\n<tr>\r\n<td>Milano</td>\r\n<td>Proloco</td>\r\n</tr>\r\n<tr> \r\n<td>Torino</td>\r\n<td>Proloco</td>\r\n</tr>\r\n</tbody>\r\n</table>"

          }

      ]

       

      Here are the project files: http://www.terredainventare.it/EdgeJson.zip

       

       

      Any help???

       

      Many thanks in advance!

       


      Davide

        • 1. Re: Insert a table in Edge from Wordpress thorough Json, but...
          joel_pau Level 5

          Hi,

           

          Your html table has an error.

          Your problem comes from: <tableborder'0'>.

          A space is missing between table and border.

          Because border'0' means no border, you can try <table>.

          Now, json and html are correct.

          This code:

          $.getJSON('Prova.json', function(data){

           

                    $.each(data,function(i,item){

                              console.log(item.content);

                              sym.$("json").html(item.content);

                    });

           

                    sym.$("table").css("width","100%");

                    sym.$("td").css({"border": "1px solid grey"});

           

          })

           

          returns:

          table.jpg

          1 person found this helpful
          • 2. Re: Insert a table in Edge from Wordpress thorough Json, but...
            joel_pau Level 5

            AmintaAdobe wrote:

             

            Original html page:

             

            OriginalHtml.jpg

            To rebuild the table above:

            $.getJSON( 'Prova.json', function(data){

                     $.each( data, function(i,item){ sym.$("json").html(item.content) } );

             

                      sym.$("table").css( {"width": "100%", "border-collapse": "collapse"} );

                      sym.$("tr").css( {"border-top": "1px solid grey", "border-bottom": "1px solid grey"} );

                      sym.$("td").css("padding", "5px");

            });

            • 4. Re: Insert a table in Edge from Wordpress thorough Json, but...
              AmintaAdobe Level 1

              THANKS Joel!

               

              As always, you're very kind to explain step by step what to do to fix a problem, I've already learned a lot of stuff from you in the last months on this forum!!

               

               

              I know that I'm a bit off topic, but I wonder if it is possible achieve this result: I would make that the Json  API Plugin (http://wordpress.org/extend/plugins/json-api/other_notes/) that I use in Wordpress pass the values directly to a Edge Animation that I'll insert in the same site, so when I update a table in a simple WP page this table is updated also in the Edge Animation.

               

              In the plugin Homepage I found what can be maybe the solution, but I can't understand what exactly to do:

               

              .1. Output-modifying arguments

              The following arguments modify how you get results back from the API. The redirect response styles are intended for use with the data manipulation methods.

               

               

              Setting callback to a JavaScript function name will trigger a JSONP-style callback.

              Setting redirect to a URL will cause the user's browser to redirect to the specified URL with a status value appended to the query vars (see the Response objects section below for an explanation of status values).

              Setting redirect_[status] allows you to control the resulting browser redirection depending on the status value.

              Setting dev to a non-empty value adds whitespace for readability and responds with text/plain

              Omitting all of the above arguments will result in a standard JSON response.

               

              I know that this matter can be a little offtopic but I know also that are many people that build or manage websites in WP and would use Edge in the same site (for this, there is the excellent Edge Suite plugin: http://wordpress.org/extend/plugins/edge-suite/), but there is also more people (in this forum too) that ask for insert in Edge animations a dinamically created code from external data.

               

               

              I thank you in advance if you want spend a little time in this matter!

               

               

              Many thanks for all!!

               

              Davide

              • 5. Re: Insert a table in Edge from Wordpress thorough Json, but...
                joel_pau Level 5

                I sent you a private message.