duanbei2914 2016-06-17 11:42
浏览 80

Jquery加载丢失CSS

I need to update the contents of a div, even so good, do it perfectly. However when the content updates I lose the updated css div.

$('#content').load('agenda.php?clinica='+data);

how is

enter image description here

As it should be

enter image description here

Anyone have any idea what I can do to solve it? I know that if I add all the CSS on the page that is being loaded the problem is solved, the more I think that would not be the ideal solution because it would be doubling the CSS.

html page that receives the update.

<html class="st-layout ls-top-navbar ls-bottom-footer show-sidebar sidebar-l2" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title><?=$nomesite?></title>
  <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
  <link href="../css/vendor/all.css" rel="stylesheet">
  <link href="../css/vendor/magicsuggest.css" rel="stylesheet">
</head>
<body>
  <div class="st-container">
    <?php include 'navbar/navbar.php'; ?>
    <?php include 'chat/chat.php'; ?>
    <div class="st-pusher">
      <div class="sidebar left sidebar-size-2 sidebar-offset-0 sidebar-skin-blue sidebar-visible-desktop" id=sidebar-menu data-type=collapse>
        <div class="split-vertical">
          <div class="sidebar-block tabbable tabs-icons">
          </div>
          <div class="split-vertical-body">
            <div class="split-vertical-cell">
              <div class="tab-content">
                <?php include "menu/menu.php"; ?>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="st-content" id="content"></div>

    </div>
    <? include ('../includes/footer.php');?>
  </div>
  </script>

 <script src="../js/vendor/all.js"></script>
 <script src="../js/app/app.js"></script>
 <script src="../js/app/jquery.mask.js"></script>
 <script src="../js/app/dentist.js"></script>
 <script>
  $(".setClinica").click(function(){
    $.ajax({
       type: "POST",
       url: "../ajax/setClinica.php",
       data:{
         nome:$(".setClinica").attr("name"),
         id:$(".setClinica").attr("id")
       },
       success: function(data){
         $('#tk-modal-demo').modal('toggle');
         $(".showModal").html($(".setClinica").attr("name"));

         $.get('../ajax/getSessionClinicaId.php', function(data)
         {
           $('#content').load('agenda.php?clinica='+data);
         });
       }
   });
  });
  </script>
</body>
</html>

This is the content that I carry to the page using jquery load

<div class="st-content-inner">
<div class="container-fluid">
  <h1>Agenda</h1>
  <div class="row">
    <div class="col-md-4 col-lg-3">
      <? if($_GET['clinica']){?>
      <div class="panel panel-default">
        <div class="panel-body">
          <strong><p class="text-center">Selecione o profissional</p></strong>
          <p class="lead text-primary margin-v-10">
          </p>
          <div class="form-group">
            <? $profissionais = $dados->Profissionais($_GET['clinica']); ?>
            <select id="profissionais" name="profissionais" class="selectpicker" data-style="btn-white" data-live-search="true" data-size="5">
            <option value="">Selecione</option>
            <? foreach($profissionais as $profissional){ ?>
              <option value="<?=$profissional->usuario?>"><?=$profissional->tratamento?> <?=$profissional->username?></option>
            <? } ?>
              </select>
          </div>
        </div>
      </div>
      <? } ?>
      <div id="picker" class="panel panel-default">
        <div id="datepicker" class="datepicker"></div>
      </div>
    </div>
    <div class="col-md-8 col-lg-9">
      <div id="agenda">
      </div>
    </div>
  </div>
</div>
</div>
  • 写回答

1条回答 默认 最新

  • dongyongyin5339 2016-06-17 12:02
    关注

    By the screenshots you provided I feel that you are using some plugin for select element. So when you use $.load you are actually loading some contents after DOM is ready and plugin is already initialized. Since, you can have a callback after load is complete, you can actually re-initialize the select plugin inside the callback. Below is just how you could do..

    $('#content').load('agenda.php?clinica='+data,function(){
       //callback function 
       //re-initialize anything here again
});
    评论

报告相同问题？

悬赏问题

  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题