Загрузите содержимое страницы html (требуется поддержка jquery-скриптов) в div с помощью ajax/jquery

Я новый пользователь здесь, я хочу сообщить вам все, что я тщательно искал в отношении своей проблемы, но решение, которое я нашел, не работает в совершенстве.Загрузите содержимое страницы html (требуется поддержка jquery-скриптов) в div с помощью ajax/jquery

Вот мой код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>R A</title> 
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" 
    /> 
    <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="script/jquery-migrate-1.2.1.min.js"></script> 
    <script type="text/javascript" src="script/accord.js"></script> 
    <script type="text/javascript" src="script/jquery.nivo.slider.js"></script> 
    <script> 
$(window).load(function() { 
    $('#slider').nivoSlider({ 
     effect: 'random', 
     directionNavHide: false, 
     pauseOnHover: true, 
     captionOpacity: 1, 
     prevText: '<', 
     nextText: '>' 
    }); 
}); 
    </script> 
    <script type="text/javascript" src="script/loadcontent.js"></script> 

    </head> 

    <body> 

<div id="wrapper"> 
<div id="header"> 
    <img class="headright" src="images/leaf-Rt.gif" width="48" height="50" alt="#"> 
    <img class="headright" src="images/pine-cone-Rt.gif" width="58"  
    height="50"   alt="#"> 
    <img class="headleft" src="images/leaf-Lt.gif" width="48" height="50" alt="#"> 
    <img class="headleft" src="images/pine-cone-Lt.gif" width="58" height="50" alt="#"> 
    <h1><i>R F I</i></h1> 
    <h2><i>XYZ</i></h2> 
</div> 


    <ul id="menu"> 
<li><a id="link1" href"#">Home</a></li> 
<li> 
    <a href="#">Products</a> 
    <ul> 
     <li> 
      <a href="#">Agarbatti</a> 
      <ul> 
       <li><a href='#'>Raw</a></li> 
       <li><a href='#'>Scented</a></li> 
       <li><a href='#'>Flora</a></li> 
      </ul>    
     </li> 
     <li> 
      <a href="#">Dhoop</a> 
      <ul> 
       <li><a href='#'>Soft/Wet</a></li> 
       <li><a href='#'>Sticks</a></li> 
       <li><a href='#'>Cone</a></li> 
       <li><a href='#'>Sambrani</a></li> 
      </ul>    
     </li> 


    <li> 
      <a href='#'>Loban</a> 
    <ul> 
    <li><a href='#'>Powder</a></li> 
    <li><a href='#'>Hard</a></li> 
    </ul> 
    </li> 
    <li><a href='#'>Candles</a> 
    <ul> 
    <li><a href='#'>Rose Candles</a></li> 
    <li><a href='#'>Decorative Candles</a></li> 
    <li><a href='#'>Royal Candles</a></li> 
    <li><a href='#'>Heart Candles</a></li> 
    <li><a href='#'>Orchid Candles</a></li> 
    <li><a href='#'>Floating Candles</a></li> 
    <li><a href='#'>Ball Candles</a></li> 
    <li><a href='#'>Christmas Candles</a></li> 
    <li><a href='#'>Pillar Candles</a></li> 
    <li><a href='#'>Gourmet Candles</a></li> 
    </ul> 
    </li> 
    <li ><a href='#'>Stands</a> 
    <ul> 
     <li><a href='#'>Agarbatti/Incense</a></li> 
     <li><a href='#'>Loban Stands</a></li> 
     <li><a href='#'>Dhoops Stands</a></li> 
     <li><a href='#'>Candle Stands</a></li> 
    </ul> 
    </li> 
    <li ><a href='#'>Puja Items</a> 
    <ul> 
    <li><a href='#'>Camphor</a></li> 
    <li><a href='#'>Cow's Ghee</a></li> 
    <li><a href='#'>Rumal/Chundari</a></li> 
    <li><a href='#'>Mukut</a></li> 
    <li><a href='#'>Mala</a></li> 
    <li><a href='#'>Hawan Samagri</a></li> 
    <li><a href='#'>Cotton</a></li> 
    <li><a href='#'>Janva</a></li> 
    <li><a href='#'>Gau Mutr</a></li> 
    </ul> 
    </li> 
    <li ><a href='#'>Mehndi</a></li> 
    <li ><a href='#'>Napthelene Balls</a></li> 
    <li ><a href='#'>Perfumes & Attars</a></li>   
    </ul> 

    </li> 
<li><a href="#">Testimonials</a></li> 

<li> 
    <a href="#">About</a> 
</li> 
<li> 
    <a href="#">Contact</a> 
</li> 
    <li> 
    <a href="#">Trade Enquiry</a> 
