Monday, May 18, 2009

JQuery Plugin nyroModal and Base HREF

I've been using JQuery on my new pet project (excuse the pun) and having tried a few of the modal content plugins available, I have settled on NyroModal, a very compact, flexible and elegant solution.

Yesterday though, I ran into a small issue with the plugin. I am using a base href tag on the site so that I can use URL rewriting but still use relative links in my content. When trying to load a hidden div as the content of a modal, I discovered that because the base href URL is being prepended to the URL NyroModal attempts to load, NyroModal assumes that I am requesting another page rather than an element in the page DOM. The result is a modal displaying a 'content not found' error.

My first thought on discovering this was to remove the base href element from the page in the click event of the link spawning the modal before calling the modal but that didn't work as JQuery removes the element from the DOM but still retains it internally.

I also had no luck removing the value of the href attribute before calling the modal but checking in the NyroModal script, the original URL in the base href was still being used.

Given at that point that I was already looking into the NyroModal script to see what URL was being passed I decided to dig a little deeper and found a rather simple solution.

The script has a line

if(req == currLoc)

This line basically checks if the requested URL (stripped of the specific selector) matches the href property of the current location object to see if the URL is the same as the current page and therefore that it should be loading a DOM element from the current page. However, because the pressence of the base href attribute, it's value gets prepended to the requested URL and this comparison becomes invalid. Amending this check to also compare against the value of the base href attribute as follows addresses this issue.

if(req == currLoc || req == $('base').attr('href'))


I have posted about this on the issue thread for the NyroModal project on Google code.

3 comments:

  1. where does that code go exactly? i'm having a similar issue and am not privy to the jquery lingo. thanks

    ReplyDelete
  2. where does that code go exactly? i am not too good w/ jquery/java. i'm having the same preoblem. thanks!@

    ReplyDelete
  3. I haven't checked the un-minified version of the script for a line number but if you do a search for 'if(req == currLoc)' using whatever editor you use to edit your javascript you should find where it is and just replace that line with the one I have indicated.

    ReplyDelete