Releases note load ajax

[Marco Junior]

Hello everyone,

I started development the (releases note) using the "Pages application", but I have an small doubt/problem.

I make new template for the release notes, but the ajax load does not work on my page, if you have more experience with development application and customs for IPS maybe you can help-me, I will be happy !

Because I don't have experience with IPS development and the documentation IPS5 does not available for now.

This is result my current release note:

I need put the content notes on the white area, but when I click on any patch update notes, I will be send for the another URL / page, but I don't understand why it's behaving like this, because I follow the old tutorial, but following the current logic of v5 templates

 

Code:

{{$rowIds = array();}}
{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	{{$rowIds[] = $row->$idField;}}
{{endforeach}}
{{$iposted = ( $table AND method_exists( $table, 'container' ) AND $table->container() !== NULL ) ? $table->container()->contentPostedIn( null, $rowIds ) : array();}}

{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
<div class="ipsAreaBackground i-padding_2" data-baseurl="" data-resort="listResort" data-controller="core.global.core.table">
  <div class="ipsAreaBackground_reset ipsColumns ipsColumns_collapsePhone" data-controller="pages.front.releaseNotes.main">
    <div class="ipsColumn ipsColumn_wide ipsAreaBackground cReleaseColumn" data-role="releases">
      <ol class="ipsDataList ipsDataList_zebra ipsClear cCmsListing" id="" data-role="tableRows">
        <li class="cCmsRecord_row {{if $row->hidden()}}ipsModerated{{endif}}" data-rowid="{$row->$idField}">
          <a id="cReleaseId" data-ajax href='{$row->url()}' class='cRelease' data-releaseID='{$row->$idField}' {{if $row->fieldValues()['field_29']}}data-currentRelease{{endif}}>
            <h3 class="ipsType_sectionHead ipsType_break">
              {{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}
				      {$row->customFieldDisplayByKey('current_release', 'listing')|raw}
              {$row->customFieldDisplayByKey('beta_release', 'listing')|raw}
              {{if $row->isFutureDate() || $row->mapped('pinned') || $row->mapped('featured') || $row->hidden() === -1 || $row->hidden() === 1}}
				<span>
					{{if $row->isFutureDate()}}
						<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span>
					{{elseif $row->hidden() === -1}}
						<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span>
					{{elseif $row->hidden() === 1}}
						<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span>
					{{endif}}							
					{{if $row->mapped('pinned')}}
						<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span>
					{{endif}}
					{{if $row->mapped('featured')}}
						<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span>
					{{endif}}
				</span>
			{{endif}}
            </h3>
            {{if count( $row->customFieldsForDisplay('listing') )}}
            <div class="ipsDataItem_meta">
              {{foreach $row->customFieldsForDisplay('listing') as $fieldId => $fieldValue}}
              {{if $fieldValue && $fieldId != 'current_release' && $fieldId != 'beta_release' && $fieldId != 'security_release'}}
                {$fieldValue|raw}
              {{endif}}
              {{endforeach}}
            </div>
            {{endif}}
          </a>
        </li>
      </ol>
    </div>
  </div>
</div>
{{endforeach}}

 

Here the code records:

    <div class="ipsColumn ipsColumn_fluid">
      {{if \count($record->getMessages())}}
		<div class="i-padding_2">
			{template="contentItemMessages" group="global" app="core" params="$record->getMessages(), $record"}
		</div>
	{{endif}}

	<article>
		<div class='i-padding_3'>
			{{if \count($record->customFieldsForDisplay('display_top'))}}
				<ul class="ipsDatabaseFields i-margin-bottom_3">
					{{foreach $record->customFieldsForDisplay('display_top') as $fieldId => $fieldValue}}
						{{if $fieldValue}}
							<li>{$fieldValue|raw}</li>
						{{endif}}
					{{endforeach}}
				</ul>
			{{endif}}
			<section class="ipsRichText ipsRichText--user" data-controller='pages.front.releaseNotes.main'>{$record->_content|raw}</section>
			
			{{if $record->editLine()}}
				{$record->editLine()|raw}
			{{endif}}
			
			{{if $records = $record->getReciprocalItems()}}
				{{foreach $records as $fieldId => $items}}
					{{$infoLineShown = FALSE;}}
					<ul class="ipsList ipsList--csv i-margin-top_3">
					{{foreach $items as $item}}
						<li>{{if ! $infoLineShown}}{{$infoLineShown=TRUE;}}{lang="records_linking_to_me" sprintf="$item::database()->recordWord(0,TRUE), $record::database()->recordWord(1)"}: {{endif}}<a href="{$item->url()}">{$item->_title}</a></li>
					{{endforeach}}
					</ul>
				{{endforeach}}
			{{endif}}
		</div>
		{{if $bottomFields = $record->customFieldsForDisplay('display_bottom')}}
			<hr class='ipsHr'>
			<div class="ipsRichText ipsRichText--user i-padding_3" data-controller='pages.front.releaseNotes.main'>
			{{foreach $bottomFields as $fieldId => $fieldValue}}
				{{if $fieldValue}}
					{$fieldValue|raw}
				{{endif}}
			{{endforeach}}
			</div>
		{{endif}}
		
		<div class='ipsEntry__footer'>
			<menu class='ipsEntry__controls'>
				<li>
					{$record->menu()|raw}
				</li>
				{{if $record->canManageRevisions()}}
					<li><a href='{$record->url('revisions')}' title="{lang="content_view_revisions"}">{lang="content_view_revisions"}</a></li>
				{{endif}}
			</menu>
			{{if \IPS\IPS::classUsesTrait( $record, 'IPS\Content\Reactable' ) and settings.reputation_enabled}}
				{template="reputation" app="core" group="global" params="$record"}
			{{endif}}
		</div>
	</article>
    </div>

 

[Daniel F]

Where's your Javascript code?

This won't work without any additional JS which listens to the click event, stops the page from reloading, loads the content via AJAX and shows it then in the content area:) 

[Marco Junior]

1 minute ago, Daniel F said:

Where's your Javascript code?

This won't work without any additional JS which listens to the click event, stops the page from reloading, loads the content via AJAX and shows it then in the content area:) 

So that's the problem, your guide doesn't have javascript code just CSS and templates, so I was assuming that the ajax events were loaded through a standard template identifier.

You can show-me the example code for this ?

[Daniel F]

You could have looked at the HTML source code of https://invisioncommunity.com/release-notes/😉

 

https://content.invisioncic.com/a319035/page_objects/ips.releaseNotes_main.js.86736035dfd231b506912c0b58f793a3.js

[Marco Junior]

@Daniel F

Perfect.

I need only adjustment visual now 🙂 

Thanks for this !

[Goza]

Technically everything works just fine as-is but you just need to wrap the whole records template with #elCmsPageWrap since this is removed from IC5.

<div id='elCmsPageWrap'>
	Records template
</div>