Проблема с отображением эффектов слайдера jquery через AJAX - PullRequest
Новая
       2

Проблема с отображением эффектов слайдера jquery через AJAX

0 голосов
/ 28 августа 2011

Привет, я использую код ползунка, упомянутый в ссылке workshop.rs/projects/coin-slider..Ну все работает нормально независимо, но когда я использую событие onclick, которое вызывает эту страницу через AJAX, а затем показывает содержимое вdiv, это не работаетТолько изображения отображаются без какого-либо эффекта .. пожалуйста, предложите !!!!!!

html файл: 

<div id="nav">
        <ul>

          <li><a href="dbuelem.html">DBU Elimination</a></li>
          <li><a href="contact.html">Contact us</a></li>
        </ul>

      </div>
<div id ="welcome">
</div>

JS код: 

window.onload = initAll;

function initAll() {
    allLinks[i].onclick = mainProcess;
}

function mainProcess(evt){

    if ((this.innerHTML)=='Contact us'){
        document.getElementById("right1").innerHTML = "Contacts";
        Contacts();
        return false;   
    }
}

function Contacts(){

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) { }
        }
    }

    if (xhr) {
        url = 'contactslide.html';
        xhr.onreadystatechange = showContacts;
        xhr.open("GET", url, true);
        xhr.send(null);
    }
    else {
        alert("Sorry, but I couldn't create an XMLHttpRequest");
    }
    return false;
}

function showContacts() {

    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            var outMsg = xhr.responseText;
        }
        else {
            var outMsg = "There was a problem with the request " + xhr.status;
        }
        document.getElementById("welcome").innerHTML=outMsg;
    }
}

contactslide.html

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

</head>
<body>
<div id='coin-slider'>
<img src="images/1.jpg"/>
<span>Abhinav Singh</span>
<img src="images/2.jpg" />
<span>Pradeep sethi</span>
<img src="images/3.jpg" />
<span>Tracey Hare</span>
<img src="images/4.jpg" />
<span>Amarish Patel</span>
<img src="images/5.jpg" />
<span>Richa Misra</span>
<img src="images/6.jpg" />
<span>Vishal Anand</span>
</div>
<script type="text/javascript">

    $(document).ready(function() {
        $('#coin-slider').coinslider();
    });
</script>

</body>
</html>

Где contactslide.html - это файл, который упоминается в ссылке ... этот файл независимо работает нормально, когда, когда я вызываю его с AJAX, он не показывает никаких эффектов ... пожалуйста, предложите !!!!!!!!!!!!

1 Ответ

1 голос
/ 28 августа 2011

Вам необходимо снова инициализировать плагин slider для элемента после того, как вы сделаете ajax-вызов и установите innerHTML.

Если вы используете jQuery, мы можем изменить метод Contacts и showContacts, как показано ниже 

function Contacts(){
    $.ajax({
      url: 'contactslide.html',
      success: showContacts,
      error: function(xhr, errorStatus){
         $("#welcome").html("There was a problem with the request. " + errorStatus);
      }
    });

    return false;
}

function showContacts(response) {
    var html = $(response);
    $("#welcome").html(html.find('body').html());
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...