0

Forgive me for my wording but this is the first time that I've written anything like this

I'm passing a freeMarker variable into a JQuery function on click of a link

<a onclick="showDisclaimer('${item.uid}')">Read the blog</a>

The variable passes fine but what I would like to do is show a hidden modal when the link is clicked. The name of the hidden modal is 

<div class="disclaimer ${item.uid}" style="display:none;">

The code does not seem to be working. For one, I would like to define a global variable so that both functions have access to. As you can see I'm defining var x = uid; twice.

Also in my code $('body').append($('div.disclaimer x').remove()); does not work and I figure that it's because I haven't passed the variable yet or created a global variable. I just don't know how to do it.

My code is below. Any help is appreciated. Thanks

<#ftl ns_prefixes={"content":"http://purl.org/rss/1.0/modules/content/","dc":"http://purl.org/dc/elements/1.1/"}>

    <script>
      // Forces the disclaimer component to load on the body

      $('body').append($('div.disclaimer x').remove());

      function showDisclaimer (uid) { 
        var x = uid;
        $('div.disclaimer x').show();

      }

      function closeDisclaimer(uid) {
        var x = uid;
        // Clear the form and close the modal
        $('div.disclaimer x').hide();
      }
    </script>  


    <section style="background-color: #ededed">
      <section class="head-transit">
        <div class="container">
            <div class="row-fluid">

          <#list kiblogs.rss.channel.item as item>
              <div class="span4">
                <div class="panel">
                  <img src="${item.thumbnail.@@nested_markup}" class="title-image"> 
                    <div class="top-content">
                      <h3>${item.title}</h3>
                      <div class="datetime">${item.pubDate}</div>
                      <div class="analyst"></div>
                      <p class="test">${item.description}</p>                  
                    </div>

                    <div class="disclaimer ${item.uid}" style="display:none;">
                      <div class="content">
                        <div class="close"><a href="#" onclick="closeDisclaimer()">x</a></div>
                          <h3>${item.title}</h3>
                          <div class="datetime">${item.pubDate}</div>
                          <p class="test">${item.description}</p>
                           <p class="${item.uid}">Hey now</p>  
                          <div class="divider"></div>                      
                      </div>
                    </div> 

                    <div class="bottom-content">
                    <div class="bottom-blue-buttn"><a onclick="showDisclaimer('${item.uid}')">Read the blog</a></div>
                   </div>
                </div>
               </div> 
                <div class="disclaimer ${item.uid}" style="display:none;">
                  <div class="content">
                    <div class="close"><a href="#" onclick="closeDisclaimer()">x</a></div>
                      <h3 class="title2"></h3> 
                      <div class="divider"></div>
                      <p class="content2"></p>

                  </div>
                </div>            
            <hr>            
          </#list>

          </div>
       </div>
      </section>
    </section>

I got the code to work but now I am getting a Console error that uid is not defined in var outerVar = uid; but uid is defined within my first and second function.

In my first line of code 

      var outerVar = uid;

      $('body').append($('div.disclaimer' + outerVar).remove());

      function showDisclaimer (uid) { 
        var x = uid;
        $('div.disclaimer' + x).show();

      }

      function closeDisclaimer(uid) {
        var x = uid;
        // Clear the form and close the modal
        $('div.disclaimer' + x).hide();
      }


    </script>
Spanky
  • 699
  • 2
  • 11
  • 38

1 Answers1

1

The css selector is wrong. You need to concatenate the x variable. 

      function showDisclaimer (uid) { 
        var x = uid;
        $('div.disclaimer' + x).show();

      }

      function closeDisclaimer(uid) {
        var x = uid;
        // Clear the form and close the modal
        $('div.disclaimer' + x).hide();
      }

Example to reuse variables:

var outside = 'Fooo!';
function foo () { 
    console.log(outSide); //output 'Fooo!'
}

function bar() {
    var inside = 'Hello';
    console.log(inside); //output 'Hello'
}

console.log(inside); //output undefined

For more info on: What is the scope of variables in JavaScript?

Community
  • 1
  • 1
andybeli
  • 836
  • 7
  • 14
  • Thanks, is there any way to use 'x' variable in the class name below even though it's above my function? $('body').append($('div.disclaimer').remove()); – Spanky Jun 03 '15 at 22:28
  • `x` is `uid` which is passed as parameter to the functions. `onclick="showDisclaimer('${item.uid}')`. In this case `uid = ${item.uid}`. It's different for each one. Why do you want to make it static? – andybeli Jun 03 '15 at 22:37
  • Ahhh, I see so will $('body').append($('div.disclaimer x').remove()); work even though (uid) is passed in a function below it? – Spanky Jun 03 '15 at 23:15
  • 1
    If you have a variable set in the outer scope you will be able to access it inside the functions. Be careful, in your last example you have the css selector wrong again. `$('body').append($('div.disclaimer' + outerVar).remove());` If this was the correct answer could you mark it please. Thanks. – andybeli Jun 03 '15 at 23:26
  • Thanks! I just updated my answer. Although I am able to access the outside variable. It's not defined. I would like for the outside variable to use the same value that is being passed to my function onclick – Spanky Jun 04 '15 at 00:36
  • No problem. I updated my question and placed it here. Please take a look http://stackoverflow.com/questions/30647347/having-issues-using-a-scope-in-jquery – Spanky Jun 04 '15 at 14:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79681/discussion-between-andybeli-and-jimmy). – andybeli Jun 04 '15 at 15:48