"Unterminated String literal" error when append component

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.

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 />

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.

I've got three custom components which will be displayed using a tabbing navigation. Each of these components uses a custom pagination.

If I put these three component into my page, the pagination logic of one component will collide with the others, because they using the same "page"-parameter.

My approach was to only load one component, depending on the selected and active tab and to remove the others.

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?

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

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

Hi irach15,

that's nice. Have you tried your approach with Lithium default components too?