Passing Channel Entry titles to java script

#1 / Aug 06, 2012 6:37am

readmetwice

18 posts

This question may be related to a resolved thread.

I am using an autocomplete javascript to pass channel entry titles to my form field that allows users to search for channel entries in a certain channel. Considered using one of two structures:
1) call js file stored in themes folder using “open script tag” src=“http://mysite.com/themes/js/autoCompleteTextfield.js” type=“text/javascript”>“close script tag”
or
2) insert javascript inline within template

I went with the second structure given the need to pass the channel entry titles to an array locations = new Array(). The script inline works just fine with hard coded values into the array but I can not get it to work with the channel entry “{title}” tag.

Working Inline JS script with hard coded Array values and form look like so:

<body>

"open script tag"
    
  countries = new Array(
   "value1",
  "value2",
  "value3",
  "value4"
  );
 
  var sug = "";
  var sug_disp = "";

  function getLocation() {
       var input = document.forms['search_form'].location.value;
       var len = input.length;
       sug_disp = ""; sug = "";

    if (input.length) {
      
      for (ele in countries)
      {
        if (countries[ele].substr(0,len).toLowerCase() == input.toLowerCase())
        {
          sug_disp = input + countries[ele].substr(len);
          sug = countries[ele];
          break;
         }
      }
   }
    document.forms['search_form'].mycountry.value = sug_disp;
    if (!sug.length || input == sug_disp)
      document.getElementById('sug_btn').style.display = "none";
    else
      document.getElementById('sug_btn').style.display = "block";
  }

  function setLocation() {
    document.forms['search_form'].location.value = sug;
    hideSug();
  }

  function hideSug() {
    document.forms['search_form'].mycountry.value = "";
    document.getElementById('sug_btn').style.display = "none";
  }  
 "close script tag"



<div>
    <form name="search_form">
  <div>Search for a destination:</a>
       <div>
     <div>
          <input type="text" name="mycountry" disabled />
     </div>

     <div>
          <input autocomplete="off" type="text" name="location" />
     </div>

       <div id="sug_btn">
             <a href="#">img src="http://mysite.com/images/image.gif" width="10" height="10" border="0" align="textbottom"></a>
         </div>
     </div>
    </form>
  </div>
 </div>
</body>

Not working modified code that tries to call channel entries:

<body>

{exp:channel:entries channel="mychannel"}
"open script tag"
    
  countries = new Array(
   "{title}",
  );
 
  same JS script above
 "close script tag"
{/exp:channel:entries} 


<div>
    same form code as above

How can I make this work using this inline structure or by placing in separate JS file and passing channel entry titles somehow? Hope this helps others.

#2 / Aug 06, 2012 8:03am
Design by Front
106 posts
Hi readmetwice,

Have you tried adding:
```
$conf['protect_javascript'] = "n";
```
to your EE config file? This is one of many hidden configuration variables, and it is set to “y” by default.

Hope this helps,
Chuck
#3 / Aug 06, 2012 2:30pm

readmetwice
18 posts

Did not work.
#4 / Aug 06, 2012 5:21pm
Ralph
78 posts
Try removing the extra comma after the quotes:
```
countries = new Array(
   "{title}"
  );
```
#5 / Aug 06, 2012 5:31pm
Shane Eckert
7174 posts
Hey readmetwice,

Looks like you need to move the script outside of the channel entries tags.

Like so ...
```
<body>
"open script tag"
    
  countries = new Array(
{exp:channel:entries channel="mychannel"}

   "{title}",
 
{/exp:channel:entries} 
 );
 
  same JS script above
 "close script tag"

<div>
```
Does that make sense?

Thank you,
#6 / Aug 06, 2012 7:30pm

readmetwice
18 posts

Shane, tried that with no luck. As you can see in the “Resolved Thread” reference above they suggest to place the channel entry tags as I placed them, but not working for me.
#7 / Aug 08, 2012 12:01pm

Robin Sowell
13255 posts

Hrm- do you have the two examples live and working on a page you can link to? Well, not working in the case of the tag one. Second one should be showing a js error, I assume. So would help to see that and compare the rendered code.
#8 / Aug 08, 2012 11:18pm

readmetwice
18 posts

Hrm- do you have the two examples live and working on a page you can link to? Well, not working in the case of the tag one. Second one should be showing a js error, I assume. So would help to see that and compare the rendered code.

Robin trying to PM you the links but your box is full, sent you an email via the “email console” widget.

Thanks
#9 / Aug 09, 2012 10:51am
Robin Sowell
13255 posts
I got it- and that helped a lot! Shane had right idea- I got it working doing this:

1. I put all of the js in its own template- and set template type to js. So- exactly like the ‘working’ example you sent me- but instead of having the external js in a file, I had it in a js template.

2. Made sure that worked- then the only change I made to the js template was the array- which now looks like:
```
loc = new Array(
{exp:channel:entries backspace="2" dynamic="no"}
"{title}", {/exp:channel:entries}
);
```
And it totally worked for me. Note- I would definitely put a disable parameter on that! And depending on how tricky it is, I might use the query module instead.

But- quite a nifty little script!

See if that gets it working for you. Like I say- just exactly like the one you linked me to that works, except move the js into a template. Once it works hard coded that way- flip in my edit. (And doing it inline should be fine too- it’s just the working one I saw was external, so was easiest for me to just grab that and tweak.)

Let me know if this does the trick.
#10 / Aug 12, 2012 6:43am

readmetwice
18 posts

Robin,

Yes that worked. Thank you both.

Interestingly I began with the same code as suggested by Shane, but changed it after seeing the post (Dan Decker/Sean Smith) Referenced above. Is there something to watch out for that I am missing here? difference in scripts, parsing order, etc? Would be great to learn from this and reduce the guesswork in the future.

Thank you both again.
#11 / Aug 13, 2012 9:18am
Robin Sowell
13255 posts
WOOT! Let’s see- with JS, parsing order of EE isn’t as much of a big deal- it’s all going to be completed server side before the js comes into play. Easiest thing to do if you run into a situation like the above- compare a working hard coded version with your dynamically generated one. Find the difference- and you know the problem. At that point, it’s likely easy to tweak your EE tags so the dynamic version matches the hard coded one. Checking for js errors can also help you quickly narrow in on where the problem happens.

The other thing to keep in mind- particularly in the above example- the entries tag is going to loop (as long as there is more than one entry being pulled back). So:
```
{exp:channel:entries channel="mychannel"}
"open script tag"
    
  countries = new Array(
   "{title}",
```
You were going to be outputing the opening script tag and such for every entry pulled back- that was for sure going to break.

But yes- mostly it’s just getting as simple an example as possible working hard coded- and then making the EE tags match it. You guys almost had this one first go round, but being off just a little with js is enough to bork things.

Thread

readmetwice

Design by Front

readmetwice

Ralph

Shane Eckert

readmetwice

Robin Sowell

readmetwice

Robin Sowell

readmetwice

Robin Sowell

Username

Password

Thread