Solved

using proxy file with html

Posted on 2014-01-11
8
323 Views
Last Modified: 2014-05-12
Hi,

I have been given a project to do, and on the surface it seems it should be pretty simple. they have given me a sample file called proxy.php and the a js library, but I am not sure precisely how to configure the proxy file or the js file to utilise the proxy file.

essentially what the pages should do once they are working, is as I begin to type characters into search boxes, it searches the remote website, and starts returning possible results via json to the search boxes.

I have attached the proxy file and the JS file, could someone please help me out?
totalcheck.js
proxy.php.txt
0
Comment
Question by:mavmanau
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39774275
Those two files look like they came from separate projects.  And I believe they are incomplete.  I don't see anywhere that the 'js' file calls the 'php' file.  Did they give you URLs to use?
0
 

Author Comment

by:mavmanau
ID: 39774292
I am using this as the endpoint address in the proxy.php file,

https://stage-api.ext.sensisdata.com.au/rest/current

This is the example they use:
<html>
    <head>
        <script src="cripts/jquery-ui-1.10.3/jquery.js"> </script>
        <script src="scripts/jquery-ui-1.10.3/ui/jquery-ui.js"> </script>
        <script src="totalcheck.js"></script>
   
    </head>
    <body>
            <div id="splitStreetContainer">
        <input type="text" placeholder="Subpremise" data-address-attr="subpremise"/>
        <input type="text" placeholder="Street Number" data-address-attr="street_number"/>
        <input type="text" placeholder="Street Name" data-address-attr="street_name"/>
        <input type="text" placeholder="Street Type" data-address-attr="street_type"/>
        <input type="text" placeholder="Suburb" data-address-attr="suburb"/>
        <input type="text" placeholder="State" data-address-attr="state"/>
        <input type="text" placeholder="Postcode" data-address-attr="postcode"/>
    </div>
    <script>
        $(document).ready(function() {
           //  $.endPoint = "<path-to-proxy>";
		    $.endPoint = "proxy.php";

            $("#splitStreetContainer").totalCheckAddress({
              nameFuzzySearch: true,
              includeListing: true,
              includePaf: false,
              criteria :  {
                    country: "AU"
              },
              onSelectName: function(el, data) {
                // Handle response data
              },
              onSelectAddress: function(el, data) {
                // Handle response data
              }
            });
        });
    </script>
    </body>
</html>

Open in new window


but in the proxy file it appears in dreamweaver that there is an error on line 10.

I don't think i really need a seperate file for authorising connections to the service, but am unable to proceed.

Any light you can shed would be greatly appreciated.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39774325
Dreamweaver is not going to like "placeholder" and "data-address-attr" because they are not standard attributes.  You may have to use a plain text code editor for this like HTML-Kit http://www.chami.com/ or NotePad++ http://notepad-plus-plus.org/ .   "totalcheck.js" is supposed to pop up a 'modal' window for you to enter some info.  

All of this must be run on a web server that supports PHP or else "proxy.php" won't run and the AJAX code can't make a request to it.  You can't just open it from a file on your computer and expect it to work.  You do need to enter your 'username' and 'password' for the service in the "proxy.php" file.
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39774855
This line is probably wrong:

        <script src="cripts/jquery-ui-1.10.3/jquery.js"> </script>

"placeholder" is valid HTML5 for the text to show in the form input controls.  It looks like the "data-address-attr" would be something used with jQuery to address elements of the form.
0
 

Author Comment

by:mavmanau
ID: 39775197
The username and password in the proxy.php file have the correct one in, I just omitted them in the copy I uploaded here.

Here is the current html page I have.


<html>
    <head>
        <script src="scripts/jquery-ui-1.10.3/jquery-1.9.1.js"> </script>
        <script src="scripts/jquery-ui-1.10.3/ui/jquery-ui.js"> </script>
        <script src="totalcheck.js"></script>
   <link rel="stylesheet" type="text/css" href="dist/totalcheck.css"/>
   <style type="text/css">
   body {
	background-color: #D3E7F4;
}
   </style>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
            <div id="splitStreetContainer"><input type="text" placeholder="Name" data-address-attr="primary_name" />
        <input type="text" placeholder="Subpremise" data-address-attr="subpremise"/>
        <input type="text" placeholder="Street Number" data-address-attr="street_number"/>
        <input type="text" placeholder="Street Name" data-address-attr="street_name"/>
        <input type="text" placeholder="Street Type" data-address-attr="street_type"/>
        <input type="text" placeholder="Suburb" data-address-attr="suburb"/>
        <input type="text" placeholder="State" data-address-attr="state"/>
        <input type="text" placeholder="Postcode" data-address-attr="postcode"/>
    </div>
    <script>
        $(document).ready(function() {
           //  $.endPoint = "<path-to-proxy>";
		    $.endPoint = "proxy.php";

            $("#splitStreetContainer").totalCheckAddress({
              nameFuzzySearch: true,
              includeListing: true,
              includePaf: true,
              criteria :  {
                    country: "AU"
              },
              onSelectName: function(el, data) {
                // Handle response data
              },
              onSelectAddress: function(el, data) {
                // Handle response data
              }
            });
        });
    </script>
</body>
</html>

Open in new window


When i turn on the developer tools, I can see this:
Screenshot of page in action
I am getting an error 304 in the javascript, does that help at all?
0
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 39775289
Try making a Google search for "jQuery Autocomplete."  I think you'll find your answer quickly if the question is phrased that way.  Best of luck with the project, ~Ray
0
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 39775297
304 is not an error, it is a response code that tells the browser to use the copy of that file that is in it's cache, that it does not need to be reloaded from the server.
0
 

Author Closing Comment

by:mavmanau
ID: 40060844
Thank you for your help.  It was much appreciated.
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question