Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery .Load not loading css
    primarykey
    data
    text
    <p>I'm starting a web site develop using <code>PHP</code>, <a href="http://www.jeasyui.com/" rel="nofollow"><code>jQuery EasyUI</code></a>, AJAX, and CSS.</p> <p>On my first try using jeasyui's tabs everything was fine since all is included within main html..</p> <p>Here you can see the code extracted from jQuery EasyUI tutorial</p> <pre><code>&lt;body&gt; &lt;h2&gt;Nested Tabs&lt;/h2&gt; &lt;div class="demo-info"&gt; &lt;div class="demo-tip icon-tip"&gt;&lt;/div&gt; &lt;div&gt;The tab panel can contain sub tabs or other components.&lt;/div&gt; &lt;/div&gt; &lt;div style="margin:10px 0;"&gt;&lt;/div&gt; &lt;div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px"&gt; &lt;div title="Sub Tabs" style="padding:10px;"&gt; &lt;div class="easyui-tabs" data-options="fit:true,plain:true"&gt; &lt;div title="Title1" style="padding:10px;"&gt;Content 1&lt;/div&gt; &lt;div title="Title2" style="padding:10px;"&gt;Content 2&lt;/div&gt; &lt;div title="Title3" style="padding:10px;"&gt;Content 3&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>As you can see everything works fine since it's all included on same html...</p> <p>Now I'm trying to get things divided in differents files to get everything more organized ... (here you can see index.html)</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;link rel="stylesheet" type="text/css" ref="http://www.jeasyui.com/easyui/themes/default/easyui.css"&gt; &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="connections.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="codigo.js"&gt;&lt;/script&gt; &lt;script language="javascript"&gt; $(document).ready(function(){ $("#linkajax").click(function(evento){ evento.preventDefault(); //$(document).getElementById('resultado').innerHTML='sales.html'; $("#resultado").load("sales.html"); }); }) &lt;/script&gt; &lt;/head&gt; &lt;body &gt; &lt;div id="main" class="easyui-tabs" style="border:0;width:auto;height:700px;"&gt; &lt;div title="Tab 1" iconCls="icon-reload" closable="false" onClick="listTab1()" style="padding:10px;"&gt; Tab 1 &lt;table id="tab1_table" style="width:900px;height:650px"&gt;&lt;/table&gt; &lt;/div&gt; &lt;div id="resultado" title="Tickets" iconCls="icon-reload" closable="false" style=" padding:10px;"&gt; &lt;a href="#" id="linkajax"&gt;Click&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>here... sales.html</p> <pre><code>&lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"&gt; &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"&gt; &lt;/script&gt; &lt;/head&gt; &lt;body &gt; &lt;div id="main2" class="easyui-tabs" style="border:0;width:auto;height:700px;"&gt; &lt;div title="Tab 1" iconCls="icon-reload" closable="false" style="padding:10px;"&gt; Tab 1 &lt;/div&gt; &lt;div title="Tickets" iconCls="icon-reload" closable="false" style=" padding:10px;"&gt; Tab 2 &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>here.. the result</p> <p><a href="https://www.dropbox.com/s/6lpgnzpodbqj54l/tab.png" rel="nofollow">Result</a></p> <p>Here you can see that nested tab has no css !...</p> <p>Does anyone have any suggestions?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload