Solved

Cant Find Jquery Callback Function in jquery databind plug in

Posted on 2011-02-23
4
565 Views
Last Modified: 2012-05-11
GOAL: to be notifed when data was bound with callback function to perform additional processing.

I am using following plug in and according to description it supposed to have callback function however  when I pass a function as a parameter to databind event  function fires before the binding so its not actual, if anyone can help me to either add a callback function to this code or maybe point me to existing one that I may have overlooked.

You may find examples and actual plug in file at
http://plugins.jquery.com/project/databind

AND HERE IS ACTUAL PLUG IN CODE SNIPPET:

/*
* DataBind plug-in v1.0.1
* Copyright (c) 2009 James Westgate
* Dual licensed under the MIT and GPL licenses.
*
*/

//Create closure
(function($) {

    //Plugin definition
    $.fn.extend({

        binddata: function(data, map, fn) {

            var $scope = $(this);
            if (fn != null && !$.isFunction(fn)) fn = null;
            if (map != null && $.isFunction(map)) map = null;

            //Return matched set iterator
            return this.each(function() {

                //Array map
                if ($.isArray(data)) {

                    var tagName = this.tagName.toLowerCase();

                    //Map 2d array to a table
                    if (tagName == 'table' || tagName == 'tbody') {
                        bindTable(data);
                    }
                    else if (tagName == 'select') {
                        bindSelect(this, data);
                    }
                }

                //Object map
                else if (typeof (data) == 'object') {

                    bindObject(data);
                }
            });

            function bindObject(json) {

                for (var key in json) {

                    var value = json[key];
                    var selector = '#' + key;

                    //Process child object
                    if (typeof (value) == 'object' && !$.isArray(value)) {
                        bindObject(value);
                        continue;
                    }

                    //Lookup map
                    if (map != null) {
                        var lookup = map[key];
                        if (typeof (lookup) == 'string') selector = lookup;
                    }

                    //Call function if required
                    var result = true;
                    if (fn != null) {

                        var args = { selector: selector, value: value };

                        result = fn(args);

                        if (result) {
                            selector = args.selector;
                            value = args.value;
                        }
                    };

                    //Set value
                    if (result) {

                        //Loop through each item in the selector
                        $(selector, $scope).each(function() {

                            var tag = this.tagName.toLowerCase();
                            var $this = $(this);

                            //Determine if an input use val
                            if (tag == 'input') {
                                $this.val(value);
                            }
                            //Bind arrays to drop down options, single values to a selection
                            else if (tag == 'select') {

                                if ($.isArray(value)) {

                                    bindSelect(this, value);

                                } else {

                                    //Set option value
                                    try {
                                        $this.val(value.toString());
                                    }
                                    catch (e) { };
                                }
                            }
                            //Bind text or html to selector
                            else {

                                // Check to see if the there is html in the text
                                if ($this.text() == $this.html()) {
                                    $this.text(value);
                                }
                                else {
                                    $this.html(value);
                                }
                            }
                        });
                    }
                }
            }

            function bindSelect(element, array) {

                var html = [];
                for (var i in array) {

                    var option = array[i];
                    if (typeof (option) == 'object') {

                        if ($.isArray(option)) {
                            html.push('<option value="');
                            html.push(option[0]);
                            html.push('">');
                            html.push(option[1]);
                        }
                        else {
                            var flag = true;
                            for (var key2 in option) {
                                var value2 = option[key2];

                                if (flag) {
                                    html.push('<option value="');
                                    html.push(value2);
                                    html.push('">');
                                    flag = false;
                                }
                                else {
                                    html.push(value2);
                                    break;
                                }
                            }
                        }
                    }
                    else {
                        html.push('<option>');
                        html.push(option);
                    }

                    html.push('</option>');
                }

                //Replace options with html
                $(element).html(html.join(''));
            }

            function bindTable(array) {

                var is2D = $.isArray(array[0]);
                var html = [];
                var row = [];
                var col;
                var selector = '';
                var result = true;
                var value = null;

                html.push('<tbody>');

                //Loop through each row
                for (var i in array) {
                    row = array[i];
                    selector = '<tr>';
                    result = true;

                    if (fn != null) {

                        var args = { element: selector, row: row, col: i };

                        result = fn(args)

                        if (result) selector = args.element;
                    };

                    //Bind each row
                    if (result) {

                        html.push(selector);

                        //Contain array of values
                        if (is2D) {

                            //Loop through each col
                            for (var i2 in row) {
                                value = row[i2];
                                selector = '<td>';
                                result = true;

                                //Lookup map
                                if (map != null && $.isArray(map)) {
                                    var index = map[i2];
                                    if (typeof (index) == 'number') value = row[index];
                                }

                                //Call any attached function
                                if (fn != null) {

                                    var args = { element: selector, value: value, col: i2 };
                                    result = fn(args);

                                    if (result) {
                                        selector = args.element;
                                        value = args.value;
                                    }
                                };

                                //Bind each col
                                if (result) {
                                    html.push(selector);
                                    html.push(value);
                                    html.push('</td>');
                                }
                            }
                        }

                        //Contains object
                        else if (typeof (row) == 'object') {

                            //Loop through each object key
                            var i = 0;
                            for (var key in row) {
                                value = row[key];
                                selector = '<td>';
                                result = true;

                                //Lookup map
                                if (map != null) {

                                    //Get key by current position in array
                                    key = map[i];
                                    value = row[key];
                                }

                                //Call the attached function
                                if (fn != null) {

                                    var args = { element: selector, key: key, value: value };
                                    result = fn(args);

                                    if (result) {
                                        selector = args.element;
                                        value = args.value;
                                    }
                                };

                                //Bind each col
                                if (result) {
                                    html.push(selector);
                                    html.push(value);
                                    html.push('</td>');
                                }

                                //Break out the loop if end of map
                                if (map != null && i >= map.length - 1) break;

                                i++;
                            }
                        }
                        //Simple type
                        else {
                            value = row;
                            selector = '<td>';
                            result = true;

                            //Ignore map

                            //Call any attached function
                            if (fn != null) {

                                var args = { element: selector, value: value };
                                result = fn(args);

                                if (result) {
                                    selector = args.element;
                                    value = args.value;
                                }
                            };

                            //Bind each col
                            if (result) {
                                html.push(selector);
                                html.push(value);
                                html.push('</td>');
                            }
                        }

                        html.push('</tr>');
                    }
                }

                //Replace the tbody
                html.push('</tbody>');
                $('tbody', $scope).replaceWith(html.join(''));
            }
        },

        unbinddata: function(json, map, fn) {

            var $scope = $(this);
            if (fn != null && !$.isFunction(fn)) fn = null;
            if (map != null && $.isFunction(map)) map = null;

            //Return matched set iterator
            return this.each(function() {

                //Get a list of mapped elements
                var elements = [];

                if (map != null) {

                    for (var key in map) {

                        //Loop through the map selector elements and add each element to the elements collection
                        $(map[key], $scope).each(function() {

                            var tag = this.tagName.toLowerCase();
                            var val = (tag == 'input' || tag == 'select') ? $(this).val() : $(this).text();

                            //Create element
                            elements.push({ element: this, name: key, value: val });
                        });
                    }
                }

                //Get child input and select elements
                $('input, select', element).each(function() {

                    var child = this;
                    var flag = true;

                    //Check elements collection if element already added
                    for (var i2 in elements) {
                        var element = elements[i2];
                        if (element.element == child) {
                            flag = false;
                            break;
                        }
                    }

                    if (flag) {
                        elements.push({ element: this, name: $(child).attr('id'), value: $(child).val() });
                    }
                });

                //Loop through the elements and output as object
                var element;
                var check;

                for (var i in elements) {

                    element = elements[i];
                    if (element.name == '') continue;

                    var values = [];
                    var first = true;

                    //Check for multiple values
                    for (var i2 in elements) {

                        check = elements[i2];
                        if (check.name == '') continue;

                        if (check.name == element.name) {
                            values.push(check.value);

                            if (element != check) check.name = ''; //prevent from being matched again
                        }
                    }

                    //Set the json output variable
                    var result = true;
                    var value = (values.length == 1) ? values[0] : values;

                    //Call function if available
                    if (fn != null) {

                        var args = { selector: element.name, value: value };
                        result = fn(args);

                        if (result) {
                            element.name = selector;
                            value = args.value;
                        }
                    };

                    json[element.name] = value;
                }
            });
        }
    });

    // end of closure
})(jQuery);

Open in new window

0
Comment
Question by:RestlessDreams
  • 3
4 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 34969115
Can you direct me to the line of code above where you are "pass a function as a parameter to databind event"
0
 

Author Comment

by:RestlessDreams
ID: 34971985
Its done in another page by using following syntax    

// Get JSON through Ajax
var response


 $(document).binddata(response,GetSimilarListing());


GetSimilarListing()
{
var  bed = $("#bed").html()
var bath = $("#bath").html()

//  DO another ajax call based on  parameters bed and bath
}

0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 34974958
yes and i can see your issue

try this:

// Get JSON through Ajax
var response 
var GetSimilarListing = function()
{
	var  bed = $("#bed").html()
	var bath = $("#bath").html()
	//  DO another ajax call based on  parameters bed and bath
}

$(document).binddata(response,GetSimilarListing);

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 34974972
with your code
 $(document).binddata(response,GetSimilarListing());

Open in new window


you are telling the script to call GetSimilarListing when you bind the data and the callback will be whatever is returned from that function (GetSimilarListing).  make sense?
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now