0

I am building presentation builder and trying to write data from params into JavaScript object $("#data-store"). Everything goes smoothly, but the problems appear with @content. It contains the html for one slide. When I try to use parent.$("#data-store").data("content[<%=n%>]", "<%= @content[n.to_s].html_safe %>" ); in console Uncaught SyntaxError: Unexpected identifier appear. 

  var fillUpData = function() {
       if ( $.isEmptyObject(parent.$("#data-store").data())) {
         console.log("empty")
         parent.$("#data-store").data("wallpaper", "<%= @wallpaper %>" );
         parent.$("#data-store").data("imageNum", "<%= @imageNum %>" );
          <% @num_slides.times do |n| %> 
         parent.$("#data-store").data("background[<%=n%>]", "<%= @background[n.to_s] %>" );
         parent.$("#data-store").data("content[<%=n%>]", "<%= @content[n.to_s].html_safe %>" );
          <% end %>
         // parent.$("#data-store").data("data", [<%= @datastore.html_safe %>]);
          } else {
        console.log("notempty");
        }
      }

I think It might be a problem with the data structure in @content. params for @content looks lik that:

"content"=>{"0"=>"<img id=\"link2\" style=\"position: absolute\" src=\"http://i.imgur.com/X0XCFys.png \"><div class=\"editor\" contenteditable=\"true\" style=\"position: absolute; left: 743px; top: 312px;\"><h2 class=\"text2\">Title</h2></div><div class=\"ui-wrapper ui-draggable\" style=\"overflow: hidden; position: absolute; width: 128px; height: 128px; top: 225.1111125946045px; left: 508.1111145019531px; margin: 0px;\"><img id=\"link1\" style=\"position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;\" src=\"http://i.imgur.com/qTXDZhT.png \" class=\"ui-resizable\"><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"></div>\r\n                    \r\n         \r\n    \r\n        ", "1"=>"\r\n                    \r\n         \r\n    \r\n        ", "2"=>"\r\n                    \r\n         \r\n    \r\n        ", "3"=>"\r\n                    \r\n         \r\n    \r\n        ", "4"=>"\r\n                    \r\n         \r\n    \r\n        ", "5"=>"\r\n                    \r\n         \r\n    \r\n        ", "6"=>"\r\n                    \r\n         \r\n    \r\n        ", "7"=>"\r\n                    \r\n         \r\n    \r\n        "},

when I inspect this function in console I am getting something like this: 

 var fillUpData = function() {
   if ( $.isEmptyObject(parent.$("#data-store").data())) {
     console.log("empty")
     parent.$("#data-store").data("wallpaper", "http://i.imgur.com/cRrY9Fk.png" );
     parent.$("#data-store").data("text", "" );
     parent.$("#data-store").data("imageNum", "1" );
     parent.$("#data-store").data("background[0]", "url(http://i.imgur.com/nYkdOne.png)" );
     parent.$("#data-store").data("content[0]", "<div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;"><h2 class="text2">Titsadasdle</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up2 icon-on-edit" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down2 icon-on-edit" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"><i class="icon-move icon-on-edit" style="z-index: 2;"></i><i class="icon-font font2 icon-on-edit" style="z-index: 2;"></i><img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"></div><div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;"><img id="link1" style="position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;" src="http://i.imgur.com/qTXDZhT.png " class="ui-resizable"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"></div>



    " );
     parent.$("#data-store").data("background[1]", "url(http://i.imgur.com/zXJv24z.png)" );
     parent.$("#data-store").data("content[1]", "



    " );
     parent.$("#data-store").data("background[2]", "" );
     parent.$("#data-store").data("content[2]", "



    " );
     parent.$("#data-store").data("background[3]", "" );
     parent.$("#data-store").data("content[3]", "



    " );
     parent.$("#data-store").data("background[4]", "" );
     parent.$("#data-store").data("content[4]", "



    " );
     parent.$("#data-store").data("background[5]", "" );
     parent.$("#data-store").data("content[5]", "



    " );
     parent.$("#data-store").data("background[6]", "" );
     parent.$("#data-store").data("content[6]", "



    " );
     parent.$("#data-store").data("background[7]", "" );
     parent.$("#data-store").data("content[7]", "



    " );
      } else {
    console.log("notempty");
    }
  }

what can I do to being able to write params for each content into JavaScript object data()?

Improve this question
1
  • 1
    Look at the generated HTML. Commented Oct 30, 2013 at 1:13

1 Answer 1

Reset to default
3

Your generated HTML has a problem:

parent.$("#data-store").data("content[0]", "<div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;"><h2 class="text2">Titsadasdle</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up2 icon-on-edit" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down2 icon-on-edit" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"><i class="icon-move icon-on-edit" style="z-index: 2;"></i><i class="icon-font font2 icon-on-edit" style="z-index: 2;"></i><img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"></div><div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;"><img id="link1" style="position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;" src="http://i.imgur.com/qTXDZhT.png " class="ui-resizable"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"></div>")
//                                                     ^ etc.

There ae unescaped quotes throwing spanners in the works. Calling .html_safe isn't enough here; you'll need to run the HTML through a bit of code to replace " with \". Fortunately, this is a simple task:

tmp = @content[n.to_s].html_safe
begin
  # regex matches a double-quote not preceded by a backslash
  tmp[/(?<!\\)"/] = '\\"' while true
rescue
  # the regex failed; all quotes are now escaped (or no quotes in the first place)
end
# now echo tmp

parent.$("#data-store").data("content[0]", "<div class=\"editor ui-resizable ui-draggable\" contenteditable=\"true\" style=\"position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;\"><h2 class=\"text2\">Titsadasdle</h2><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up2 icon-on-edit\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down2 icon-on-edit\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash2 icon-on-edit\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><i class=\"icon-move icon-on-edit\" style=\"z-index: 2;\"></i><i class=\"icon-font font2 icon-on-edit\" style=\"z-index: 2;\"></i><img class=\"icon-font-size icon-on-edit\" src=\"/assets/font_size2.png\" style=\"z-index: 2;\"></div><div class=\"ui-wrapper ui-draggable\" style=\"overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;\"><img id=\"link1\" style=\"position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;\" src=\"http://i.imgur.com/qTXDZhT.png \" class=\"ui-resizable\"><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"></div>")

You can use a similar strategy to escape anything else that JavaScript might complain about.

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

8 Comments

I got error regexp not matched when I try to do it like that: parent.$("#data-store").data("content[<%=n%>]", "<%= @content[n.to_s].html_safe[/"/] = '\\"' %>" );
@lipenco Odd... I'll do some further testing and let you know.
thanks, I think it might be the problem with the part of code which is making a new line in ruby code. \\r\\n \\r\\n \\r\\n \"\n '4': ! \"\\r\\n \\r\\n \\r\\n \\r\\n i am not sure is it is reduced by .html_safe
@lipenco I improved the code, and I believe the improvements fixed the regex error as well.
thanks for that,for now I am using : parent.$("#data-store").data("content[<%=n%>]", "<%= @content[n.to_s].squish %>"); which is not giving me errors, but while printing it like that: @content[n.to_s].html_safe it will give me a quotes around and the html is shown as a text. How can I remove this quotes while printing it?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.