Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

renderWith output visible in console, but not in browser.


Go to End


2 Posts   1054 Views

Avatar
justin_t_brown

Community Member, 22 Posts

27 July 2016 at 6:31am

Edited: 27/07/2016 6:33am

Hello,

I'm unable to get my controller to properly render the results of an AJAX request in my browser. I receive the correct html response using the specified Include for Ajax requests, but it is only visible in my browser's console. The page itself does not render the new content. What am I missing?

Here is my simplified controller for searching products:

class ProductSearch_Controller extends Page_Controller {
  public function index(SS_HTTPRequest $request) {

    // external api request, parsing response, returning as ArrayList $units

    $return_data = array(
      'Products' => $units
    );

    if($request->isAjax()) {
      return $this->customise($return_data)->renderWith('SearchResults');
    } else {
      return $return_data;
    }
  }
}

The index method actually pulls in json data from an external source, parses it, and then passes it into an ArrayList, `$units`, which is then made available to the template as `Products`. Here is the simplified ProductSearch.ss template:

<section>
  <div class="container">
    <div class="productsearch__container">
      <aside>$SearchForm</aside>
      <main>
        <h2>Search Results</h2>
        <% include SearchResults %>
      </main>
    </div>
  </div>
</section>

Here's the SearchResults template Include:

<div class="product__container">
    <% loop $Products %>
      <a href="$URL" class="product">
        <h3>Unit $UnitNo</h3>
        <ul>
          <li>Price: $Lot_Price</li>
          <li>SQFT: $SQFT</li>
          <li>Bedrooms: $bedrooms_no</li>
          <li>Baths: $baths_no</li>
        </ul>
      </a>
    <% end_loop %>
</div>

And here is my simplified javascript:

$("[name='example-filter-variable']").on('change', function(e) {
  e.preventDefault();
  var params = $( "#Form_SearchForm" ).serialize();
  $.get("url/example?" + params, function(data) {
    console.log("Data: " + data);
  });
});

Triggering the ajax event returns the appropriate response using the SearchResults.ss Include, which is visible in my console.log() output:

<div class="product__container">
      <a href="/homes/search/show/6/101" class="product">
        <h3>Unit 101</h3>
        <ul>
          <li>Price: </li>
          <li>SQFT: 1531</li>
          <li>Bedrooms: 2</li>
          <li>Baths: 2</li>
        </ul>
      </a>
    
      <a href="/homes/search/show/12/102" class="product">
        <h3>Unit 102</h3>
        <ul>
          <li>Price: </li>
          <li>SQFT: 1535</li>
          <li>Bedrooms: 2</li>
          <li>Baths: 2</li>
        </ul>
      </a>

    ... and so on

</div>

The problem is the template is actually being rendered in the browser. Am I doing something wrong?

Avatar
justin_t_brown

Community Member, 22 Posts

28 July 2016 at 6:59am