jquery load()只会从外部页面加载html,没有样式表或jquery ui

时间:2013-04-23 18:18:46

标签: jquery-ui jquery

我有两页。为了便于说明,我将其称为页面A和页面B.当我在浏览器中打开页面B时,所有样式和jquery ui代码都正常工作,但是当我在页面A中的div中打开页面B时load()方法,唯一呈现的是原始html,没有样式,没有接口。问题是什么?下面是B页的代码,底部的代码是A页的代码:

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> //jquery ui

  <link rel="stylesheet" href="http://spilot.koding.com/lbStyle.css"/>  //stylesheet

 <script src="http://www.parsecdn.com/js/parse-1.2.2.min.js"></script> //parse database

   <script>

$(function(){
    var crowd = ' ';
    var ageGroup = ' ';
    var activity = [];
    var scene = [];
    var neighborhood = [];
    var date = [];
    var details = [];
    var time = [];
   Parse.initialize("ivHLAO7z9ml1bBglUNuPSgcWabXe3UeE2yCgKM2x","gNeGt04lU7xcew893EvbEJ05qqc4POVhBsIBSCVj");

   $(".menu").menu({
        select: function (event, ui) {
            $('.selected', this).removeClass('selected');
        var selection = ui.item.addClass('selected').children('a').attr('name'); //add background color to selected menu item and get its attribute name
        var choice = ui.item.text(); //get text of menu selection


         if(selection == "ageGroup"){
        $("#ageGroup").text(choice); //change the text in the first <a> of ageGroup menu to ageGroup selection. 
        ageGroup = $("#ageGroup").text();
        }else{
         crowd = selection;
        }; 

        } // closes select function


    }); // closes menu
     $("button").click(function(){

var city = JSON.parse( localStorage.getItem('city') ); 
var niche = Parse.Object.extend(crowd);
var query = new Parse.Query(niche);
query.equalTo("ageGroup", ageGroup);
query.equalTo("city", city);
//query.include([activity.date.details.location.neighborhood.time])
query.find({
  success: function(results) {
    for (i = 0; i < results.length; i++){
    activity = results[i].get("activity");
    scene = results[i].get("location");
    neighborhood = results[i].get("neighborhood");
    date = results[i].get("date");
    details = results[i].get("details");
    time = results[i].get("time");

    };
  },
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

//alert("working");

}); //closes click() 

}); // close function()
</script>
 <script>

$(function(){
 $( "button" ).button(); 

});
    </script>

</head>

  <body>



 <div id="div1">

         <button>Button label</button>


<div id="div2">
 <ul class="menu">
    <li>
        <a href="#" id="ageGroup">Age Group</a>
            <ul>
                <li><a href="#" name="ageGroup">18-21</a></li>
                <li><a href="#" name="ageGroup">21-30</a></li>
                <li><a href="#" name="ageGroup">30-40</a></li>
                <li><a href="#" name="ageGroup">40-50</a></li>
                <li><a href="#" name="ageGroup">50-60</a></li>
                <li><a href="#" name="ageGroup">60-70</a></li>
                <li><a href="#" name="ageGroup">70-80</a></li>
                <li><a href="#" name="ageGroup">80-90</a></li>
                <li><a href="#" name="ageGroup">90-100</a></li>
            </ul>

    </li>
    </ul>  

</div>   

<div id="div3">
        <ul class="menu" id="menu">
                <li><a href="#" name="academic_artStudies" id="academic_artStudies"><img src="" alt="" /><h2>Academic: Art Studies</h2></a></li>
                 <li><a href="#" name="academic_Literature"><img src="" alt="" /><h2>Academic: Literature</h2></a></li>
                <li><a href="#" name="academic_socialSciences"><img src="" alt="" /><h2>Academic: Social Sciences</h2></a></li>
                <li><a href="#" name="academic_physicalNaturalSci"><img src="" alt="" /><h2>Academic: Physical/Natural Sciences</h2></a></li>

  </ul>

</div>

</div>



</body>
</html>

 --------------//PAGE A//--------------
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

  <script>
$(function(){


$("#mainDiv").load("http://myURl.com/find2.html"); //this is where I call load()

});
</script>

</head>
<body>
       //this is the div where I want the other page to load

     <div id="mainDiv">

     </div> 


</body>
</html>

1 个答案:

答案 0 :(得分:1)

由于您正在将页面“b”加载到页面“a”中,因此您需要在页面“a”标题中包含所有页面“b”样式表/ js。

请注意,您正在将一个完整的html页面加载到页面“a”,其中包括html,header,body,这是不可取的,您应该将页面“b”设置为仅包含所需标记的模板。 / p>

<强>更新

  1. 您将脚本嵌入到html中,这是一种不好的做法,将JS代码分离到不同的文件中。
  2. 当您在文件中包含JS代码时,它会在页面加载后立即运行,因此如果您将“pageb”代码放在“pagea”中,它将在加载“pagea”并加载“pageb”时立即运行'代码不会再运行。
  3. 您需要将“pageb”代码放入函数中,并在加载“pageb”内容后调用它。