?
Solved

Displaying JSON responses on a page.

Posted on 2014-01-12
5
Medium Priority
?
248 Views
Last Modified: 2014-05-12
Hi experts,

Thank you as always for taking a look at my question which i am hoping is an easy one.

I have the below web page.

<!DOCTYPE html>
   <head>
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="totalcall.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/jquery-ui-1.10.3/themes/base/jquery-ui.css" />
 
        <script type="text/javascript">
                $(document).ready(function(){
                    $("#term").autocomplete({
                        source:'getautocomplete.php',
                        minLength:3
                    });
                });
        </script>
   </head>
 
   <body>
 
      <form method="post" action="">
             Name : <input type="text" id="term" name="term" />
      </form>
  
   </body>
</html>

Open in new window


Essentially this sends data off to a php page, which submits the data and returns the results. I know the curl is working because i can see the response when I turn on the dev option in firefox.

What I need to know is how can I get the results to display in either an iframe or a small table on the html webpage.  If you need any of the JS files please advise.

many thanks again!!
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
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39775508
You can use appendTo
http://api.jqueryui.com/autocomplete/#option-appendTo
        <script type="text/javascript">
                $(document).ready(function(){
                    $("#term").autocomplete({
                        source:'getautocomplete.php',
                        minLength:3,
                        appendTo: "#id-of-div"
                    });
                });
        </script>

Open in new window

The proviso of this is the div you want to show the results in must be in the same container as your input field.
0
 

Author Comment

by:mavmanau
ID: 39775546
Hi,

I tried this, but nothing is still coming through.

<!DOCTYPE html>
   <head>
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="totalcheck.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/jquery-ui-1.10.3/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="totalcheck.css" />
 
        <script type="text/javascript">
                $(document).ready(function(){
                    $("#term").autocomplete({
                        source:'getautocomplete.php',
                        minLength:3,
						appendTo: "#resultsname"
                    });
                });
        </script>
   </head>
 
   <body>
 
      <form method="post" action="">
             <p>Name :
  <input type="text" id="term" name="term" />
             </p>
             <div name="resultsname" id="resultsname"></div>
             <p>&nbsp;</p>
      </form>
  
   </body>
</html>

Open in new window

0
 

Author Comment

by:mavmanau
ID: 39775560
I have it now displaying "No results found then the text box - which is strange because i can see the data that is being generated from the PHP file.  

Do I need to show you my PHP file perhaps?  or Am i calling it incorrectly?
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39775663
Try
<!DOCTYPE html>
   <head>
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="totalcheck.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/jquery-ui-1.10.3/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="totalcheck.css" />
 
        <script type="text/javascript">
                $(document).ready(function(){
                    $("#term").autocomplete({
                        source:'getautocomplete.php',
                        minLength:3,
						appendTo: "#resultsname"
                    });
                });
        </script>
   </head>
 
   <body>
 
      <form method="post" action="">
             <p>Name :
  <input type="text" id="term" name="term" />

             <div name="resultsname" id="resultsname"></div>
             </p>
      </form>
  
   </body>
</html>

Open in new window

0
 

Author Closing Comment

by:mavmanau
ID: 40060841
perfect.  Thank you, that solution worked brilliantly.

apologies for time taken to answer.
0

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
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…
Suggested Courses

777 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