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">«</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.