</li> 
    </ul> 


    <div id="outer"> 
    <div class="inner">    
    <div id="main" align="center"> 


    </div><!--end main--> 
    <div id="left"> 

    <div id='cssmenu' style="top:2px"> 
    <ul> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Incense Sticks</span></a> 
    <ul> 
    <li><a href='#'><span>Raw</span></a></li> 
    <li><a href='#'><span>Scented</span></a></li> 
    <li class='last'><a href='#'><span>Flora</span></a></li> 
    </ul> 
    </li> 
    <li class='has-sub'><a href='#'><span>Dhoop</span></a> 
    <ul> 
    <li><a href='#'><span>Soft/Wet</span></a></li> 
    <li><a href='#'><span>Sticks</span></a></li> 
    <li><a href='#'><span>Cone</span></a></li> 
    <li class='last'><a href='#'><span>Sambrani</span></a></li> 
    </ul> 
    </li> 
    <li class='has-sub'><a href='#'><span>Loban</span></a> 
    <ul> 
    <li><a href='#'><span>Powder</span></a></li> 
    <li class='last'><a href='#'><span>Hard</span></a></li> 
    </ul> 
    </li> 
    <li class='has-sub'><a href='#'><span>Candles</span></a> 
    <ul> 
    <li><a href='#'><span>Rose Candles</span></a></li> 
    <li><a href='#'><span>Decorative Candles</span></a></li> 
    <li><a href='#'><span>Royal Candles</span></a></li> 
    <li><a href='#'><span>Heart Candles</span></a></li> 
    <li><a href='#'><span>Orchid Candles</span></a></li> 
    <li><a href='#'><span>Floating Candles</span></a></li> 
    <li><a href='#'><span>Ball Candles</span></a></li> 
    <li><a href='#'><span>Christmas Candles</span></a></li> 
    <li><a href='#'><span>Pillar Candles</span></a></li> 
    <li class='last'><a href='#'><span>Gourmet Candles</span></a></li> 
    </ul> 
    </li> 
    <li class='has-sub'><a href='#'><span>Stands</span></a> 
    <ul> 
    <li><a href='#'><span>Agarbatti/Incense</span></a></li> 
    <li><a href='#'><span>Loban Stands</span></a></li> 
    <li><a href='#'><span>Dhoops Stands</span></a></li> 
    <li class='last'><a href='#'><span>Candle Stands</span></a></li> 
    </ul> 
    </li> 
    <li class='has-sub'><a href='#'><span>Puja Items</span></a> 
    <ul> 
    <li><a href='#'><span>Camphor</span></a></li> 
    <li><a href='#'><span>Cow's Ghee</span></a></li> 
    <li><a href='#'><span>Rumal/Chundari</span></a></li> 
    <li><a href='#'><span>Mukut</span></a></li> 
    <li><a href='#'><span>Mala</span></a></li> 
    <li><a href='#'><span>Hawan Samagri</span></a></li> 
    <li><a href='#'><span>Cotton</span></a></li> 
    <li><a href='#'><span>Janva</span></a></li> 
    <li class='last'><a href='#'><span>Gau Mutr</span></a></li> 
    </ul> 
    </li> 
    <li class='last'><a href='#'><span>Mehndi</span></a></li> 
    <li class='last'><a href='#'><span>Napthelene Balls</span></a></li> 
    <li class='last'><a href='#'><span>Air Freshner</span></a></li> 
    <li class='last'><a href='#'><span>Perfumes & Attars</span></a></li> 
    </ul> 
    </div> 

    </div><!--end left--> 
    <div class="clearer"></div> 
    </div><!--end inner--> 


    <div class="clearer"></div> 

    </div><!--end outer--> 

    <div id="footer" > 
    <!-- <div class="iconleft"> 
     <a href="http://validator.w3.org/check?uri=referer"><img src="images/html- 
    blue.png" alt="Valid HTML 4.01 Strict" height="31" width="88"></a> 
    </div> 
    <div class="iconright"> 
     <a href="http://jigsaw.w3.org/css-validator/"><img src="images/css-blue.png" 
    alt="Valid CSS!" height="31" width="88"></a> 
    </div>--> 
    <p style="text-align:center;color:#FFF"> Copyright &#169;2013</p> 
    </div><!--end footer--> 

    </div><!--end wrapper--> 

    <div id="bodyfooter"></div> 
    </div> 

    </body> 
    </html>

Теперь то, что я хочу сделать здесь является то, что, когда я домой с идентификатором «# link1» в DIV моей главной странице, т.е. нажмите мое меню «#main» должен загрузить с ванной внешнего HTML файл home.html

home.html

