SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript listing impossible to figure out!

    Okay first things first. Firebug this website http://www.locksmith.com/

    You will see that they have a script in the head tag. That script is:
    <script class="yext-synd-74qWXpBkYak=">
    (function () {
    var el = document.createElement('script');
    el.async = true;
    el.src = '//s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=&latitude=&longitude=';
    (document.getElementsByTagName('head')[0] ||
    document.getElementsByTagName('body')[0]).appendChild(el);
    })();
    </script>
    They also have a form. That form is:
    <form title="Enter your zip and find a qualified, local locksmith" action="results.asp" method="POST">
    <p><font style="font-size: 19px; font-weight: 700">FIND A LOCKSMITH</font>
    <input type="text" value="14646" style="font-family: Arial; font-size: 22px; color: #666666; font-weight:bold;" onclick="this.value=''" size="5" name="zip">
    <input type="image" style="position: relative; top:5px" name="B1" src="images/smallgo2.jpg">
    </p>
    </form>
    When you enter your zip code into that form, I think it is passed to the el.src variable as a parsed string and sent to s.yext-listings.com/ like this://s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=INSERT_ZIP_CODE_PASSED_FROM_THE_FORM_HERE&latitude=&longitude=

    When you click the submit button on the form with an input zip code, it takes you to a page where there is a huge DIV block with this script executing inside it:
    <script class="yext-synd-74qWXpBkYak=">


    (function () {
    var el = document.createElement('script');
    el.async = true;
    el.src = '//s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=33405&latitude=&longitude=';
    (document.getElementsByTagName('head')[0] ||
    document.getElementsByTagName('body')[0]).appendChild(el);



    })();



    </script>
    Well the result on the second page is a listing pulled from a database and laid out in the second page in a DIV block.


    My question! How do I emulate this on my website? I have the Yext service. I have been on the phone with the company for over a week now and I cant get any technical support on the integration. Apparently they are having a lot of lay offs and technical support is unavailable.

    I am assuming that I need to build a form in HTML and have it pass the zip code to that JavaScript snippet somehow? I also want to know how the JavaScript on the second page renders a listing result from that passed form value?

    Thank you so much for the help in advance. I know you guys can figure this out before I do.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    All the JavaScript you have posted there is doing is adding script tags to the page to link to the actual JavaScript that does the processing. If you look at the content of the scripts that code is adding then you should be able to see how the code works.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I dont see the code where it adds any tags, or writes any data to the document. All I see is the el.src script..

    But the more important question I have is, how does the second page display the listing results. All I see is the same el.src script from the first page..

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The code is adding a script tag to the page the correct way using the appropriate DOM commands.

    el = document.createElement('script'); // create a script tag

    el.async = true; // set the async attribute on the tag to 'true'

    el.src = '//s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=&latitude=&longitude='; // sets the src attribute - the one that identifies the script to be run

    document.getElementsByTagName('body')[0].appendChild(el); // appends the script tag just before the </head>and runs the script that it points to.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so far from what I gather the code creates a script tag (<script></script>) before the </head> tag. But what is that script? And where does it execute document.write commands to write to the page a directory listing?

  6. #6
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found the code that writes to the page. I think. Can someone explain this to me?

    (a.services?soy.$$escapeHtml(a.services):"")+'</div><div class="hours">'+(a.hours?soy.$$escapeHtml(a.hours):"")+'</div></div><a href="javascript:void(0)" onclick="" class="less" id="less'+soy.$$escapeHtml(c)+'" style="display:none;">Less Details</a><div style="height:0; clear:both;"><!--spacer--\></div>'}}return d};var adUnitId="74qWXpBkYak=";var templateFn=yext.synd.templates.displayListings;var soyContext={"data":{"currentPage":0,"numPages":1,"listings":[{"zip":"33401","services":"Locksmiths, 24 Hour Locksmiths, Auto Locksmiths, Commercial Locksmiths, Emergency Locksmiths, Residential Locksmiths, Lock Installation, Lock Repair, Master Key Services, Re-key Services, Biometric Locks, Combination Locks, Digital Locks, Magnetic Locks, Alarm Systems, CCTV Systems, Intercom Systems","phone":"5613707659","adLevel":"GOLD","areaCode":"561","hours":"M-Su 24hr","link":"http://www.yext-listings.com/l/firstplaceinternet/pls-locksmith-miami2.html?srid=QdH%2Fe6hIUwugcsOoPel0Lg%3D%3D","state":"FL","city":"West Palm ......................etc etc

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dingoegret View Post
    Found the code that writes to the page. I think. Can someone explain this to me?
    Put the code in jsbeautifier.org and it will be easier to understand.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out with the help of my developer, thanks! : D


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •