Solved

Cant Find Jquery Callback Function in jquery databind plug in

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Who uses Outlook dot com for e-mail (the former Hotmail) 19 73
Image decoding from Camera 3 85
web browser 3 46
Hide http port number 5 41
I had to do a bit of research to find the answer to this question so I thought I'd share my results.  Due to our outdated mainframe systems, we need to downgrade IE9 to IE8 in order to stay compatible.  We also needed to downgrade Java.  In order to…
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
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.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

813 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

16 Experts available now in Live!

Get 1:1 Help Now