Download the PHP package kevindb/jquery-load-json without Composer
On this page you can find all versions of the php package kevindb/jquery-load-json. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download kevindb/jquery-load-json
More information about kevindb/jquery-load-json
Files in kevindb/jquery-load-json
Package jquery-load-json
Short Description jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM.
License LGPL-2.1
Homepage https://github.com/kevindb/jquery-load-json
Informations about the package jquery-load-json
jQuery loadJSON plugin
This is a jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM. No templating language is required - this plugin matches DOM elements in the HTML page with a JSON object using a DOM element properties.
Community
Want to contribute to jQuery loadJSON? Awesome! See CONTRIBUTING for more information.
Code of Conduct
Please note that this project is released with a Contributor Code of Conduct to ensure that this project is a welcoming place for everyone to contribute to. By participating in this project you agree to abide by its terms.
Requirements
Requires jQuery 1.7+.
Download
- Development: src/jquery.loadJSON.js
- Production/Minified: dist/jquery.loadJSON.min.js
CDN
or
Usage
To use loadJSON plugin two items should be defined:
- HTML code that will be used as template
- JSON object that will be used to populate template
HTML template
Template is plain HTML code. Only requirement is that elements that should be populated must have id, name, class, or rel attributes that have matching properties in the JSON object. Example of HTML template is shown below:
In the template h1 tag with id Name, and span tags with ids Address and Contact will be populated with JSON properties.
JSON object
Once HTML template is defined JSON object that will be used to populate template must be defines. Example of object that can populate template shown above is shown in the following listing:
Object has three properties (Name, Address, and Contact) that will be injected into the template.
Binding JSON object to the template
Once HTML template and JSON object are defined, JSON object can be loaded into the HTML code. This can be achieved using the following line of JavaScript code:
As a result 'data' object will be loaded into the HTML fragment with id data. Resulting HTML is shown in the following listing:
You can find detailed instructions how the plugin can be used in the following pages:
- How to load object into the HTML element where is explained how the JavaScript objects are loaded in the HTML elements
- Using loadJSON plugin as a template engine where is explained how this plugin can be used for generating output based on template
- Working with HTML forms where is explained how you can load HTML form with JavaScript object
Examples
You can see few live examples where it is shown how loadJSON plugin can be used:
- Creating list of elements - in this example is shown how the array of JSON objects can be bound to the simple HTML template,
- Showing details of the JSON object - this example shows how details about the single object can be bound to the HTML template,
- Populating form with JSON object - this example shows how you can populate form elements from the JSON object,
- Loading complex/hierarchical structure this example show how you can generate complex structures using loadJSON plugin,
- Generate template for array elements in this example is shown how you can define custom templates for different elements in the array,
- Adding load events in this example is shown how you can define on load events,
- Loading JSON from the external sites - in this example is shown how you can load JSON data that will be loaded from the external sites - in this case from the Bing Maps web service.
- Populating connected drop-downs using the Ajax calls - in this example is shown how you can load subcategories drop-downs when parent category drop-down is changed. Drop-down values are taken from the server-side via Ajax calls.
- Populating connected dropdowns using LINQ - in this example is shown how you can load subcategories dropdown when parent category dropdown is changed. Values are stored as a local JavaScript arrays and filtered using the LINQ library.
Contributors
This project has had several previous homes. See CONTRIBUTORS for details.
License
This repository is licensed under the GNU Lesser General Public License v2.1.
See LICENSE for details.