Solved

using proxy file with html

Posted on 2014-01-11
8
317 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
  • 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
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 
LVL 109

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 109

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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

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

Suggested Solutions

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The purpose of this video is to demonstrate how to Import and export files in 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 : Click on Too…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

772 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