Jump to content

Problem with ajax(real time update)


itrollmework

Recommended Posts

First of all, i must say i am really new, please forgive me if i ask something stupid. :P

Sooooooo i want to make something like an alert system.

 

page A can send a form and hostname to page B.

 

Then B gets the information and one of the button will catch the hostname, turn the button to red and play a soundtrack. (real time update).

 

After i click the button, it will turn back to green and show the information in a popup box.

That's the whole idea.

 

I am page 1<form method="get" action="get.php"><?php   print (gethostbyaddr($_SERVER['REMOTE_ADDR']));  ?><input type="hidden" name="hostname" value="<?php  print(gethostbyaddr($_SERVER['REMOTE_ADDR']));  ?>"><select name="problem">    <option value="1" selected>1</option>    <option value="2">2</option>    <option value="3">3</option>    <option value="4">4</option>    </select><br><br><input type="submit" value="Clickme:D" onClick="">
I think i am page 2<html><?php    $hostname = $_GET["hostname"];    $problem = $_GET["problem"];?><br><br>    <script type="text/javascript" language="javascript">   function changeBtn(btn){if (! btn.style){alert("Big no for you and dont ask y, just cant do it D:");return;}btn.style.background = "#00FF00";btn.style.color = "black";return;}</script><body><form id="f1" name="f1" action="" method=""><br><input type="button" value="testBtn" onClick="changeBtn(this);document.getElementById('sound1').pause();"><audio id="sound1" src="123.mp3"></audio><input type="button" value="Sound 1" onClick="document.getElementById('sound1').play()"></form></body></html> 

so here is something that i need help with...

 

1. i need auto refresh on page 2 when i click the submit button from page 1(get hostname,dropbox value), when refresh turn the button to red and play sound1.

 

2.click the testBtn, show dropbox value in popup box.

 

thankyou :D

Edited by itrollmework
Link to comment
Share on other sites

Are both of those pages open at the same time? If you set the form's target attribute to any valid name then it will keep submitting the form to the same window, so every time you submit the form the other window will refresh with the new data.

Link to comment
Share on other sites

Are both of those pages open at the same time? If you set the form's target attribute to any valid name then it will keep submitting the form to the same window, so every time you submit the form the other window will refresh with the new data.

i am sorry i didnt check after i post and my code was a mess

and ya.... kinda open at the same time...

let me put it this way

 

PC 1,2,3,4 open Page A and send things

 

PC_Z will always have page B open, when 1,2,3,4 submit, Page B will refresh (Btn turn red,play music)

Edited by itrollmework
Link to comment
Share on other sites

Rather than diving into the full complexity of what you are attempting to accomplish, styling buttons and playing audio files and so forth, why not just try to get the communication working first?

 

You mention AJAX but I don't see any AJAX in your code above. You should be looking at examples such as...

 

http://www.w3schools.com/ajax/ajax_php.asp

 

The code you posted above can send information to a server but it cannot send a message from the server to an open page such as one being viewed by another user (unless they refresh the page). You need AJAX to do the 2nd half of that communication. Maybe I am not understanding what you what to accomplish.

Link to comment
Share on other sites

True..i need to do it step by step..

so i found something on the internet and i change a bit

become this

<?php	if (isset($_GET["ThingsISend"])) { 		die();	}?><script type="text/javascript">	var ajaxWhatcha;	if (window.XMLHttpRequest) ajaxWhatcha = new XMLHttpRequest();	else if (window.ActiveXObject) ajaxWhatcha = new ActiveXObject("Microsoft.XMLHTTP");		function sendTheThing() {		document.getElementById("Button1").disabled = true;		ajaxWhatcha.onreadystatechange = function() {			if (ajaxWhatcha.readyState == 4) {				document.getElementById("Button1").value = "Submited"; 			}		}		ajaxWhatcha.open("GET", "?ThingsISend=" + document.getElementById("problem").value, true);		ajaxWhatcha.send(null); 	}</script><b>Pick One</b><br><form><input type="radio" id="problem" value="1" checked> 1<br><input type="radio" id="problem" value="2"> 2<br><input type="radio" id="problem" value="3"> 3<br><input type="radio" id="problem" value="4"> 4<br>	<input id="Button1" value="sned" type="button" onClick="sendTheThing()"></form>			<p/>	</body>

I kinda understand what it does, but i dont know how to receive(get) it from the other pages...

Link to comment
Share on other sites

