1 of 3
1
PM and Ajax
Posted: 19 December 2005 02:51 PM   [ Ignore ]  
Lab Assistant
Avatar
RankRank
Total Posts:  283
Joined  12-22-2003

All right Ajax experts…

We need to combine Ajax with the PM system so that a member can be informed of a waiting PM without having to refresh a page.

Profile
 
 
Posted: 19 December 2005 07:00 PM   [ Ignore ]   [ # 1 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  7509
Joined  08-05-2002

That’s all?

 Signature 
Profile
 
 
Posted: 19 December 2005 07:28 PM   [ Ignore ]   [ # 2 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  283
Joined  12-22-2003

That’s a good start…

Profile
 
 
Posted: 19 December 2005 11:15 PM   [ Ignore ]   [ # 3 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  7509
Joined  08-05-2002

Got a spare half hour to play with this.  First, you will need to create a new EE template, have PHP on Input, and put this in it:

<?php
/* PHP on Input */
global $SESS, $DB;
$query = $DB->query("SELECT private_messages FROM exp_members WHERE member_id = '".$DB->escape_str($SESS->userdata['member_id'])."'");
exit(
$query->row['private_messages']);
?>

My template was in the ‘site’ template group and I called the template ‘anything’.  Next, find the forum template for the Private Message box.  Replace its HTML with this new stuff:

<script type="text/javascript">

var
XMLHttp=false;
var
checkTime = 15; // 15 seconds

function checkPM()
{

  
var serverPage = '/ExpressionEngine140/index.php/site/anything/';
  
  if (
window.XMLHttpRequest)
{
XMLHttp
= new XMLHttpRequest();
XMLHttp.onreadystatechange = processResult
XMLHttp
.open("GET", serverPage);
XMLHttp.send(null);
// branch for IE/Windows ActiveX version
}
else if (window.ActiveXObject)
{
try
{
XMLHttp
= new ActiveXObject("Microsoft.XMLHTTP");
}
catch
(g){ var unSupported = 'y'; }

if (XMLHttp)
{
XMLHttp
.onreadystatechange = processResult
XMLHttp
.open("GET", serverPage);
XMLHttp.send(null);
}
}
}

function processResult()
{
if (XMLHttp.readyState == 4 && XMLHttp.status == 200)
{
var numPMs = XMLHttp.responseText;

numPMs = numPMs.replace(/\s/, '');
if (
numPMs != '0')
{
document
.getElementById('pm_off').style.display = 'none';
document.getElementById('pm_on').style.display = 'block';
}
else
{
document
.getElementById('pm_off').style.display = 'block';
document.getElementById('pm_on').style.display = 'none';
}

document
.getElementById('pm_unread').innerHTML = numPMs;
setTimeout("checkPM()", checkTime * 1000);
}
}

setTimeout
("checkPM()", checkTime * 1000);

</script>

<div class="privatemessagebox">

<
table cellpadding="0" cellspacing="3" border="0" style="width:100%;">
<
tr>
<
td style="width:50px;">
{if no_private_messages}
<div id="pm_off"><img src="{path:image_url}priv_msg_off.gif" border='0' width='40' height='40' /></div>
<
div id="pm_on" style="display:none"><img src="{path:image_url}priv_msg_on.gif" border='0' width='40' height='40' /></div>
{/if}
{if private_messages}
<div id="pm_off" style="display:none"><img src="{path:image_url}priv_msg_off.gif" border='0' width='40' height='40' /></div>
<
div id="pm_on" ><img src="{path:image_url}priv_msg_on.gif" border='0' width='40' height='40' /></div>
{/if}

</td>
<
td>
<
a href="{path:private_messages}">{lang:private_message}</a><br />
{lang:unread_pm} <span id="pm_unread">{total_unread_private_messages}</span>
</
td>
<
td>
{include:member_post_total}<br />
{lang:your_last_visit} 12-19-2005 01:41 AM
</td>
</
tr>
</
table>
</
div>

You will see the javascript up there.  I currently have it set to check every 15 seconds.  Make sure to see the relative path for your template created above in the checkPM javascript function and you should be good.

 Signature 
Profile
 
 
Posted: 07 April 2006 08:27 PM   [ Ignore ]   [ # 4 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  283
Joined  12-22-2003

For the PHP gurus…

I’m displaying a logged-in member’s number of private messages outside of the forums module with this little chunk of code:

<?php
    
global $SESS;
    
$pmcount = $SESS->userdata['private_messages'];

    if (
$pmcount > 0) {
    
echo '<b>'.$pmcount.'</b>';
    
}

    
else {
    
echo '0';
    
}

    ?>

Now…

In that chunk of PHP code, how do I process the following lines from Paul’s code:

<div id="pm_off"><img src="/images/v1.2/pvt_msg_off.gif" border='0' width='55' height='20' /></div>
<
div id="pm_on" style="display:none"><img src="/images/v1.2/pvt_msg_on.gif" border='0' width='40' height='40' /></div>

and

<div id="pm_off" style="display:none"><img src="/images/v1.2/pvt_msg_off.gif" border='0' width='55' height='20' /></div>
<
div id="pm_on" ><img src="/images/v1.2/pvt_msg_on.gif" border='0' width='40' height='40' /></div>

? If I try to ‘echo’ them, I get errors.

Profile
 
 
Posted: 09 April 2006 08:04 AM   [ Ignore ]   [ # 5 ]  
Moderator
Avatar
RankRankRankRankRankRankRank
Total Posts:  23744
Joined  05-20-2002

You’d either need to put backslashes before your single quotes- or just drop out of php entirely- which is probably what I’d do.  Make sense?  If not, post what you were trying to use that was throwing errors.

 Signature 

AKA rob1

Help Request TipsPro Network

Profile
 
 
Posted: 11 July 2006 09:18 AM   [ Ignore ]   [ # 6 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  357
Joined  07-10-2004

Would it be possible to alter this in such a way that instead of refreshing the PM display, the code takes a look at an xml file on the server and updates the information located there?

I’m trying to think of a way to improve the Koru Production’s Now Playing plugin.

Rob1 pointed me to this thread as a possible start to the solution.

 Signature 

Scrine ~ home of the lost, forgotten and lonely sentence

Profile
 
 
Posted: 11 July 2006 09:28 AM   [ Ignore ]   [ # 7 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  7509
Joined  08-05-2002

You want it to update a file or do you want it to use the information from a file and update something on the screen?

 Signature 
Profile
 
 
Posted: 11 July 2006 09:55 AM   [ Ignore ]   [ # 8 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  357
Joined  07-10-2004

Well, the iTunes visualizer plugin uploads an xml file to the server, and the Now Playing plugin then reads the file and posts the song currently playing in iTunes.  I was wondering if it could somehow read that xml file and automatically update the information in that plugin without refreshing the entire screen, only the Now Playing song.

 Signature 

Scrine ~ home of the lost, forgotten and lonely sentence

Profile
 
 
Posted: 11 July 2006 11:32 AM   [ Ignore ]   [ # 9 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  7509
Joined  08-05-2002

That plugin is not updated, it merely displays the updated XML file.  So, what you want is possible with this.  You would probably put the plugin in its own, dedicate template and then have the AJAX code above simply call that template and display the results on your page.

 Signature 
Profile
 
 
Posted: 11 July 2006 11:35 AM   [ Ignore ]   [ # 10 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  357
Joined  07-10-2004

Thanks, Paul.  I don’t have a clue what I’m doing, but at least knowing it’s possible, I’m willing to wade in and give it a try.

 Signature 

Scrine ~ home of the lost, forgotten and lonely sentence

Profile
 
 
Posted: 11 July 2006 11:44 AM   [ Ignore ]   [ # 11 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  7509
Joined  08-05-2002

Funny, sounds just like me every workday morning…

 Signature 
Profile
 
 
Posted: 11 July 2006 11:47 AM   [ Ignore ]   [ # 12 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  357
Joined  07-10-2004

Ha!  I’m just trying to figure out what to replace now.

I’m assuming where it says “GET” in red, I’m replacing with the server path to the xml file.

 Signature 

Scrine ~ home of the lost, forgotten and lonely sentence

Profile
 
 
Posted: 11 July 2006 11:54 AM   [ Ignore ]   [ # 13 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  7509
Joined  08-05-2002

Nope, remember how the data that needs to be loads is that which is created by the plugin?  So, that GET url should be the URL to your page/template with only the plugin in it.

 Signature 
Profile
 
 
Posted: 11 July 2006 12:15 PM   [ Ignore ]   [ # 14 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  357
Joined  07-10-2004

I’m not sure I’m going to get this, Paul.  I just don’t know enough.  Anything, really, other than how to ask questions, it seems.

In the line:

var serverPage = '/ExpressionEngine140/index.php/site/anything/';

am I putting in

http://www.scrine.com/templategroup/template

And I don’t have a clue how I’m supposed to change the whole PM business in that code.  Do I just perform the function part at the top half, and then get rid of the function result part, letting the plugin template that’s been called for do that work?

Or do I just try to bribe you with money or something to make it work?

I’d pull out my hair but I’m running kind of low.

 Signature 

Scrine ~ home of the lost, forgotten and lonely sentence

Profile
 
 
Posted: 11 July 2006 12:41 PM   [ Ignore ]   [ # 15 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  7509
Joined  08-05-2002

Hm.  The above AJAX stuff is very specific to the PM info displaying, so perhaps we should try a different approach and get you working on a library?  I suggest the Moo.fx one as it is really light weight and has AJAX easily available.  You will want to download the files and then load them in your page’s headers:

<script type="text/javascript" src="moo.fx/scripts/prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx/scripts/moo.ajax.js"></script>
<script type="text/javascript" src="moo.fx/scripts/moo.fx.js"></script>
<script type="text/javascript" src="moo.fx/scripts/moo.fx.pack.js"></script>

And then, it is really simple to create a function that does an AJAX request and loads the results into a div:

<script type="text/javascript">
var
checkTime = 15; // 15 seconds

function load_itunes()
{    
    
new ajax ('index.php/template_group/template/', {
                            update
: $('iTunesDiv')
                            
}
             
);
             
    
setTimeout("load_itunes()", checkTime * 1000);
}

setTimeout
("load_itunes()", checkTime * 1000);

</script>

 Signature 
Profile
 
 
Posted: 11 July 2006 01:22 PM   [ Ignore ]   [ # 16 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  357
Joined  07-10-2004

Okay, bear with me just a little more, Paul.

I downloaded the four moo.fx scripts and place them in my header, along with

</script>
</script>
</script>
</s

In my template, I then put the function you’ve provided, looking like this:

var checkTime = 15; // 15 seconds

function load_itunes()
{    
    
new ajax ('http://scrine.com/scrine/now-playing/', {
                            update
: $('iTunesDiv')
                            
}
             
);
             
    
setTimeout("load_itunes()", checkTime * 1000);
}

setTimeout
("load_itunes()", checkTime * 1000);

</script>

Isn’t the starting script tag missing?  What do I use exactly?

I’m not sure what the iTunesDiv means.  Is that just the div where the results will show, defined in the CSS?

Thank you for your patience, Paul.  I know you have better things to be doing than helping me figure this out.  I do think other people will want to utilize this setup, though, once it’s beat into my hard head.

 Signature 

Scrine ~ home of the lost, forgotten and lonely sentence

Profile
 
 
Posted: 11 July 2006 01:24 PM   [ Ignore ]   [ # 17 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  7509
Joined  08-05-2002

The XSS_Clean function in EE is removing the tags from your forum posts, but yes they should be there.  The ‘iTunesDiv’ is the id for the <div> that will contain your results:

<div id="iTunesDiv">Display list thing here</div>

 Signature 
Profile
 
 
Posted: 11 July 2006 01:35 PM   [ Ignore ]   [ # 18 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  357
Joined  07-10-2004

I really feel like an idiot here.  What’s going in the iTunesDiv?  Isn’t this where the results of the Now Playing plugin go?  I just don’t know how to make the results show.

 Signature 

Scrine ~ home of the lost, forgotten and lonely sentence

Profile
 
 
   
1 of 3
1
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 09:33 AM
Total Registered Members: 66394 Total Logged-in Users: 25
Total Topics: 84724 Total Anonymous Users: 20
Total Replies: 454722 Total Guests: 195
Total Posts: 539446    
Members ( View Memberlist )