CODEWITHSUNDEEP
ajaxdomcolorbox
Spencer Fraise
Spencer Fraise

Reputation: 138

Trouble opening colorbox modal window from link in ajax results

I've built an AJAX member search that updates the results each time a search filter is updated. It works fine, however I need to be able to pop a colorbox modal window from within the results but am unable to.

My guess is there's something I can do through jQuery to update the dom but I'm not really sure what to use.

Without giving all of the specific code, in the main file I build the search filters and script that posts the results to a secondary search.php file that does the queries based on the options posted over to it, gathers up all of the results in an array, then pops them on the parent page in an ajax div. Each result given should have a link with it that will open up a new modal window to add that person as a friend.

Here's a bit of the ajax script from the main parent page:

<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>

And here is a bit of code from the search.php page that builds the results:

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>";

I can post the complete code from both files if I need to but thought this would at least give you an idea of how I'm building this without taking up a ton of space. Ideas on how to get colorbox to pop from within the results?

Upvotes: 1

Views: 480

Answers (1)

Eric Hodonsky
Eric Hodonsky

Reputation: 5897

please show us where the colorbox is in your code?

Without knowing, I still think I know your issue.. Think of your problem like this: -On page load initially the DOM is ready, and colorbox is initilized for the selector AJAX calls a new piece of the page with some DOM element that is in the colorbox selector list, but isn't noticed because it loaded into the page after the selector was read by the javascript.

now try this, as it watches "body #main" for all, existing and new "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});});

This way instead of waiting for letting the plugin watch for the event, watch the event with .delegate(), and execute the colorbox on the fly.

Upvotes: 1

Related Questions