JQuery .Load not loading css

Я начинаю разработку веб-сайта с использованием PHP, jQuery EasyUI, AJAX и CSS.JQuery .Load not loading css

На моем первом попробуйте использовать jeasyui в закладках все было хорошо, так как все включено в основном HTML ..

Здесь вы можете увидеть код, извлеченный из JQuery EasyUI учебника

<body> 
<h2>Nested Tabs</h2> 
<div class="demo-info"> 
    <div class="demo-tip icon-tip"></div> 
    <div>The tab panel can contain sub tabs or other components.</div> 
</div> 
<div style="margin:10px 0;"></div> 
<div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px"> 
    <div title="Sub Tabs" style="padding:10px;"> 
     <div class="easyui-tabs" data-options="fit:true,plain:true"> 
      <div title="Title1" style="padding:10px;">Content 1</div> 
      <div title="Title2" style="padding:10px;">Content 2</div> 
      <div title="Title3" style="padding:10px;">Content 3</div> 
     </div> 
    </div>

Как вы можете видеть все отлично работает, так как все включено в один и тот же html ...

Теперь я пытаюсь разделить вещи по разным файлам, чтобы все было организовано ... (здесь вы можете увидеть index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" type="text/css" 
    ref="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"> 
</script> 
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"> 
</script> 

    <script type="text/javascript" src="connections.js"></script> 
    <script type="text/javascript" src="codigo.js"></script> 

    <script language="javascript"> 

    $(document).ready(function(){ 

     $("#linkajax").click(function(evento){ 

      evento.preventDefault(); 
      //$(document).getElementById('resultado').innerHTML='sales.html'; 

      $("#resultado").load("sales.html"); 

     }); 
    }) 
    </script> 
    </head> 

<body > 
<div id="main" class="easyui-tabs" style="border:0;width:auto;height:700px;"> 
    <div title="Tab 1" iconCls="icon-reload" closable="false" onClick="listTab1()" 
style="padding:10px;"> 
     Tab 1 
        <table id="tab1_table" style="width:900px;height:650px"></table> 
    </div> 
      <div id="resultado" title="Tickets" iconCls="icon-reload" closable="false" style=" 
padding:10px;"> 
       <a href="#" id="linkajax">Click</a> 

    </div> 


</div> 
</body> 
</html>

здесь ... sales.html

<link rel="stylesheet" type="text/css" 
href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 
<html> 
<head> 
      <link rel="stylesheet" type="text/css" 
href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"> 
</script> 
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"> 
</script> 
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"> 
</script> 


</head> 
<body > 

    <div id="main2" class="easyui-tabs" style="border:0;width:auto;height:700px;"> 
    <div title="Tab 1" iconCls="icon-reload" closable="false" style="padding:10px;"> 
     Tab 1 
    </div> 
      <div title="Tickets" iconCls="icon-reload" closable="false" style=" padding:10px;"> 
        Tab 2 
    </div> 


</div> 


</body>

здесь .. результат

Result

Здесь вы можете увидеть, что вкладка вложенная не имеет CSS! ...

Есть ли у кого-нибудь предложения?

источник

2013-04-09 Ppp

Переместите тег ссылки внутри головы. –

Я не понимаю, что вы сказали о перемещении тега ссылки внутри головы ... – Ppp

в sales.html, я думаю, вы также можете оставить только div с содержимым там, вы так пробовали? –

Переименуйте sales.html в sales.php, а затем вызовите jQuery следующим образом.

<script language="javascript"> 

$(document).ready(function(){ 

    $("#linkajax").click(function(evento){ 

     evento.preventDefault(); 
     //$(document).getElementById('resultado').innerHTML='sales.html'; 

     $("#resultado").load("sales.php"); 

    }); 
}) 
</script>

Вы также выполняете «эхо» весь свой код в sales.php.

Надеюсь, что это поможет вам.

источник

2013-04-10 10:31:48

Nop .. тот же результат. – Ppp

Я не уверен, мог ли мой опыт помочь, однако, я столкнулся с подобной проблемой и исправил ее.

Я использовал панель easyui для загрузки различного содержимого в соответствии с пользовательскими выборами. Сначала я использовал

$('#panel').load('user_selection.html')

для загрузки различного содержимого. Но содержимое отображалось без эффекта easyui.

Тогда я изменил

$('#panel').panel('refresh','user_selection.html')

и затем работает отлично.

Надеюсь, это поможет.

Причина, IMHO, была панель easy-> функция обновления, может запускать некоторый скрипт easyui для рендеринга только что загруженного содержимого, в то время как функция load() jquery не может.

источник

2014-04-09 14:13:33

JQuery .Load not loading css

ответ

Смежные вопросы