Solved

cannot get ajax response into div

Posted on 2013-06-05
9
410 Views
Last Modified: 2013-06-05
Hi

I have the following periodicUpdater that should poll a url and append the results back to the results <div>

I cannot get this to return anything although the page I call loggs that it is getting polled.

What I want this (once its working) to do is look at my database, query and push the results back. ( i can grab everything just cant seem to get it back ;(

If anyone else has a better periodicUpdater I'd be greatful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Periodical Updater for jQuery</title>
    
    <style type="text/css">
        body{
            background-color: #c6d9e2;
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
        }
    
        #wrapper{
            width:800px;
            margin:0 auto;
        }
        
        #content{
            background-color:white;
            text-align:justify;
            padding:10px;
            border: 1px solid #BBB;
        }
        
        #results{
            height:200px;
            overflow:auto;
        }
        
        h1, h2, h3{
            color: #49176D;
        }
    </style>
    
  
  
</head>

<body> 
	<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.periodicalupdater.js"></script>
    <script type="text/javascript" src="../js/jquery_updater.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
		
			$.PeriodicalUpdater('../getLatestItems.php', {
			method: 'get',          // method; get or post
			data: '',               // array of values to be passed to the page - e.g. {name: "John", greeting: "hello"}
			minTimeout: 1000,       // starting value for the timeout in milliseconds
			maxTimeout: 8000,       // maximum length of time between requests
			multiplier: 2,          // the amount to expand the timeout by if the response hasn't changed (up to maxTimeout)
			type: 'text',           // response type - text, xml, json, etc.  See $.ajax config options
			maxCalls: 0,            // maximum number of calls. 0 = no limit.
			autoStop: 0,            // automatically stop requests after this many returns of the same data. 0 = disabled.
			cookie: {},             // configuration for the timeout-storing cookie
			verbose: 2              // Sets the console logging verbosity: 0=none, 1=some, 2=all 
			}, function(data){
				var myHtml = 'The data returned from the server was: ' + data + '';
				$('#results').append(myHtml);
			});
           
        })

    -->
    </script>
    <div id="wrapper">
        <div id="content">
            <h1>PeriodicalUpdater plugin for jQuery</h1>            
    
            <div id="results">
                <h3>Results from $.PeriodicalUpdater()</h3>
            </div>
            
        </div>    
    </div>  
    
</body>
</html>

Open in new window



## getLatestItems.php ##

<?php

error_log("got called");

//$testArr['data'] = 'cheese'; 
//echo json_encode($testArr); 

print 'cheese';

?>

Open in new window

0
Comment
Question by:Neil Thompson
[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
  • 4
  • 4
9 Comments
 
LVL 12

Accepted Solution

by:
adrian_brooks earned 500 total points
ID: 39222885
The only thing that is sticking out as questionable about your code is that you have an attribute called 'data' and you have a function that accepts the returned data.

Try changing the name of the arg in the function that receives the returned data to something like 'return_data' and see if that fixes your problem.

~AB
0
 
LVL 58

Expert Comment

by:Gary
ID: 39222896
Any reason to not just use a simple ajax call
function appendData(){
$.ajax({type:'GET',url:'../getLatestItems.php',,success:function(response) {
	$('#results').html(response);
    }
}

var refreshInterval = setInterval(appendData, 30000);

Open in new window

0
 
LVL 3

Author Comment

by:Neil Thompson
ID: 39222924
adrian : thanks it now works in Chrome but still not in IE?

Gary: I guess no reason although I want something like facebook that checks less frequently each time it checks the server and nothing has changed. The above doubles the time out between each check until something is new. (its for a group shopping site where things could be added loads at a time, or be very quiet) and I want to reduce server load.
0
Stressed Out?

Watch some penguins on the livecam!

 
LVL 12

Expert Comment

by:adrian_brooks
ID: 39222980
If its not working in IE, that may be a shortcoming of the Periodical class and less to do with your code.

As for the comment by Gary, you could technically achieve the same thing with rolling your own logic into the out-of-the-box jQuery Ajax implementation that would do the same thing. I only use other people's code when as a last effort. When I write my own, I know it will be fully compatible with my app then. But that's your call and preference.

~AB
0
 
LVL 3

Author Comment

by:Neil Thompson
ID: 39223050
I'd love to do that but way above my level unfortunately, im trying to cobble together ;)
0
 
LVL 12

Expert Comment

by:adrian_brooks
ID: 39223065
Understood. :)

Perhaps try reaching out to the PeriodicalUpdater author about the IE issue.

~AB
0
 
LVL 3

Author Comment

by:Neil Thompson
ID: 39223184
solved the issue, there was a call in the code to an external .js file that was erroring when using the developer tools. A google came up with this : http://blogs.msdn.com/b/ieinternals/archive/2010/09/27/ie9-beta-google-image-search-javascript-content-type-and-nosniff.aspx

I copied the file directly to my server and linked to it instead and hey presto!

With that and your 'return_data' tip its now fine.

Thanks Neil
0
 
LVL 3

Author Closing Comment

by:Neil Thompson
ID: 39223186
Superb, many thanks
Neil
0
 
LVL 12

Expert Comment

by:adrian_brooks
ID: 39223242
Glad I could help you out, Neil! :)

Happy coding!

~AB
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
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 viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

724 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