thanks for reading this,
I'm making a website. I have a popup box that asks if you are 18 years or older. Once you click "yes", the forum I'm making appears. When you click the reply button, for some unknown reason, the popup box reappears.
Why is that?
this is the php file.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Umich Chan</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="index.js">
</script>
</head>
<body>
<div id="confirmage">
<h2 style="text-align:center;">Are you older than 18 years old?</h2>
<button id="close" style="display:block;margin-left:auto;margin-right:auto;margin-bottom:5px;">Yes</button>
<button id="linknoclose" style="display:block;margin:auto;">No</button>
</div>
<div id="fadeina" style="opacity:0;">
<p>
</p>
Post Anonymously Now<br>
<br>
<?php
// Connect to server and select database.
$con = mysqli_connect("$host", "$username", "$password", "$db_name") or die ("cannot connect");
$result = mysqli_query($con, "SELECT * FROM Table_forum ORDER BY `key` DESC");//
// Start looping table row
while($rows = mysqli_fetch_array($result)){
$key=$rows['key'];
$name=$rows['name'];
$input=$rows['input'];
echo "<div class='answerbox'>";
echo '<font color="blue">' .$name. '</font>';
echo "<br />";
echo "$input.";
echo "<a class='reply' href=''>Reply</a>";
echo "</div>";
echo "<div class='replybox'><textarea></textarea></div>";
/*
echo "<div class='commentbox'>";
$namecomment = mysqli_query($con, "SELECT namea FROM `postcomments` WHERE keya = '1'");//
echo ".$name.";
$inputcomment = mysqli_query($con, "SELECT input FROM `postcomments` WHERE keya = '" .mysql_real_escape_string .$key."'");//
echo ".$inputcomment.";
echo "</div>";
*/
}
mysql_close();
?>
</div>
</body>
</html>
This the js file.
$(document).ready(function() {
$(".replybox").hide();
$(".reply").css("color","blue");
$("#fadeina").hide();
$(".reply").click(function(){
$(".replybox").show();
});
$("#close").click(function(){
$("#confirmage").remove();
});
$("#close").click(function(){
$("#confirmage").empty();
});
$("#close").click(function(){
$("#fadeina").fadeTo('slow',1);
});
$("#linknoclose").click(function(){
history.back();
return false;
});
});
The popup box reappears because your Reply link has an empty href:
"<a class='reply' href=''>Reply</a>";
As Stated in RFC 2396: A URI reference that does not contain a URI is
a reference to the current document. In other words, an empty URI
reference within a document is interpreted as a reference to the start
of that document
try using href="javascript:;".
Unlike the <button> elements, the "reply" anchor needs e.preventDefault() (or return false) to inhibit its natural hyperlink behaviour, which will cause the page to reload.
The code will also simplify quite significantly.
$(document).ready(function() {
$(".replybox, #fadeina").hide();
$(".reply").css("color","blue").on('click', function(e) {
e.preventDefault(); //<<<<<<<<
$(".replybox").show();
});
$("#close").on('click', function() {
$("#confirmage").remove();
$("#fadeina").fadeTo('slow', 1);
});
$("#linknoclose").on('click', function() {
history.back();
});
});
Related
function showUser(str) {
if (str=="") {
document.getElementById("content").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","paginas.php?q="+str,true);
xmlhttp.send();
}
I got this script from a website, it goes with this
<?php
$q = htmlspecialchars($_GET['q']);
$con = mysqli_connect('localhost','root',NULL,'ttrpg');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM content WHERE Pagina = '".$q."' ORDER BY ID ASC";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) {
echo '<div class="container">';
echo $row['Text'];
echo "</div>";
}
echo "</table>";
mysqli_close($con);
?>
I also used this:
<body onload="showUser('Home')">
I didn't change the function's name because there's no need for that
The problem I'm having is that when I load the page, there's nothing showing up inside the div.
When I press a link with for example onclick="showUser('Apple')" the text inside the div DOES change, but to the text from Home, this text doesn't ever go away, except when I reload the page
If you want to load a script on page load you can use
<script>
showUser('Home');
</script>
just before
</body> or </html> /* it will also work at the end of all html codes.*/
If you want to just print the query you executed in ajax file then you can simply use
echo $sql="SELECT * FROM content WHERE Pagina = '".$q."' ORDER BY ID ASC";
you can also see the whole ajax headers, parameters sent and response using firefox's firebug or chrome 's developer tools using inspect element then going to nework it will show ajax request and response.
Additionally you can use print_r($_REQUEST) in your ajax php file.
EDITS: I have written code to work for your needs using ajax. This will call home pages content once the page loads from fetching record from table content. If you click on about button then it will fetch content of about page from content table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style>.msg{ color:#ff0000;}
#contentloader{ background-color:#fff; border:1px solid #333; padding:10px; }
</style>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function ajaxContentLoad(page){
q = {
'page':page,
}
$.ajax({
type:'post',
data:q,
url:'ajaxData.php',
beforeSend: function(){
$("#msg").text("sending request to server...");
},
complete:function (){
$("#msg").text("request received and loaded");
},
success:function(result, textStatus, jqXHR) {
$("#contentloader").html(result);
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
})
}
$().ready(function(e){
ajaxContentLoad('Home');
})
</script>
<body>
<div style="padding: 20px; margin:20px auto; width:80%; background: #eee">
<button id="btn1" value="Home" onclick="ajaxContentLoad('Home');">Home</button>
<button id="btn1" value="About" onclick="ajaxContentLoad('About');">About</button>
<p id="msg" class="msg"></p>
<div id="contentloader">
Content on page load
</div>
</div>
</body>
</html>
and here is ajaxData.php file
<?php
$q = htmlspecialchars($_REQUEST['page']);
$con = mysqli_connect('localhost','root',admin,'demo');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"demo");
$sql="SELECT * FROM tbl_content WHERE page = '".$q."' ORDER BY ID ASC";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) {
echo '<div class="container">';
echo $row['content'];
echo "</div>";
}
mysqli_close($con);
Link:
this is the page I am working on
So, I am trying to create a page that will produce a playlist of vimeo videos that will play one after another. Eventually I will have them hide and show using jquery or something so that only one embedded video iframe will appear at a time. In the meantime I am simply trying to get the vimeo api to give me control over each individual object.
So the desired result for now would be have each set up buttons control each video with its same $nummy value
where $nummy is the order in the list
The issue is that at the moment ONLY THE LAST video in the list responds to its own button-set's commands.
Here's the code WITH PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test The Loop2</title>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
</head>
<body>
<?
//db connect
$con = mysql_connect("d######t","db######104","no#######s");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
//db select
mysql_select_db("db337100104", $con);
$result = mysql_query("SELECT * FROM vim_playlist1");
while($row = mysql_fetch_array($result))
{
$nummy = $row['listnum'] ;
$url = $row['url'] ;
$nexty = $nummy+1 ;
//not an area of php
?>
<iframe class="vimeo" id="play<? echo $nummy ?>" src="http://player.vimeo.com/video/<? echo $row['url'] ?>?api=1&player_id=play<? echo $nummy?>" width="500" height="281" frameborder="0"></iframe>
<br />
<button id="playButton<? echo $nummy ?>">Play</button>
<button id="pauseButton<? echo $nummy ?>">Pause</button>
<button id="unloadButton<? echo $nummy ?>">Unload</button>
<script>
function ready(player_id)
{
$f('play<? echo $nummy?>').addEvent('ready', function()
{
$f('play<? echo $nummy?>').addEvent('finish', onFinish);
});
function onFinish(play<? echo $nummy?>)
{
$f('play<? echo $nexty ?>').api('play');
}
document.getElementById('playButton<? echo $nummy ?>').addEventListener('click', function() {
$f('play<? echo $nummy?>').api('play');
});
document.getElementById('pauseButton<? echo $nummy ?>').addEventListener('click', function() {
$f('play<? echo $nummy?>').api('pause');
});
document.getElementById('unloadButton<? echo $nummy ?>').addEventListener('click', function() {
$f('play<? echo $nummy?>').api('unload');
});
}
window.addEventListener('load', function() {
//Attach the ready event to the iframe
$f(document.getElementById('play<? echo $nummy?>')).addEvent('ready', ready);
});
</script>
<hr />
<?
//end of loop
}
?>
</body>
</html>
You are overwriting your ready function in every iteration of your loop. So only the last ready function will be executed.
An example solution would be to replace ready with ready<?php echo $nummy ?> (I suppose that $nummy is unique):
function ready<?php echo $nummy ?>(player_id) {
// your function body
}
window.addEventListener('load', function() {
//Attach the ready event to the iframe
$f(document.getElementById('play<? echo $nummy?>')).addEvent('ready', ready<?php echo $nummy ?>);
});
P.s.: It is not an ideal solution. But a possible solution.
i need to show a dialog box if login failed. now i'm able to show the error line inside the form, but i need to show the error message using modals.
here's my code:
$sfAuth = new SfAuthenticate();
$sfHelper = new SfHelper();
$user = $_POST['txtUsername'];
$pass = $_POST['txtPassword'];
$checkUser = $sfAuth->checkUserJobSeeker($user);
if($checkUser)
{
$login = $sfAuth->loginJobSeeker($user, $pass);
if($login)
{
echo $sfHelper->redirect('forms/jobSeeker/HomeJobSeeker.php');
}else{
echo $sfHelper->redirect('forms/jobSeeker/formLoginJobSeeker.php?err=Invalid Username or Password');
}
}else{
echo $sfHelper->redirect('forms/jobSeeker/formLoginJobSeeker.php?err=Sorry, We Cannot found your Username');
}
i want to show the dialog box after redirecting to the login form.
can anyone help me please?
Have a look at this fiddle, it should work: http://jsfiddle.net/7PwWp/5/
As to launching the modal window on user error, you can add a condition:
<?php if(isset($_GET['err']): ?>
launchWindow('#message');
<?php endif; ?>
In the message box, you can put:
<p><?php echo (isset($_GET['err'])? $_GET['err']:''; ?></p>
To show a modal dialog box you'll need javascript. Check this previous SO question: How to create popup window(modal dialog box) in HTML). I would, similarly, recommend checking out jQueryUI which is an extension of the javascript library jQuery.
In 3 steps, here's how this works:
Include jQuery and jQueryUI library scripts in the page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"/></script>
Create the markup for the modal dialog to be displayed
Doesn't need to be fancy but note the id tag as jQuery uses that to know which element to display in dialog.
<div id="dialog" title="Basic dialog">
<p>This is the message inside the modal dialog.</p>
</div>
Show the dialog using jQueryUI
<script>
$(document).ready(function() {
$( "#dialog" ).dialog();
});
</script>
See a full working example here: http://jsfiddle.net/wjp94/3/
put this code on formLoginJobSeeker.php file
<?php
if($_GET['err'] == "Sorry, We Cannot found your Username")\
{
echo '<script> alert("Sorry Wrong Username Or Password");</script>'
}
?>
If you want to show dialog then you have to use jquery dialog
Add following code to your page;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"/></script>
<div id="dialog" title="Basic dialog" style="display:none">
<p>
<?php if(isset($_GET['err'])) echo $_GET['err'];?>
</p>
</div>
<?php if(isset($_GET['err']){ ?>
<script type="text/javascript">
$(document).ready(function() {
$( "#dialog" ).dialog();
});
</script>
<?php } ?>
if you want to see how your modal looks like check on this link
http://codebins.com/bin/4ldqp8p
Solved?
If not, here is my solution.
Redirect to sth like that (notice #run_modal):
`forms/jobSeeker/formLoginJobSeeker.php?err=YOUR_MESSAGE#run_modal`
and JS:
function detectModalParam()
{
var hash = $(location).attr('hash');
if (hash == '#run_modal')
{
YOUT_MODAL_FUNCTION();
};
}
$(document).ready(function()
{
detectModalParam();
}
sorry if the title is a little.. vague i couldnt pin it down.
So i am developing a friend request system which works i guess similar in concept to facebook. So you get a request and it lists them without a page reload.
However i get the div 'refreshing' or so i think i cant test the php which is where i have a problem, i will post the relevent code and files below.
It may look a little long winded but it shouldnt be too bad in reality. My php code should keep executing the query which is looking at the database in the updateFriendBox.php however it doesnt seem to be doing this. My code may be messy as well so I apologise.
myaccount.php
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
function refreshDiv()
{
$.get('updateFriendBox.php', function(data){$('#refresh').html(data);});
}
$(function()
{
refreshDiv();
setInterval(refreshDiv, 5000);
});
function box(x){
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
}
</script>
<?php
$addBox = '<div style="display:inline; padding:5px;">
Show/Hide Friend Requests
</div>';
// a bit further down in the code where its all called:
<? echo $addBox; ?></span>
<div class="friendSlide" id="fRequ" style="height:240px; overflow:auto;">Your friend requests: <br />
<div id="refresh"> <?php // this is where the refresh call is ?>
</div>
</center>
</div>
</div>
</div>
updateFriendBox.php:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
function acceptFriendRequest(x) {
var url = "friendParse.php";
$.post(url,{ request: "acceptFriend", reqID: x}, function(data){
$("#req"+x).html(data).show().fadeOut(5000);
});
}
function denyFriendRequest(x) {
var url = "friendParse.php";
$.post(url,{ request: "denyFriend", reqID: x}, function(data){
$("#req"+x).html(data).show().fadeOut(5000);
});
}
</script>
</head>
<body>
<?php
include 'dbc.php';
$sql = "SELECT * FROM friendRecu WHERE mem2='" . $_SESSION['user_id'] . "' ORDER BY id ASC LIMIT 10";
$query = mysql_query($sql)or die(mysql_error());
$num_rows = mysql_num_rows($query);
if($num_rows < 1) {
echo "No friend requests";
} else {
while($row = mysql_fetch_array($query)){
$requestID = $row['id'];
$req = $row['mem1'];
$sqlName = mysql_query("SELECT full_name FROM users WHERE id='$req'");
while($row = mysql_fetch_array($sqlName)){
$requesterName = $row['full_name'];
}
echo '<hr /><table width="100%", cellpadding="5"><tr><td width="17%" align="left"><div style="overflow:hidden; height:50px; color:white;"></div></td> <td width="83%">' . $requesterName . ' added you as a friend
<span id="req' . $requestID . '">
Accept
||
Deny
</span></td></tr>
</table>';
}
}
?>
I think you are having a problem because your updateFriendBox.php is returning too much. Remove all that inline JS code, place it in an include file, and include it from myaccount.php. You also shouldn't have <head> and <body> sections in your updateFriendBox.php file.
The ajax call here doesn't create a whole new page, you're getting additional HTML to add to the original page.
So the only thing you should have there is your SQL query, the loop, and your HTML output for each data row.
I'm trying to get the value which is the id in the mysql database. However, each time I click on the image, I get null. I used this to get the value but it is not working as it keeps giving me null in the alert box.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php
mysql_connect('localhost','root','');
mysql_select_db("ajax");
$query="SELECT * FROM xxxx";
$result= mysql_query($query);
while($row= mysql_fetch_array($result)){
echo "<img src='".$row['filepath']."' value='".$row['ID']."' id='".$row['ID']."' onclick='getrating(this.value);'>";
echo "<br>";
}
?>
<script type="text/javascript" >
function getrating(row_id){
var x = document.getElementById(row_id);
alert(x);
}
</script>
</body>
</html>
What is the problem?
You need getrating(this.id) instead. Images don't have a value property.
Try this:
echo "<img src='".$row['filepath']."' id='".$row['ID']."' onclick='getrating(".$row['ID'].");'>";
Or you can pass this.id
<img id="row_12" onclick="getrating(this.id)" alt="image"/>
function getrating(id){
alert(id);
}
Or you can use the event object and the currentTarget propety
<img id="row_12" onclick="getrating(event)" alt="image"/>
function getrating(e){
alert(e.currentTarget.id);
}
value isn't a valid attribute of the img tag. You could use the id, or just do
echo "<img ... onclick='getrating($row[ID]);'>";
An <img> doesn't have a value property.
You are doing unnecessary work in your function too. Your code should look like this:-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php
mysql_connect('localhost','root','');
mysql_select_db("ajax");
$query="SELECT * FROM xxxx";
$result= mysql_query($query);
while($row= mysql_fetch_array($result)){
echo "<img src='".$row['filepath']."' value='".$row['ID']."' id='".$row['ID']."' onclick='getrating(this);'>";
echo "<br>";
}
?>
<script type="text/javascript" >
function getrating(element){
alert(element);
}
</script>
</body>
</html>
By passing this to your function through the onclick event, you already have the element you are looking for without needing to use document.getElementById().
They way how you escape the ID could be the problem. I know this is already answered but just in case for those people who needs another solution.
onclick="getrating(\''.$row['ID'].'\')"