Solved

Cant Find Jquery Callback Function in jquery databind plug in

Posted on 2011-02-23
4
590 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 43

Expert Comment

by:Rob
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 43

Accepted Solution

by:
Rob 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 43

Expert Comment

by:Rob
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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

749 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