<br /><br /> 
     <div class="slider-wrapper futurico-theme" > 

    <div id="slider" class="nivoSlider"> 

     <img src="image/slideshow/cycleall.jpg" alt=""> 

     <img src="image/slideshow/All-in-1.jpg" alt=""> 

     <img src="image/slideshow/ECO.jpg" alt=""> 

     <img src="image/slideshow/Fairy-Tale.jpg" alt=""> 

     <img src="image/slideshow/Heritage.jpg" alt="" /> 

     <img src="image/slideshow/honey.jpg" /> 

     <img src="image/slideshow/incense.jpg" /> 

     <img src="image/slideshow/Moods.jpg" /> 

     <img src="image/slideshow/Morning.jpg" /> 

     <img src="image/slideshow/Natya.jpg" /> 

     <img src="image/slideshow/Prestige.jpg" /> 

     <img src="image/slideshow/Sandalum.jpg" /> 

     <img src="image/slideshow/Three.jpg" /> 

     <img src="image/slideshow/wood.jpg" /> 


    </div> 

    <div id="caption1" class="nivo-html-caption"> 
     <strong>New Project</strong> <span></span> <em>Some description 
     here</em>. 
    </div> 

    <div id="caption3" class="nivo-html-caption"> 
     <strong>Image 3</strong> <span></span> <em>Some description 
     here</em>. 
    </div> 

    </div> 
    <br /><br /> 
    <script type="text/javascript" src="script/jquery.nivo.slider.js"></script> 
    <script> 
$(window).load(function() { 
    $('#slider').nivoSlider({ 
     effect: 'random', 
     directionNavHide: false, 
     pauseOnHover: true, 
     captionOpacity: 1, 
     prevText: '<', 
     nextText: '>' 
    }); 
    }); 
    </script>

Я использовал следующий код, но он берет меня к новой странице вместо загрузки страницы в «#main» делах.

jQuery(document).ready(function(){ 
    $('#link1').on('click', 'a', function(e){ //step 1 
    e.preventDefault(); //prevent default action, step2 
    var url = url("content/home.html"); //get the url, step 2 

    $.ajax({ //step 3 
    type: 'GET', 
    url: url, 
    //your other options 
    success: function(data){ //on success 
    $('#main').html(data); //update your div, step 4 
    } 
    }); 
    }); 
    });

Ранее я попытался следующий код, который работает, но сценарий JQuery не работает с ним

$(document).ready(function() { 
     $(document).on('click', '#link1', function (e) { 
     $('#main').load("content/home.html"); 
     e.preventDefault(); 
    }); 
    });

Вот что я получаю

http://i40.tinypic.com/2nsncs4.jpg

Вот что я хочу

http://i42.tinypic.com/tapoaa.jpg

Пожалуйста, помогите мне, я поражен ed. Спасибо.

источник

2014-01-19 geeksal

Добро пожаловать в Stackoverflow! Можете быть более конкретными? что не работает должным образом? любые ошибки консоли? – Sergio

Вам нужна функция [jQuery load()] (http://api.jquery.com/load/#loading-page-fragments), чтобы загрузить другие страницы в ваш текущий. – jammykam

Вы используете '$ (window) .load() ', чего вы хотите достичь? – Sergio

Вещи, где вы не правы:

Путь вы Binding событие на #link1, это должно быть $(container).on(event, target, function)
гиперссылка должна быть строка, я не понимаю, что это url("url.html")

Попробуйте следующее:

$(document).ready(function() { 
    $(document).on('click', '#link1', function (e) { 
     var url = "content/home.html"; 

     e.preventDefault(); 

     $.ajax({ 
      type : 'GET', 
      url : url, 
      //your other options 
      success : function (data) { 
       $('#main').html(data); 
      } 
     }); 
    }); 
});

Или вместо этого на $.ajax(), вы можете просто сделать $.load() как:

$(document).ready(function() { 
    $(document).on('click', '#link1', function (e) { 
     $('#main').load("content/home.html"); 
     e.preventDefault(); 
    }); 
});

источник

2014-01-19 17:11:24

Спасибо @Ashish за ваш ответ. Первое решение не работает. Но второе решение, которое вы дали, уже было мной ранее. У меня была проблема с этим. Используя его, я получаю раздел раздела страницы, заполненный содержимым, но скрипт слайдера не работает. – geeksal

Хорошо, попробуйте использовать скрипт слайдера, когда загружается ваш контент. Я имею в виду функцию успеха ajax. –

Хорошо, не могли бы вы показать мне, как это сделать, поскольку я довольно много нового для ajax. Мой сценарий в "сценарий/jquery.nivo.slider.js", а другой сам скрипт в HTML-страницу – geeksal

Вам не нужно все $ .ajax запрос материал можно использовать прямой метод .load из запроса

$("#main").load("our external url");

jqyery documentation

Однако, если у вас есть полный HTML-страницу во внешнем URL, вся страница будет загружена внутри #m ain. Это означает дублирование тегов html, body и т. Д. Думаю, это не результат, которого вы ожидаете.

Если вы хотите загружать только определенную часть удаленной/внешней страницы, используйте селектор содержимого внутри.метод загрузки

$("#main").load("ajax/test.html #container");

Таким образом, вы загружаете только содержимое элемента с идентификатором контейнера с внешней страницы в свой # элемент.

источник

2014-01-19 17:22:30

Загрузите содержимое страницы html (требуется поддержка jquery-скриптов) в div с помощью ajax/jquery

ответ

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