Question

I have some code which uses jquery to load the search results onto the same page. It works fine when run on a standalone page. The same code fails half-way through when loaded inside a colorbox window. How can I fix this?

Here is the code which works fine on a standalone page but fails in a colorbox window.

<script>
  $('button.trigger').on('click', function(){
    $mybtn = $(this);
    $mybtn.text('Searching...').addClass('disabled');
    $.post(
      '/results/people?layout="no"',
      $('#find_or_add_person').serialize(),
      function(data){
        $('#response').html(data);
        $mybtn.text('Search').removeClass('disabled').removeClass('btn-primary');
      }
    );
    return false; 
  });
</script>

Note: it fails after setting the button text to “searching” and disabling the button.

Here is the code which calls the colorbox.

<script>
    $('a.add').colorbox({
          width:440,
            height:400,
            onComplete: function(){
                    $('#colorbox').css('display', 'block');
              }
    });
</script>

Answer 1

I found the answer–quite by accident. It turned out that odd HTML ordering of tags was the culprit.

Specifically, in the HTML I loaded into the colorbox window I had opened a div tag and then opened the form tag and then closed the div tag before closing the form tag. For whatever reason, that strange behaviour on my part didn’t cause any problems when I was using the page as a standalone page. However it was messing up some of my capybara tests. In addressing the capybara problem, I fixed the tag ordering and viola! Immediately the page began to work in the colorbox window.

I never would have guessed. Ultimately I don’t understand the underlying mechanism that caused this strange behaviour, but I’m glad it is resolved.