Search code examples
javascriptjqueryajaxuibinder

What and the typical methods employed for UI bindings in an javascript/AJAX applications?

Some background

I'm currently building a predominantly classic web app (rather than a single page app) however the majority of my forms are AJAX.

I'm having trouble with binding the UI to my model - at the moment I have to explicitly:-

  1. Tell each button that produces a form where to fetch the form from (it's delivered, pre-populated as AJAH)

  2. Tell each form which content box it is tied to and must update on successful request

  3. Tell the content box where to go to refresh itself

This is done at the moment by adding these properties to the respective objects that generate them and the url for fetching is constructed by the js.

The question

I'd really like to tie everything together and make it easier (maybe with events or something?) but can someone explain in simple terms the mechanics of how UI bindings are typically implemented?

Solution

  • Ok, so the way I decided to do this was to define a ContentBox.Update() javascript method so every content box on the page can just be told to update itself.

    Then in my Form class on the server side I have a $form->bind($content_box_id); method which adds the binding to an array of bindings in the Form class which is passed to the javascript. Then once the form has been submitted, the array of bindings is looped over and the ContentBox.Update() method is called on each content box that the form is bound to.