Databases
StackOverflow2013
Postsdbo
POruby inside JavaScript gives Uncaught SyntaxError: Unexpected identifier
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POruby inside JavaScript gives Uncaught SyntaxError: Unexpected identifier
    text
    copied!<p>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[&lt;%=n%>]", "&lt;%= @content[n.to_s].html_safe %>" ); in console Uncaught SyntaxError: Unexpected identifier appear. </p> <pre><code> var fillUpData = function() { if ( $.isEmptyObject(parent.$("#data-store").data())) { console.log("empty") parent.$("#data-store").data("wallpaper", "&lt;%= @wallpaper %&gt;" ); parent.$("#data-store").data("imageNum", "&lt;%= @imageNum %&gt;" ); &lt;% @num_slides.times do |n| %&gt; parent.$("#data-store").data("background[&lt;%=n%&gt;]", "&lt;%= @background[n.to_s] %&gt;" ); parent.$("#data-store").data("content[&lt;%=n%&gt;]", "&lt;%= @content[n.to_s].html_safe %&gt;" ); &lt;% end %&gt; // parent.$("#data-store").data("data", [&lt;%= @datastore.html_safe %&gt;]); } else { console.log("notempty"); } } </code></pre> <p>I think It might be a problem with the data structure in @content. params for @content looks lik that:</p> <pre><code>"content"=&gt;{"0"=&gt;"&lt;img id=\"link2\" style=\"position: absolute\" src=\"http://i.imgur.com/X0XCFys.png \"&gt;&lt;div class=\"editor\" contenteditable=\"true\" style=\"position: absolute; left: 743px; top: 312px;\"&gt;&lt;h2 class=\"text2\"&gt;Title&lt;/h2&gt;&lt;/div&gt;&lt;div class=\"ui-wrapper ui-draggable\" style=\"overflow: hidden; position: absolute; width: 128px; height: 128px; top: 225.1111125946045px; left: 508.1111145019531px; margin: 0px;\"&gt;&lt;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\"&gt;&lt;div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"&gt;&lt;/div&gt;&lt;div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"&gt;&lt;/div&gt;&lt;div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"&gt;&lt;/div&gt;&lt;img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"&gt;&lt;img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"&gt;&lt;img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"&gt;&lt;img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"&gt;&lt;img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"&gt;&lt;img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"&gt;&lt;img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"&gt;&lt;img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"&gt;&lt;/div&gt;\r\n \r\n \r\n \r\n ", "1"=&gt;"\r\n \r\n \r\n \r\n ", "2"=&gt;"\r\n \r\n \r\n \r\n ", "3"=&gt;"\r\n \r\n \r\n \r\n ", "4"=&gt;"\r\n \r\n \r\n \r\n ", "5"=&gt;"\r\n \r\n \r\n \r\n ", "6"=&gt;"\r\n \r\n \r\n \r\n ", "7"=&gt;"\r\n \r\n \r\n \r\n "}, </code></pre> <p>when I inspect this function in console I am getting something like this: </p> <pre><code> 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]", "&lt;div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;"&gt;&lt;h2 class="text2"&gt;Titsadasdle&lt;/h2&gt;&lt;div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"&gt;&lt;/div&gt;&lt;div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"&gt;&lt;/div&gt;&lt;div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"&gt;&lt;/div&gt;&lt;img class="icon-layer-up2 icon-on-edit" src="/assets/icon_layer_up.png" style="z-index: 2;"&gt;&lt;img class="icon-layer-down2 icon-on-edit" src="/assets/icon_layer_down.png" style="z-index: 2;"&gt;&lt;img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"&gt;&lt;i class="icon-move icon-on-edit" style="z-index: 2;"&gt;&lt;/i&gt;&lt;i class="icon-font font2 icon-on-edit" style="z-index: 2;"&gt;&lt;/i&gt;&lt;img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"&gt;&lt;/div&gt;&lt;div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;"&gt;&lt;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"&gt;&lt;div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"&gt;&lt;/div&gt;&lt;div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"&gt;&lt;/div&gt;&lt;div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"&gt;&lt;/div&gt;&lt;img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"&gt;&lt;img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"&gt;&lt;img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"&gt;&lt;img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"&gt;&lt;img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"&gt;&lt;img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"&gt;&lt;img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"&gt;&lt;img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"&gt;&lt;/div&gt; " ); 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"); } } </code></pre> <p>what can I do to being able to write params for each content into JavaScript object data()?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload