https://github.com/t1mmen/jquery.postandprocess

An opinionated jQuery plugin for dealing with FORMS, JSON responses & DOM updates
https://github.com/t1mmen/jquery.postandprocess

Last synced: 30 days ago
JSON representation

An opinionated jQuery plugin for dealing with FORMS, JSON responses & DOM updates

• Host: GitHub
• URL: https://github.com/t1mmen/jquery.postandprocess
• Owner: t1mmen
• Created: 2013-04-05T15:38:08.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2013-04-05T16:05:05.000Z (almost 12 years ago)
• Last Synced: 2024-11-14T12:55:08.483Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 125 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#### Overview

* [Basics](#basic-usage)

* [Options](#options)

* [Listeners](#listeners)

* [Events](#trigger-events)

* [JSON envelope](#json-envelope)

#### Dependencies

* [Handlebars.js](http://handlebarsjs.com/) for templates. 

## Basic usage

```html

    

    

    Get posts



  {{#each results}}

    <li id="post-{{Post.id}}">

      <h3>{{Post.headline}}</h3>

      <p>{{Post.intro}}</p>

      <a href="/posts/view/{{Post.id}}"

    </li>

  {{/each}}

​

```

```js

// Run plugin

$('#PostsSearch').postAndProcess({

    target : '#results',

    template : '#myTemplate',

    paginationCounter : '#current_page'

});

```

Read more about the [expected JSON response](#json-envelope)

## Options



    
data object : false



    
Preload first set of results. Supply an object identical to what the first XHR request would respond with.


    
target string



    
The selector of the DOM element you want the results placed in, ie #results



    
template string|array|obj



    
The id of Handlebars.js template to use. For multiple templates, try template: [ '#myTemplate', '#anotherTemplate']. See the pop.changeTemplateId event for more info.


    
submitOnEvent string : 'submit'



    
Which events trigger a form submit. NB! loadMore is automatically added as an event


    
paginationCounter string



    
Selector of the input that holds the page counter


    
spinner string : '.spinner'



    
Selector for spinner/loader. Automatically fades in/out on XHR activity.


    
infiniteScroll bool : false



    
Continue loading more results when scrolling to bottom of options.target? Particularly useful with results containers that have scrolling


    
noResultsMessage string : 'No results found'



    
If no results are found, show this message


    
noMoreResultsMessage string : 'All records loaded.'



    
If we've previously fetched results, but there are no more records, display this message


    
domWrapIn array : [ '<li class="list-empty">', '</li>' ]



    
Wrapper around noResultsMessage and noMoreResultsMessage.


    
onImageLoadEvent boolean : false



    
If true and $.fn.imagesLoaded is present, it will trigger pop.imagesLoaded event once all images have been downloaded




NB: You can set the options on the ``` ``` with data- attributes, like this:

```html

```



## Listeners



    
pop.before event, jqXHR, settings



    


        ```js

        // Set up listener

        $("#PostsSearch").on("pop.before", function(event, jqXHR, settings) {

            // this is triggered from $.ajax' beforeSend

            console.log(jqXHR);

            console.log(settings);

        });

        ```

    


    
pop.done event, data



    


        ```js

        // Set up listener

        $("#PostsSearch").on("pop.done", function(event, data) {

            console.log(data); // this holds the ajax response!

        });

        ```

    


    
pop.emptyResponse event, message, data



    


        ```js

        // When data.results is empty.

        $("#PostsSearch").on("pop.emptyResponse", function(event, message, data) {

            console.log(message);

            console.log(data); //

        });

        ```

    






## Trigger Events



    
pop.useTemplateId [ '#myTemplate' ]



    


        Change the template 


        ```js

        // Change template by #template-id

        $("#PostsSearch").trigger("pop.useTemplateId", ['#myTemplate']);

        // ..or by index:

        $("#PostsSearch").trigger("pop.useTemplateId", [ 0 ]);

        ```

        See options.templatefor more info.

    


    
loadMore

    
POSTs the form and appends the result to the options.target container.

        ```js

        // Use like this

        $("#PostsSearch").trigger("loadMore");

        ```


    





## JSON envelope

postAndProcess is opinionated when it comes to the JSON response. It requires these keys:



  
data.results

  
The results key contains the requested data.


  
data.status

  


      The status key is used to communicate extra information about the response to the developer.

      status.page and status.results_count are required for $.postAndProcess to function properly.

  



```js

// Sample:

{

  results: [

    {

      'User' : {

        id: "3",

        name: "Dr. Zoidberg",

        bio: "Why not zoidberg?",

        email: "[email protected]",

      }

    }

    // .. etc...

  ],

  status: {

    page: 1,

    results_count: 40,

    total_count: 271,

    limit : 40

  }

}

```

## Handlebars sample

```

{{#each results}}

<li id="user-{{User.id}}">

  <a href="<?php echo $editUrl; ?>/{{id}}/target:user-{{User.id}}/hbTemplate:hb-user-search-results" class="js-edit">

      <div class="list-thumbnail">

          <img src="<?php echo $thumbnailUrl; ?>/{{User.Attachment.0.id}}/150/150"> 

      </div>

      <div class="list-primary-info">

        {{User.name}}

      </div>

      <div class="list-extended-info">

        {{User.email}}, {{User.phone}}, <!-- etc -->

      </div>

  </a>

</li>

{{/each}}

​

```

## CakeController sample

```php

request->is('post') && isset($this->data['Search']['page'])) {

      $page = $this->request->data['Search']['page'];

      // etc..

    }

    // Conditions

    $conditions = array();

    // Results

    $response['results'] = $this->YourModel->find('all', array(

      'limit' => $limit,

      'offset' => ($page - 1) * $limit,

      'conditions'=>$conditions

      ));

    // Status

    $response['status']['page'] = $page;

    $response['status']['results_count'] = count($response['results']);

    $response['status']['total_count'] = $this->YourModel->find('count', array(

      'conditions'=> $conditions

      ));

    // Send data to view

    $this->set('results', $response);

    // Respond with JSON

    $this->RequestHandler->respondAs('json');

    $this->RequestHandler->renderAs($this, 'json');

    $this->set('_serialize', 'results');     

  }

?>

```