JQuery Easyui Dynamic Add control or Ajax loading page does not automatically render problem resolution

Blog Category:

• Jquery-easyui

Jqueryajax Frame HTML

Phenomenon:

The HTML returned by Ajax cannot be automatically rendered as a Easyui style. For example: class= "Easyui-layout" etc.

Processing method:

After the HTML fragment has finished loading, use the

JS Code

1. $.parser.parse (context)

Can be re-rendered.

Implementation principle:

First, attach the source code of Jquery.parser.js

JS Code

2. (function ($) {
4. $.parser = {
6. Auto: true,
8. plugins:[' LinkButton ',' menu ',' Menubutton ',' SplitButton ',' layout ',
10. ' tree ',' window ',' dialog ',' the DataGrid ',
12. ' combobox ',' combotree ',' Numberbox ',' Validatebox ',
14. ' Calendar ',' Datebox ',' panel ',' tabs ',' accordion '
16. ],
18. Parse: function (context) {
20. if ($.parser.auto) {
22. For (var i=0; i<$.parser.plugins.length; i++) {
24. (function () {
26. var name = $.parser.plugins[i];
28. var r = $ ('. easyui-' + name, context);
30. if (r.length) {
32. if (R[name]) {
34. R[name] ();
36. } Else if (window.easyloader) {
38. Easyloader.load (name, function () {
40. R[name] ();
42. })
44. }
46. }
48. })();
50. }
52. }
54. }
56. };
58. $ (function () {
60. $.parser.parse ();
62. });
64. }) (JQuery);

The framework defaults to rendering the entire document using $.parser.parse () automatically after the page is loaded.

1. jQuery Easyui Dynamic Add control or Ajax loading page does not automatically render problem resolution:

We can render the page successfully on the page, as long as the corresponding Easyui Class,easyui is written, because the parser is parser by default when the document is loaded ($ (document). Ready) is called once, and the entire page is rendered.

When the page is finished loading, however, if the DOM generated by JavaScript contains the class of the Easyui support control, for example, the following code is generated with javascript:

<a id= "tt" href= "#" class= "Easyui-linkbutton" data-options= "iconcls: ' Icon-search '" >easyui</a>

Although there is such a DOM on the page, but not to be rendered as Easyui LinkButton plug-in, because Easyui does not always listen to the page, so do not actively render, this time you need to manually call Easyui parser to parse.

Manual calls require attention to the following points:

The parse target is all descendant elements of the specified DOM and does not contain the DOM itself:

For example, the above code generated html,id= "TT" is what we want to LinkButton, like the following code to manually parse the words can not get the results you want:

$.parser.parse ($ (' #tt '));

The reason is simple, parser only the descendants of the TT, not including the TT itself, and its descendants do not contain any Easyui supported by the control class, so this place will not get the effect you want, it should be written like this:

$.parser.parse ($ (' #tt '). parent ());

All descendants of the parent node of the TT are rendered, and no matter what dom your JavaScript outputs, rendering the parent node directly will ensure that the page is parsed correctly.

----------------------------------------------

Try it, yes.

JQuery Easyui Dynamic Add control or Ajax loading page does not automatically render problem resolution