?
Solved

cannot get ajax response into div

Posted on 2013-06-05
9
Medium Priority
?
411 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:
Richard Davis earned 2000 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
Basic Security of Your VPC

So, you’ve got this shiny new VPC and a fancy new application configured on your EC2 servers ready to go. This application is only accessible from your computer, which is great for security, but you need your users to be able to access it! So, what’s the easiest way to do this?

 
LVL 12

Expert Comment

by:Richard Davis
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:Richard Davis
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:Richard Davis
ID: 39223242
Glad I could help you out, Neil! :)

Happy coding!

~AB
0

Featured Post

Basic Security of Your VPC

So, you’ve got this shiny new VPC and a fancy new application configured on your EC2 servers ready to go. This application is only accessible from your computer, which is great for security, but you need your users to be able to access it! So, what’s the easiest way to do this?

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
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