Forum Discussion

cike's avatar
cike
Champion
11 years ago

"Unterminated String literal" error when append component

Hey guys,

 

I'm trying to append a component (e.g. pagination) to my page using jQuery's append()-function:

 

$("mySelector").append('<@component id="common.widget.pager"/>');

 

But this piece of code causes a "SyntaxError: unterminated string literal" on my console.

I think the reason could be all the "\n" signs, which appear within the components code.

 

Is there an option or a workaround to append a component with the .append()-function?

 

Cheers,

Christian

  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    11 years ago
    Why do you want to append it using jQuery, you can use the <@component id="common.widget.pager"/> directly in freemarker.
  • nathan's avatar
    nathan
    Executive
    11 years ago

    I assume that your code is inside a Custom Component. In which <@component .../> will evaluate to something like this:

    <div class="lia-paging-full-wrapper lia-component-common-widget-pager" class="lia-paging-full-wrapper" id="pager_147ee2d9505">
		<div class="lia-inline-ajax-feedback">
			<div class="AjaxFeedback" id="ajaxFeedback_147ee2d9505"></div>
		</div>
		<div class="lia-inline-ajax-feedback">
			<div class="AjaxFeedback" id="ajaxFeedback_147ee2d9505"></div>
		</div>
		<ul class="lia-paging-full">
					<li class="lia-paging-page-previous lia-component-previous" class="lia-paging-page-previous">
						<span class="lia-link-navigation lia-js-data-pageNum-1 lia-link-disabled" id="link_0_147ee2d9505">
							<span>
								
									<span class="lia-paging-page-arrow">&#171;</span>
								 
								<span class="lia-paging-page-link">Previous</span>
							</span>
						</span>
					</li>
...
		</ul>
	</div>

     

    When it gets to the browser, the source code will look like this:

    $("mySelector").append('<div class="lia-paging-full-wrapper lia-component-common-widget-pager" class="lia-paging-full-wrapper" id="pager_147ee2d9505">
		<div class="lia-inline-ajax-feedback">
			<div class="AjaxFeedback" id="ajaxFeedback_147ee2d9505"></div>
		</div>
...
</div>');

     As you rightly speculate, JavaScript doesn't like having line breaks in string literals.

     

    The solution depends on what you want to achieve. I'm guessing from the context that you want to inject the pagination into part of the page that you cannot edit (i.e. inside an in-built component).

     

    One solution is to do something like this:

    <div id='pagination_to_move' style='display: none'>
  <@component id="common.widget.pager"/>
</div>

<@liaAddScript>
   LITHIUM.jQuery("#pagination_to_move").detach().appendTo("mySelector");
   LITHIUM.jQuery("#pagination_to_move").show();
</@liaAddScript>

    With this approach, the pagination will be initially loaded inside a hidden div container. Then, when the page is loaded, jQuery will move the container to the appropriate place on the page, and unhide it.

    • cike's avatar
      cike
      Champion
      11 years ago

      Does this approach also work, if I define the pagination by myself?

       

      Currently I used the code below (with a more complex custom component) and try to append this to my page.

       

      <#-- Setting page size -->
<#assign page_size = 10 />

<#-- Getting page number from URL, default = 1 -->
<#assign page_number = webuisupport.path.parameters.name.get("page", 1) />

<#-- Getting all recent messages -->
<#assign messages = rest("/topics/recent?restapi.response_style=view&page_size=" + page_size + "&page=" + page_number).messages.message />

<#-- Getting total number of results -->
<#assign result_list_size = rest("/topics/recent/count").value />

<#-- Pagination configuration options -->
<#-- setPagingMode has a few different options (see FM context objects) -->
<#assign pageable_item = webuisupport.paging.pageableItem.setCurrentPageNumber(page_number).setItemsPerPage(page_size).setTotalItems(result_list_size?number).setPagingMode("enumerated").build />

<#-- BEGIN - Custom Component code goes here - BEGIN -->
<ul class="message-list">
<#list messages as message>
  <li class="message-item">
   <#-- Message Content -->
   	Item
  </li>
</#list>
</ul>
<#-- END - Custom Component code goes here - END -->

<#-- Pagination component using the config we defined above -->
<@component id="common.widget.pager" pageableItem=pageable_item />

       

      • nathan's avatar
        nathan
        Executive
        11 years ago

        Defining the pagination yourself shouldn't change anything.

         

        It might help if you explain why you need to use jQuery to append the pagination component. Normally you just insert your custom component into the appropriate location on the page or inside another component.

  • irach15's avatar
    irach15
    Maven
    8 years ago

    cike,

    did you find the way to do it inside javascript?
    I need pretty much the same, and was not able to find the answer...

    I have a custom component that needs to be plugged only using javascipt to another component after some script on a fly...

    something like:

    <#if !user.registered>
    <@liaAddScript>
    ;(function($){
$('.someClass').append(<@component id="custom-component>);
console.log('Im not registered!');
    })(LITHIUM.jQuery);
    </@liaAddScript>
<#else>
<@liaAddScript>
    ;(function($){
        console.log('im in!!');
    })(LITHIUM.jQuery);
    </@liaAddScript>
</#if>

    reading your comment, I probably can't do it, not sure if's the correct way to do.

    However, the only way I need it's that way, using javascript...

    Any ideas?

    nathan?

     

    • cike's avatar
      cike
      Champion
      8 years ago

      Hi irach15,

       

      unfortunately, as nathan described in his former posts it is not possible to append a piece of content which is rendered by the @component notation.

       

      For our case we find a solution which adds the pagination component via Freemarker. To handle the pagination we wrote some JavaScript which works with our component and community structure.

       

      Regards,

      Christian

      • irach15's avatar
        irach15
        Maven
        8 years ago

        cike,

        actually, in my case I'm able to do it and it's possible ;-)

        I'm adding one component inside another, both of them are custom components

         

        <div>
        <div id="hottopics"></div>
    </div>
    <@liaAddScript>
        ;(function($){
        // add another component
        
        var topics = $('#hottopics');
        
        topics.append('<@component id="test-plug-to-js"></@component>');
        

        console.log('i got through!');
        
        })(LITHIUM.jQuery);
    </@liaAddScript>

        the only trick is to strip-out white-spacing and line breaks in test-plug-to-js component.

         Wrap your component in 

         

        <@compress single_line=true>...</@compress>

        to get rid off line spacing

         

        http://freemarker.org/docs/dgui_misc_whitespace.html