Parsing pre-defined elements [solved]

[devnull]

A bit difficult to explain this, but I have a lot of elements in my application, most pages have tabs, and there are an average of 6 tabs per page, each tab may have 20 elements many of which will be comboboxes, dateboxes etc etc.

It can take as much as 30 seconds for all of the associated hidden panels for comboboxes etc to be generated in the DOM, this is making the application very sluggish.

So I have been experimenting with fragments (HTML5 templates) by only loading the first visible tab, and the rest of the tabs are only rendered when the tab is selected and the fragment is activated on demand.

This works if the element has all of it's data options set in the html code as data-options='', however it idoes not work if the element's attributes, events etc are defined in a javascript which is pre-loaded initially.

It is just not practical to define all of the events using HTML as some are very complex, and this means that those elements that have their definitions loaded when the page initially loads, are not enabbled when the fragment is activated and the element is parsed using $.parser.parse().

I guess what I am looking for is something like this that will wait for the element to be added:

Code:

<div id="mydiv" />

  function live(elid,cname,options){
    $(document).bind('DOMNodeInserted',function(e) {
      if(e.target.id==elid) {
        e.target.className = cname;
        for(var k in options){
          $(e).textbox('options')[k] = options[k];
        }
      }
    });
  }

  live('xx','easyui-textbox',{
    value:'xxxx',
    onChange: function(nv,ov){
      console.log(nv)
    }
  });    
  
  setTimeout(function(){
    $('#mydiv').append($('<input id="xx" />'));
  }, 2000)

can this be done ? - actually what i want to do is for the element to get it's pre-defined javascript attributes that were loaded with the page.

If easyui elements had a defer property and render() method, whereby they would be loaded to the DOM, but would not render or execute any code until the render(0 method was called, this would mean that it could be done without fragments ?

[stworthy]

To pre-attach options to an element without creating it, try to call 'data' method with the options object. And then create the customized function 'parseObject' to create this object.

Code:

function parseObject(t){
	var options = $(t).data('options') || {};
	var cls = options.easyui;
	if (cls){
		$(t)[cls](options);
	}
}
var conf = {
	textbox: {
		value:'xxxx',
		onChange:function(nv){
			console.log(nv);
		}
	},
	numberbox: {
		prefix: '$'
	}
}
$(function(){
	$(document).bind('DOMNodeInserted', function(e){
		var target = e.target;
		var cls = null;
		var ss = $(target).attr('class').split(' ');
		for(var i=0; i<ss.length; i++){
			var p = ss[i].substr(7);
			if (conf[p]){
				cls = p;
				break;
			}
		}
		if (cls){
			$(target).data('options', $.extend({}, conf[cls], {
				easyui: cls
			}));					
		}
	});
	setTimeout(function(){
		$('#mydiv').append('<input class="easyui-textbox" id="t1">');
		$('#mydiv').append('<input class="easyui-numberbox" id="n1">');
	},2000);
})

Calling 'parseObject' function will create the object with the pre-attached options.

Code:

parseObject('#t1');
parseObject('#n1');

[devnull]

Sorry for the delay, I was unable to get this to work as per your code snippet and got diverted onto other things.

I have created a fiddle using your code, but it does not seem to work for me: http://jsfiddle.net/72m654kg/4/

Also, the configuration ( conf{} ) would need to be a list of element IDs as there will be multiple elements of the same type on each page i.e.:

Code:

  var conf = {
  	t1: {
  		type: 'textbox',
  		value:'xxxx',
  		onChange:function(nv){
  			console.log(nv);
  		}
  	},

  	t2: {
  		type: 'textbox',
  		value:'yyyyyy',
  		onChange:function(nv){
  			console.log(nv);
  		}
  	},
  	
  	n1: {
  		type: 'numberbox',
  		value:100
  	}
  }

So I update the code and created a new fiddle, bu the elements are still not being rendered: http://jsfiddle.net/aj7e6jnh/2/

[stworthy]

You must call 'parseObject' function to parse the special component.

http://jsfiddle.net/aj7e6jnh/3/

[devnull]

Thanks, but the example I gave originally using the append() function was just to demonstrate that the elements are being added to the DOM dynamically.

But I am using the shadow DOM, and the elements will be created inside a template, when the elements are activated and converted into DOM objects, the easui elements need to be created automatically.

The advantage of this is that the page loads faster as the initial DOM is much smaller, and there is no delay waiting for all of the hidden panels to be created, or the ajax calls to be made before the page becomes idle and fully responsive.

This helps in situations where the page may have 20 or 30 inputs many of which are in non-active tabs, normally all of these 30 elements would be rendered as soon as the page loads creating hidden panels and making ajax calls which can take up to 30 seconds to fully complete.


I have updated the fiddle to show a real example using a template rather than just appending the elements with jquery:

http://jsfiddle.net/aj7e6jnh/6/

Also, rather than specifing the definitions in the conf{} object, it would be great if it could use the standard jquery search definition, but I am not sure if this is possible:

Code:

$('#text1').textbox(
    value:'xxxx',
    onChange:function(nv){
    	console.log(nv);
 })

$('#combo1').combobox(
  data:[
      	{value:'y',text:'YES'},
        {value:'n',text:'NO'}
      ],
      onSelect:function(rec){
      	console.log(rec.value);
      }
})

Thanks

[stworthy]

To parse a pre-defined element, please call 'parseObject' function instead.

http://jsfiddle.net/aj7e6jnh/7/

[devnull]

Thanks, that works