0

I'm load course categories into a list using below code. When clicks on courseCategory all available courses loads to the loads under that category.

 <ul>
 @foreach (var item in Model)
 {
    <li class="list-group-item">
    <span class="inlineWord"> @item.courseCount</span>
        @Ajax.ActionLink(item.courseCategory,"FilteredCourses",
               new { crsCtgry = item.courseCategory },
               new AjaxOptions{
                  UpdateTargetId = "CourseList",  
                  InsertionMode = InsertionMode.Replace,
                  HttpMethod = "GET"                      
               }, 
               new { @class = "myLink", data_courseName = item.courseCategory })
    </li>
 }
</ul>

Courses has images. I used fancy box to popup images. This is how I used fancyBox. reference : Fancy Box not working and when click on an image it'll opens in new html page

I solved the reference question and now arise another problem. Image inside a one course is display correctly. But when I click on a Ajax action link, and select another course's image image will not pop up. But screen appears dark look and feel of fancyBox. if I refresh the entire page and then select a category and then select image of course it'll display correctly again.

Is there a relationship of fancybox with a ajax?

Community
  • 1
  • 1
Sumudu De Zoysa
  • 261
  • 1
  • 6
  • 17
  • it depends on what ajax is bringing to the DOM. what does your console say: any errors? – JFK Aug 28 '15 at 03:38
  • No there is no error showing. from this ajax action link i am loading another .cshtml page. This ajax action link is located in index.cshtml page. by clicking the link I loading _courses.cshtml page to the < div > tag inside the index.html. After this happens fancybox does not appear. But overlay is appear. – Sumudu De Zoysa Aug 28 '15 at 03:44
  • Is it a full independent page (with `` tags, scripts, etc?) scripts inside an ajax call may always conflict with other scripts in your main page – JFK Aug 28 '15 at 05:36
  • Yes but, that page contents a table with courses. If I click on a course that _course.cshtml will replace by the details.cshtml page. details.cshtml is the page where the image is located. Once I clicked above ajax actionLink it loads _Courses.cshtml --> then click a course(another ajax link) on _Courses.cshtml --> then details.cshtml shows with image --> once I click image it will open by fancy box. problem is if once i follow this procedure it works correctly, when i do the same again without refreshing page, image not open in fancy box. But screen get the dark overlay without opening image – Sumudu De Zoysa Aug 28 '15 at 09:06

0 Answers0