Проблема с открытием модального окна colorbox по ссылке в результатах ajax - PullRequest
Новая
       17

Проблема с открытием модального окна colorbox по ссылке в результатах ajax

1 голос
/ 19 октября 2011

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

Полагаю, я могу кое-что сделать через jQuery, чтобы обновить dom, но я не совсем уверен, что использовать.

Не задавая весь конкретный код, в основном файле я создаю поисковые фильтры и скрипт, который отправляет результаты во вторичный файл search.php, который выполняет запросы на основе опций, опубликованных в нем, собирает все результаты в массиве, а затем выскакивают их на родительской странице в ajax div. Каждый результат должен иметь ссылку, которая откроет новое модальное окно, чтобы добавить этого человека в друзья.

Вот немного скрипта ajax с главной родительской страницы: 

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction( sel )
{

var ajaxRequest;  // The variable that makes Ajax possible!

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('ajaxDiv');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}

if (document.getElementById('ac18').checked) {
var sex = document.getElementById('ac18').value; }
if (document.getElementById('ac19').checked) {
var sex = document.getElementById('ac19').value; }
if (document.getElementById('ac20').checked) {
var sex = document.getElementById('ac20').value; }

var cb_activities = document.getElementById('ac22').value;

var cb_interests = document.getElementById('ac24').value;

var cb_music = document.getElementById('ac26').value;

var cb_books = document.getElementById('ac28').value;

var cb_movies = document.getElementById('ac30').value;

var cb_tv = document.getElementById('ac32').value;

var age = document.getElementById('age').value;
var minage = document.getElementById('minage').value;
var maxrec = document.getElementById('maxrec').value;
var minrec = document.getElementById('minrec').value;
var vcountry = document.getElementById('country').value;
var vmilesfrom = document.getElementById('milesfrom').value;
var vstate = document.getElementById('state').value;
var vcity = document.getElementById('city').value;
var queryString = "?sex=" + sex + "&age=" + age + "&minage=" + minage + "&maxrec=" + maxrec + "&minrec=" + minrec + "&vcountry=" + vcountry + "&vmilesfrom=" + vmilesfrom + "&vstate=" + vstate + "&vcity=" + vcity + "&cb_activities=" + cb_activities + "&cb_interests=" + cb_interests + "&cb_music=" + cb_music + "&cb_books=" + cb_books + "&cb_movies=" + cb_movies + "&cb_tv=" + cb_tv;
ajaxRequest.open("GET", "/components/com_cbajaxsearch/search.php" + queryString, true);
ajaxRequest.send(null); 
}
//-->
</script>

А вот фрагмент кода со страницы search.php, который создает результаты: 

echo '<tr><td class="resultcell">';
$display_string .= "<div class='memberresults' style='$spanstyle;'>      <center>$photo<br /><span class='memsearchusername'>$username</span><br /><span class='memsearchaddf'><a href='index.php?option=com_comprofiler&Itemid=2&act=connections&task=addConnection&connectionid=$id'></a></span>$afcolorbox<!-- $prolink --></center></div>";
echo '</tr></td>';
}

if ($num_rows == 0) {
echo '<div class="resultnum"><img class="cbasnoresults" src="components/com_cbajaxsearch/images/nomatches.png" alt="No Matches" title="No Matches" /></div>';
}
else {
echo '';
}
echo $display_string;
$display_string .= "</table>";

Я могу опубликовать полный код из обоих файлов, если мне нужно, но я подумал, что это, по крайней мере, даст вам представление о том, как я это делаю, не занимая много места. Идеи о том, как заставить colorbox появляться из результатов?

1 Ответ

1 голос
/ 24 января 2012

, пожалуйста, покажите нам, где colorbox находится в вашем коде?

Не зная, я все еще думаю, что знаю вашу проблему .. Думайте о своей проблеме так: -При загрузке страницы изначально DOM готов, и colorbox инициализируется для селектора AJAX вызывает новый фрагмент страницы с некоторым элементом DOM, который находится в списке селектора colorbox, но не замечается, потому что он загружается в страницу после селектор был прочитан JavaScript.

Теперь попробуйте это, поскольку он просматривает "body #main" для всех, существующих и новых "a [rel = 'lightbox']": 

$("body #main").delegate("a[rel='lightbox']", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                            transition: "fade",
                            innerHeight: '515px',
                            innerWidth: '579px',
                            overlayClose: true,
                            iframe: true,
                            opacity: 0.3});});

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

...