The pages need to send their data to the server, and the server saves it in a database or some other data store. Your other page will periodically contact the server to get the data and update the page. There's not a connection between the different pages on different computers, one page will just check for updates on the server and the others will send data to the server.

Link to comment
Share on other sites

The pages need to send their data to the server, and the server saves it in a database or some other data store. Your other page will periodically contact the server to get the data and update the page. There's not a connection between the different pages on different computers, one page will just check for updates on the server and the others will send data to the server.

!!!!!!!!!!!!!!!

That is what i want, do you have some example that i can look at?? so i can learn from it?

cuz i have a feelin that i misunderstand something about ajax and shiz.....

Thankyou

Link to comment
Share on other sites

I don't have an example of your specific project, no, but there are plenty of tutorials about ajax around. Ajax is just a way to use Javascript to send data to the server or get data just like if you submitted a form or typed in a page address, it just happens in the background in Javascript instead of refreshing the whole page.

  • Like 1
Link to comment
Share on other sites

thankyou for helpin me to understand how it works, i m almost done with my work, but i got a problem now

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
$page = $_SERVER['PHP_SELF'];
$sec = "5";
?>
<html>
    <head>
    <meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
    </head>
    <body>
	<script>
function playMusic()
{
	document.getElementById('sound1').play();
}
</script>
<form id="f1" name="f1" action="" method="">
<audio id="sound1" src="fire.wav"></audio>
<br>
<input type="button" value="testBtn" onClick="document.getElementById('sound1').pause();">
</form>

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
} 
$sql = "SELECT hostname, problem FROM test1";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo "<br> "." name ". $row["hostname"]. " problem ". $row["problem"].date ("Y/m/d") ."<br>";
		 playMusic();
     }
} else {
     echo "0 results";
}

$conn->close();
?>  
    </body>
</html> 

on line 38 , i know the code will search database and i cant put my date on, but how can i do it?

do i need to do a for loop or is there a easy ,better way to do it?

 

and how can i play the soundtrack in line 39....

what is the right way to do it...

 

btw dont worry about ajax.... i m gonna put it after i make everything works

so there will be ver 2.0 xD

 

Thankyou so much for the help

Edited by itrollmework
Link to comment
Share on other sites

Check the manual for the date function, if you pass a timestamp to it then it will show for that date and time.

 

http://php.net/manual/en/function.date.php

 

You can't call a Javascript function from PHP or vice-versa. They are completely different languages running in different places (the server, or your browser). Use PHP to output the HTML/Javascript code on the page. If you just want to run the function then output a script tag and the code to run the function.

Link to comment
Share on other sites

<?php

$myAudioFile= "fire.wav";
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "test";


$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
} 
$sql = "SELECT hostname, problem FROM test1";
$result = $conn->query($sql);

if ( $result->num_rows > 0) {

     while($row = $result->fetch_assoc()) {
         echo "<br> ". $row["hostname"]. $row["problem"]."<br>";
		 echo '<EMBED SRC="'.$myAudioFile.'" HIDDEN="true" AUTOSTART="TRUE"></EMBED>';
     }
} else {
     echo "0 results";
}

$conn->close();
 ?>

Now....the music will play for each row....(i know is stupid but i try LOL)

but i cannot make a button to manually stop the music.

How can i do it?

or can i manually clean the record, so the old record will not come out(which means the music will stop)

 

i need something like a button so the "USER" can stop the annoying music:P

 

i try to google but i cannot find the answer D:

please help

Edited by itrollmework
Link to comment
Share on other sites

it doesnt work with audio tag (i cant make it work... :facepalm:

i try and embed tag is the only way works (for me)

 

thats why i m asking if i can del the record manually

even tho i can stop the music....the page will refresh

which means the music will start over and over again in every 8 sec....

    while($row = $result->fetch_assoc()) {
         echo "<br> ". $row["hostname"]. $row["problem"]."<br>";
		 echo '<EMBED SRC="'.$myAudioFile.'" HIDDEN="true" AUTOSTART="TRUE"></EMBED>'

:facepalm::facepalm::facepalm::facepalm:

Edited by itrollmework
Link to comment
Share on other sites

You should be passing an array of audio file URLs to Javascript and then have Javascript modify the <audio> element on the page.

 

Here's an introduction to managing audio and video in HTML and Javascript: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

 

<embed> invokes a browser plug-in which you have no control over. Aside from that, browsers in general are moving away from plug-ins, so using embed for audio will not continue working in the future.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...