Question

My goal is to load a recaptcha only when the user clicks on the contact page link.

I have successfully built a site that uses navigation links to load external HTML content into the index page’s main content div based on the following function:

$('div#index_content').load($(this).attr('href') + ' #content');

When user clicks a navigation link, content from one of 6 individual .html or .php files is loaded into the index.html container:

<div id="menu">
    <ul>
        <li><a href="home.html" class="active">Home</a></li>
        <li><a href="fine_art.html" class="inactive">Fine Art</a></li>
        <li><a href="sketches.html" class="inactive">Sketches</a></li>
        <li><a href="props.html" class="inactive">Props</a></li>
        <li><a href="contact.php" class="inactive">Contact</a></li>
    </ul>
</div>

This all functions 100%.

The next step was to appended a function to the .load statement which loads a recaptcha into an empty div with id=”captcha” for my contact form:

$('div#page_content').load(($(this).attr('href') + ' #contentB'), 
   function() {
     Recaptcha.create("my public key", "captcha"); 
   }
 );

The site is still functioning at this point, but the function calling the captcha runs every time one of the navigation links is clicked, and I would like to create an if() statement that only runs the recaptcha load function if the $(this).attr(‘href’) is loading the contact.php content. In other words, I would like it to only load the captcha when the user clicks on “Contact” in the navigation bar.

I tried these two versions of my function but the captcha doesn’t load in either case:

$('div#page_content').load(($(this).attr('href') + ' #contentB'), 
   function() {
       if ($(this).attr('href') == 'contact.php') {
               Recaptcha.create("my public key", "captcha"); 
       }
   }
 );

and…

$('div#page_content').load(($(this).attr('href') + ' #contentB'), 
   function() {
       var ifContact = $(this).attr('href');
       if (ifContact == 'contact.php') {
               Recaptcha.create("my public key", "captcha"); 
       }
   }
 );

Can anyone tell me what’s wrong with my if() statement? Does the $(this).attr(‘href’) actually hold a value that can be equal to something?

Answer 1

this in the inner and outer function does not represent the same object, store the value of href outside the inner function and use that value in the inner function.

var href = $(this).attr('href');
$('div#page_content').load(href + ' #contentB', 
   function() {
       if (href == 'contact.php') {
               Recaptcha.create("my public key", "captcha"); 
       }
   }
 );