Search code examples
jqueryasp.net-mvccolorbox

Open jQuery Colorbox from ASP.NET MVC Partial

Morning All,

I have a ASP.Net MVC Application and on one of the pages I have a table that is loaded via AJAX which has buttons on it to open a 'Details' colorbox. I was binding all the buttons to use the jQuery color box plugin on page load however when I reload the table these buttons no longer work as they need rebinding. Therefore I intend to call the colorbox directly.

I have the following code:

<td><button class="button" type="button"     onclick="$.colorbox({href:"@Url.Action("ShowReviewFeedbackDetails", "Review", new { reviewFeedbackId = reviewfeedback.ReviewId, subjectId = reviewfeedback.SubjectArea.Id })", transition: "elastic", iframe: true, overlayClose: true, width: 650, height: 400, scrolling: false});">Details</button></td>

When I click the button I get a javascript syntax error. I also get the error if i remove the helper and just hard code a url such as:

<td><button class="button" type="button" onclick="$.colorbox({href:"www.google.com", transition: "elastic", iframe: true, overlayClose: true, width: 650, height: 400, scrolling: false});">Details</button></td>

The color boxes work fine on other pages where I'm not dynamically reloading the buttons that call them however they just have colorBoxStd as a class and I use this code within $(document).ready

 $(".colorBoxStd").colorbox({ transition: "elastic", iframe: true, overlayClose: true, width: 650, height: 400, scrolling: false });

Any ideas would be greatly appreciated as I'm pulling my hair out with this..

Thanks, J

Solution

  • You don't have a properly escaped onclick attribute and more specifically the href property:

    <td><button class="button" type="button" onclick="$.colorbox({href:'@Url.Action("ShowReviewFeedbackDetails", "Review", new { reviewFeedbackId = reviewfeedback.ReviewId, subjectId = reviewfeedback.SubjectArea.Id })', transition: 'elastic', iframe: true, overlayClose: true, width: 650, height: 400, scrolling: false});">Details</button></td>

    I have replaced the double quotes with single quotes around the href property. Also double quotes have been replaced by single quotes around the transition property.

    This being said, I would simply use the .delegate() (or .live()) method to subscribe to the click event so that it works even if you replace the contents with AJAX. This way you will have separate markup and javascript and you won't need to turn your markup into what it is currently (which I have hard time finding a proper adjective to describe :-))