Solve the situation where the Layui boot map is not displayed

Recently, I have been in contact with a project, because it is dual development on the original project, the project is used by the Layui framework, the landlord is the backstage direction, not touched the front end, in When using the Layui to implement the rotation map, it is found that the data is taken from the background, but the bench is not displayed, the display is as follows:

Use browser debugging discovery, 解决layui轮播图有数据不显示的情况 below There are already several

, indicating that there is data. Why don’t you show it? Later, I found that the page has been initialized before getting data, of course, can’t be displayed, it is time to call back the reload (options) method when obtaining data fill HTML.

Here is the code of dynamic traversal
An antioxample example of acquiring data code:
Layui.use (‘carousel’, function () {var carousel = layui.carousel; // Construction instance carousel.render ({elem: ‘# test1’, width: ‘100%’ // Set container width, arrow: ‘ ALWAYS ‘/ / Always display arrow ///, anim:’ updown ‘// Switch animation mode}); / / This is a substantially code $ .GET (“request URL”, function (data) { VAR TPL = $ (“# Charts”). html (); laytpl (tpl) .render (Data, Function (HTML) {$ (“# Test1”). Children (‘div “). HTML (HTML);});};});

solve the problem Code example:
   Layui.Use ('carousel', function () {var carousel = layui.carousel; // Construction instance var INS = carouser.render ({Elem: '# test1', width: '100%' // Set the container width, arrow: 'always' // Always display arrow //, Anim: 'updown' // switch animation method}); // Here It is a substantially code for asynchronous acquisition data with jQuery $ .GET ("Request URL", Function (DATA) {var TPL = $ ("# charts"). Html (); laytpl (tpl) .render (data, function) HTML) {$ ("# Test1"). Children ('div "). HTML (HTML); // This step is important ins. {elem:' # test1 '}; // Reset Renovation 

As for use

  $ ("# Test1" ) .children ('Div'). HTML (HTML);  
Because added IDNAME will report an error, so it is not possible to fill HTML

$ (“# idname”). Html (html);

The above solves the Layui booster map has data The situation shown is that Xiaobian shared all the contents, I hope I can give you a reference, I also hope that everyone will support Tumi Clouds.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment