Load dynamic data

[EDYYY]

Hello. If someone can help me, i'll be grateful

So i have a foreach and an $output .= function that fills some infos in a table. Inside it i have a div for each line that when hovering your mouse should get some data .. Here i have a big problem, because for each line it should get some data and i don't know how to do it ...

 

i'll post here some of my code for better understanding.

 

//some java here

<?php

require "class.php";

 

  $server_list = query_group();

  $misc  = server_misc($server);

 

foreach ($server_list as $server)

    {

      $misc  = server_misc($server);

      $server = server_html($server);

      $idi = "{$server['o']['id']}";

$harta = "<a onmouseover=\"ShowContent('harta'); return true;\" onmouseout=\"HideContent('harta'); return true;\" href='".link($server['o']['id'])."' target=\"_self\">{$server['s']['map']}</a>

<div style=\"position:absolute;\" id=\"harta\" class=\"FAQ\">file_get_contents('http://mysite/player.php?d={$idi}')</div> ";

 

$output .= "

<table>

........... some code.....

<td>

{$harta}

        </td>

.......

 

so basicly when i hover my mouse over each row it should get data from the file for that id... The problem is that only one page can be loaded with file_get_contents. I read over the internet that some ajax functions can do it but i really don't know how.

Please help me, i've been looking for 3 days already without any luck  :'(

[ManiacDan]

You need to use javascript/ajax for this if you don't want to load all this data before the page is rendered.

[Maq]

I would suggest using a framework like JQuery.  Google JQuery post call, and you will find some examples similar to what you're trying to do.

[EDYYY]

thanks for your advice

I googled it but with no results. I found some tutorials that works for one page(link) but now in my case here. I should say that i'm no coder, some stuff are are foreign language for me ..

Can you please point me in the right direction ?

By the way, excuse me for not "speaking" correctly.

 

[Maq]

This should give you some good ideas - http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

 

You should pass in the "$idi" as a parameter when you call your AJAX method.  If you need more help, make an attempt and post back.

[EDYYY]

i didn't understand a bit from there, but i managed to get the data. now, as a final push : how to make it to open in new box (onmouseover and onmouseout). I've seen something but i don't know how to connect what i have with what i should have ..

here is my script:

 

<script type="text/javascript" language="JavaScript">

<!-- Copyright 2006 Bontrager Connection, LLC

var cX = 0; var cY = 0;

function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}

function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}

if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }

else { document.onmousemove = UpdateCursorPosition; }

function AssignPosition(d) {

d.style.left = (cX+10) + "px";

d.style.top = (cY+10) + "px";

}

function HideContent(d) {

if(d.length < 1) { return; }

document.getElementById(d).style.display = "none";

}

function ShowContent(d) {

if(d.length < 1) { return; }

var dd = document.getElementById(d);

AssignPosition(dd);

dd.style.display = "block";

}

function ReverseContentDisplay(d) {

if(d.length < 1) { return; }

var dd = document.getElementById(d);

AssignPosition(dd);

if(dd.style.display == "none") { dd.style.display = "block"; }

else { dd.style.display = "none"; }

}

//-->

 

$(function() {

 

$(".info").hover(function()

{

 

var id = $(this).attr("id");

var name = $(this).attr("name");

var dataString = 'd='+ id ;

var parent = $(this);

 

 

if(name=='down')

{

 

$(this).fadeIn(200).html('<img src="loader.gif" align="absmiddle">');

$.ajax({

  type: "POST",

  url: "player.php" + "?d=" + id ,

  data: dataString,

  cache: false,

 

  success: function(html)

  {

    parent.html(html);

 

  }  });

 

}

return false;

});

 

});

</script>

 

Also as you see here i already have a function that shows something on mouseover ..

 

$playeri = "<a onmouseover=\"ShowContent('UNIQUEID'); return true;\" onmouseout=\"HideContent('UNIQUEID'); return true;\" href='".link($server['o']['id'])."' target=\"_self\">{$server['s']['playersmax']}</a>

<div style=\"position:absolute;\" id=\"UNIQUEID\" class=\"FAQ\">Player</div> ";

 

$harta = "<a href='' class='info' id={$server['o']['id']} name='down'>{$server['s']['map']}</a>";

 

So how can i make it to show in a "pop-up", div, table or whatever it's called so you can understand me  I showed you the other function just to see that i already have one for mouseover function, maybe can be modified but it should not mess with the other content it displays..

 

ps: Thanks a lot for youre help !

Later edit: maybe if i can PM you the link, you can see better what i'm talking about ?

[Maq]

This is why I suggested a framework like JQuery.  It makes everything easier, especially loading into dialogs.  Here is an example:

 

In your .js file, write a function like this:

function newDialog(url) {
$("body").append("");
$("#new-dialog").load(url, {},
		function(responseText, textStatus, XMLHttpRequest) {
		}).dialog( {
	height: 680,
	width: 840,
	draggable :true,
	resizable :false,
	closeOnEscape: false,
	close : function(ev, ui) {
                   $('#new-dialog').remove();
	}
});
}

This creates a div (#new-dialog) on the fly so you have something to populate into.  The "url" parameter is the URL for the AJAX call.  After it makes the call, the responseText will populate into the #new-dialog dialog.  You call it the same way you're doing it now.

 

 

[Adam]

Just to add to Maq's post, to use the dialog() widget you need to also include the jQuery UI library (core + Dialog widget).

[EDYYY]

oh ... i'm uploading the whole php so you can see better, i don't even understand how to call it 

Just treat me like i'm dumb, please. I cannot comprehend anymore any of this ... 

 

link HERE

[EDYYY]

i can't edit anymore my last post.

Can you help me with that or not ? Please.

[Maq]

oh ... i'm uploading the whole php so you can see better, i don't even understand how to call it 

Just treat me like i'm dumb, please. I cannot comprehend anymore any of this ... 

 

link HERE

Please don't upload the entire code, that has nothing to do with it plus people aren't going to download random files.

 

I showed you exactly how to load an AJAX response into a dialog.  You call it like this:

Show Dialog

 

Of course replace google.com with your server call.  Also make sure you include your dialog.js (the file containing "newDialog()") .

[EDYYY]

thanks a lot ! it has some bugs but it works !

 

 

[Maq]

thanks a lot ! it has some bugs but it works !

Sure, post the specific bugs, the pertaining code, errors, etc. if you need help with them.

[EDYYY]

i user onmouseover event and sometimes it opens multiple dialogs ...

[Maq]

Can I see the HTML code where you are calling the dialog?  Also, you may need to add an onmouseout() call to close the previous dialog.

[EDYYY]

actualy i've tried with onclick and the bugs still are there ...

 

<td title='{$server['s']['name']}' style='text-align:left'>
	   <p onclick=\"newDialog('detaills.php?s={$server['o']['id']}')\">{$misc['name_filtered']}}</p>

        </td>

i hope this is what you asked..

if you click slowly on one row, it openes the dialog, then click another row, it openes .. but if you click fast let's say one click / second on different rows, then the problem appears.

with onmouseover is the same, the problem is that i don't know what function to call on onmouseout=close(event) or something like this ...