With Easyui, a text box about date format Gets the problem of not getting a value in the normal way

This is a side dish in the actual work encountered problems, I believe many Easyui novice may also encounter such problems, so side dishes feel it necessary to share.

The problem is to start with Easyui's Datebox component, which is found with $ ("#id") when used with this component. val () This form, actually can't get the value of the text box!

After a degree of Niang help, found can be used $ ("#id"). Datebox (' GetValue '), but why is it pinched?

After a study and exploration, side dishes found that if an input plus class= "Easyui-datebox", which is declared to use the Datebox component on top of this text box, then after the Easyui engine scan, will automatically add a variety of styles for this text box, at the same time, Easyui removed the ID and Name property on this text box! Finally, it will add a hidden text box near this text box, the name of the text box and the name of the original text box, the id attribute is directly discarded .... The value of this hidden text box is the date we see.

This reader should understand why $ ("#id"). Val () does not get the value because the original text box ID attribute has been removed, the newly created hidden text box also has no id attribute, so the value can be given by the official $ ("#id"). Datebox (' GetValue ' ) make up (specific people how to get, side dishes do not understand AH).

However, this is just the case with the ID selector, and don't forget the name, which we can get through $ ("Input[name= ' mydate ')"). Val () This way gets the value of the text box.

Therefore, if you do not want to use $ ("#id"). Datebox (' GetValue '), then do not add the ID, or do not use the ID selector, the text box with a Name property, it is easy to get the value.

In addition, if you use the tag Selector, that is, the Name property, and then use the. Datebox (' GetValue ') to get the value, then the error oh ... For example: $ ("input[name= ' mydate ')"). Datebox (' GetValue '), will be reported TypeError: $.data (...) is undefined.

Said so much, seems to have not entered the topic, the reader should also be able to realize that in a certain input tag add class= "Easyui-datebox", it can automatically become a calendar, which is actually the result of Easyui scan, after the page load is completed, equivalent to in $ ( Document). In the Ready () event, a scan of the entire Web page found that an input tag contained the class= "Easyui-datebox" attribute, as mentioned above, not just easyui, but almost all of the UI is this principle.

Therefore, if we use what append, Appendto method dynamically inserts a piece of HTML code in the page, or what AddClass method to dynamically add a class attribute to the input tag, these operations Easyui is not known, so the newly inserted stuff, Even if there is a class= "Easyui-datebox" attribute, it has no effect.

How to notify Easyui? By querying the data, it is found that one way of online comparison is to use: $.parser.parse (). Usually a side dish like me might just be used, put it in the HTML statement, re-render the interface, it really works, the newly added elements can be recognized.

However, the side dish quickly discovers a problem, because the whole page is re-rendered using $.parser.parse (), which affects the previously rendered component.

For example: The page originally had an input tag that used the Datebox component, the user chose the time through the Datebox component, and then the user added a new input tag that uses the Datebox component (when the program re-renders the page). Strange thing happened: the original input tag has already chosen time, the display is also normal, but can not get the value!

Based on the idea of a side dish, the reason is that on $.parser.parse (), because it renders the entire page, previously normal components are rendered, equivalent to all components being "initialized", resulting in a loss of value.

Again carefully asked degree Niang, found $.parser.parse () is can take parameters, parameter meaning is about to pass in a local DOM object, only partial rendering, to avoid affecting other components.

An ingenious example of application:

var targetobj = $ ("<input name= ' mydate ' class= ' Easyui-datebox ' >"). AppendTo ("#id");

$.parser.parse (Targetobj);

We often use the Appendto method to insert the input tag that uses the Datebox component into a DOM, and don't forget that the Appendto method has a return value, which is exactly the object that was just inserted. We get this object and render it separately, so that both dynamic rendering and other components can be avoided.

Therefore, in a reader's project, it is best to use local rendering (whichever way you get the target object) and avoid global rendering.

Original link: http://blog.csdn.net/helin916012530/article/details/39050225

For a text box using Easyui about the datetime format, see http://www.cnblogs.com/libingql/archive/2011/09/25/2189977.html

With Easyui, a text box about date format Gets the problem of not getting a value in the normal way