I have web application in PHP and i need some variables in this page to get refreshed automatically. Therefore i have put that processing in another page - "test.php" - which gets loaded into this div every 10 seconds.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval( function ()
{
$('#refresh').load('test.php').fadeIn("slow");
}, 10000);
</script>
</head>
<body>
<div id="refresh">
</div>
</body></html>
The problem is that this page has a form which on clicking, doesn't not submit the values and do the processing as it is supposed to do. Without the auto refresh code, it works fine. How do i overcome this problem?
the test.php contains this form:
<form action="count.php" method="post">
<?php
$votes = getVoteCount($popular[$i][1]);
$voted=checkVoted($screenName,$id);?>
<td><img src="<?php echo $popular[$i][4]; ?>" width=60></td>
<td align="center"><CITE><?php echo "#".$username; ?></CITE>
<?php echo "<br >".$text.
"<br >".$votes." votes |";?>
<?php
if($screenName!=$username && $voted==false){
?>
<input type="hidden" name="addID" value="<?php echo $id;?>">
<input type="hidden" name="username" value="<?php echo $screenName;?>">
<INPUT TYPE="image" src="images/vote.png" name='vote' ALT="Submit Form" onMouseOver="this.src='images/vote_link.png'"
onMouseOut="this.src='images/vote.png'" width="35" height="20" title="Click to Vote!"></form>
<?php }else if($voted){ ?>
<img src="images/voted.png" width="35" height="20" title="You have already voted">
<?php } else{
echo "<img src='images/authored.png' width='40' height='20'>";
}?>
Because you're reloading the page with ajax requests you no longer can use
$("submit-button").click()
or
$("submit-button").submit();
You will need to use either jquery's live, delegate, or on to do this. (Live is no longer a recommended way of doing this.
$("body").on("click", "submit-button", function()
{
//execute code here
});
or
$("body").on("submit", "submit-form", function()
{
//execute code here
});
Related
I am trying to assign a session variable whenever an event is triggered (using Javascript here). But I'm failing to make it happen so that it's loaded just after the body of my page loaded, not the after event generated like pressing a button.
I have two pages: one is to check wether the session var is set. If yes, then perform the action and destroy it.
Another one is a huge page in which it is included as a sub page (using include), and it is a form, which is submitted to itself, making it reload. Now that subpage will have set a session whenever an event is generated (like pressing a submit button, and clicking a button).
first.php --> session checking and destroying
second.php --> session initialisation and assigning
And both are iterative.
I can use a back-end to store the data but that huge page has some restrictions not to include other dbs inside it.
first.php
<?php
session_start();
print_r($_SESSION);
var_dump($_SESSION);
if(isset($_SESSION['submit']) && isset($_SESSION['click']) ) {
echo "passed both tests";
unset($_SESSION['submit']);
unset($_SESSION['click']);
session_destroy():
}
var_dump($_SESSION);
print_r($_SESSION);
var_dump($_SESSION);
?>
second.php(form)
<?php
session_start();
?>
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<script type="text/javascript">
function submit_valid(){
<?php
$_SESSION['submit']='yes';
?>
}
</script>
<script type="text/javascript">
function click_valid1(){
document.getElementById('submitButton').disabled=true;
<?php
$_SESSION['click']='clicked';
?>
window.location.replace("first.php");
}
</script>
<script type="text/javascript">
function load_valid3(){
<?php
$_SESSION['submit']='no';
$_SESSION['clicked']='not';
?>
}
</script>
<script type="text/javascript">
setTimeout (function(){
document.getElementById('submitButton').disabled = null;
},10000);
var countdownNum = 10;
incTimer();
function incTimer(){
setTimeout (function(){
if(countdownNum != 0){
countdownNum--;
document.getElementById('timeLeft').innerHTML = 'Time left: ' + countdownNum + ' seconds';
incTimer();
} else {
document.getElementById('timeLeft').innerHTML = 'Ready!';
}
},1000);
}
</script>
<title></title>
</head>
<body onload="return load_valid3()">
<form action="search.php" method="get" onsubmit="return submit_valid()">
<table border="2" width="150" cellpadding="0" cellspacing="2">
<tr>
<td align="center">
<input type="text" id="query" name="query" size="30" value="">
</td>
<td align="center">
<input type="submit" value="Search"> <input type="hidden" name="search" value="1">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="SUBMIT" disabled="disabled" id="submitButton" onclick="return click_valid1()">
</td>
<td align="center">
<p id="timeLeft">
Time Left: 10 seconds
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
Is there any concept of static variables in PHP? So that I can get rid of this situation.
Despite not really knowing where you are going with this:
Using jQuery I exemplary implemented your first JS-function "valid()":
function valid() {
$.ajax({
type: "POST",
url: "first.php",
data: {
"color": "red"
}
});
}
This is how you update the session variable.
$_SESSION['color'] = $_REQUEST['color']
I still do not really see what the point of the "valid" functions are but maybe this shows you where you could go.
Try to seperate javascript function calls from the form submit action. You may use "isset function" with "if condition statements" to check whether the form is submitted or not. Something like:
if(isset($_GET['submit']))
{
}
I am trying to update the database using jquery and ajax. A pop up window is opened for updating the fields. My problem is : the database is udapted fine but the values are not reflected on the web page without refreshing the page. I am using jquery .html() method to update the contents.
Please help me with the problem.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src="js/jquery-1.5.1.min.js"></script>
<script type='text/javascript' src="js/jquery-ui-1.8.13.custom.min.js"></script>
<link rel='stylesheet' href="js/jquery-ui-1.8.13.custom.css" />
<script type='text/javascript'>
$(document).ready(function() {
$update_dialog = $("#update_dialog").dialog({
autoOpen:false,
title:"Update Sub Sub Section",
width: '600px',
modal:true,
buttons:[
{text: "Submit", click: function() { $('form',$(this)).submit(); }},
{text: "Cancel", click: function() { $(this).dialog("close"); }},
]
});
$("#update_dialog form").submit(function() {
var form = $(this);
alert($(this).serialize());
$.post($(this).attr('action'), $(this).serialize(),function(data) {
var getbook = $('#book_'+data.id);
$('.description',getbook).empty().html(data.description);
$("#update_dialog").dialog('close');
},'json');
return false;
});
function edit3_link_action() {
var getbook = $(this).closest('.book');
//get id from div
var id = getbook.attr('id').split('_');
id = id[id.length-1];
$('#update_dialog input[name="id"]').val(id);
$('#update_dialog textarea[name="description"]').val($('.description',getbook).html());
$update_dialog.dialog('open');
return false;
}
$(".edit3").click(edit3_link_action);
});
</script>
</head>
<body>
<div align="center">
<form name="userform" method="post">
<?php
$proposalid='P09-001';
$res=mysql_query("Select * from tblproposaldocsections where ProposalID='$proposalid' order by SortOrder;");
for($i=0;$i<mysql_num_rows($res);$i++)
{
$row=mysql_fetch_row($res);
if($row[1]!=$row[2])
{
$result=mysql_query("Select * from tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row[1]' order by SortOrder;");
for($k=0;$k<mysql_num_rows($result);$k++)
{
$row1=mysql_fetch_row($result);
$exp=explode('.',$row1[2]);
$alter=$row[2].'.'.$exp[1].'.'.$exp[2];
$result1=mysql_query("Select * from tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row1[2]' order by OrderID;");
$lastsortorder= mysql_query("SELECT Max(SortOrder) FROM tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row1[1]';")or die(mysql_error());
$rr = mysql_fetch_row($lastsortorder);
$lastsortorder = $rr[0];
if(mysql_num_rows($result1)>0)
{
?>
<br>
<?php
for($j=0;$j<mysql_num_rows($result1);$j++)
{
$row2=mysql_fetch_row($result1);
$exp=explode('.',$row2[2]);
$alter=$row[2].'.'.$exp[1].'.'.$exp[2].'.'.$exp[3];
$lastsortorder= mysql_query("SELECT Max(SortOrder) FROM tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row2[1]';")or die(mysql_error());
$rr = mysql_fetch_row($lastsortorder);
$lastsortorder = $rr[0];
?>
<div class='book' id='book_<?php echo $row2[2];?>'>
<h3 class="title"><?php echo $alter;?> subsubsection_<?php echo $row2[2];?></h3>
<p class='description'><?php echo $row2[3];?></p>
<a class="edit3" href="#">Edit</a>
</div>
<br>
<?php
}
?>
<br>
<?php
}
}
}
echo('<br>');
}
?>
</table>
</form>
</div>
<div id='update_dialog'>
<form action='edit.php' method='post'>
<table>
<tr>
<td align="left">Description:</td>
<td>
<textarea name='description' cols='60' rows='5'></textarea>
</td>
</tr>
</table>
<input type='hidden' name='id' />
<input type='hidden' name='proposalid' value="<?php echo $proposalid;?>" />
</form>
</div>
</body>
</html>
EDIT by blasteralfred
I used FireBug for debugging and the problem was the same as expected. DOM object is unable to read updated data. Is this declaration for getting the DOM element correct? This is the only problem !
var getbook = $('#book_'+data.id);
This is how the tag is declared:
<div class='book' id='book_<?php echo $row2[2];?>'>
<table width="80%" align="left">
<tr>
<td width="10%"><?php echo $alter;?></td>
<td width="70%" class="description"><?php echo $row2[3];?></td>
<td width="10%" align="center"><a class="edit" href="#">Edit</a></td>
</tr>
</table>
</div>
If your .html() isn't working, its either because the element you're using it on isn't there or the value you're trying to set isn't defined.
You can figure out what's up by checking if the given element and the value are defined prior to the .html() call. I'd recommend FireBug for debugging, but this can also be done simply by alert()ing the element and the value..
I am trying to get the value of the hidden field to the next page using PHP's $_POST and submit the function via jQuery, but it does not work.
Part of CSS OOP
<ul>
<li class="selectable" id="cakeType-<?= $cake->id ?>">
<a href="?cakeType=<?php echo ($cake->id); ?>" title="Selecteer">
<?php if ($cake == $order->cakeType){?><span class="checked"></span><?php } ?>
<img src="data/<? echo $cake->id ?>.jpg" alt="" width="50" height="50" /></a>
</li><?php } ?></ul>
My form
<form id="formhide" method="post">
<input name="img" type="text" value="" id="hiddenimg" action="stap2.php"/>
</form>
jQuery
$(function(){
$('a img').click(function(e) {
var photo=$(this).attr('src');
$("#div1 img:last-child").remove()
$('#div1'). append('<img src="' + photo + '" />') ;
$('#hiddenimg').val(photo);
console.log( $('#hiddenimg').val() );
e.preventDefault();
});
$('a.nextStep').click(function() {
if (debug) { alert('submit!') };
$('#formhide').submit();
});
Next page as the form gets submited
$img=$_POST['img'];
echo $img; // the value of my hidden field does not show up i get error msg
$_SESSION['img']=$img;
What's wrong with the above code?
http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict()
I currently have a table of about 30 rows and I would like to make <td> clickable in each case:
<tr height="100px" align="center">
<?php do { ?>
<td style="background-color: <?php echo $row_dd1['colour']; ?>;">
<form action="pay.php?id=<?php echo $row_dd1['dNo']; ?>&user=<?php echo $username; ?>" method="post">
<input type="hidden" id="<?php echo $row_dd1['dNo']; ?>"><input type="hidden" value="<?php echo $username; ?>">
<button type="submit" class="link" id="t<?php echo $row_dd1['dNo']; ?>"><span><?php echo $row_dd1['dNo']; ?></span></button></form>
</td>
<?php } while ($row_dd1 = mysql_fetch_assoc($dd1)); ?>
</tr>
How do you make the table cell clickable? I would like it to have the same link as the form action that I have used which is:
<form action="pay.php?id=<?php echo $row_dd1['dNo']; ?>&user=<?php echo $username; ?>" method="post">
This is a perfect example of where to use .delegate(), like this:
$("#myTableID").delegate("td", "click", function() {
$(this).find("form").submit();
});
.delegate() attaches one handler to the <table>, rather than n handlers, one per cell. If you just want to navigate to the URL, it would look like:
$("#myTableID").delegate("td", "click", function() {
window.location.href = $(this).find("form").attr("action");
});
To actually submit the form:
$('td > form').each(function(i,e){
var form = $(this);
var cell = form.parent();
if(cell.is('td')){
cell.click(function(){
form.submit();
});
}
});
If you jsut want to follow the link instead, jsut modify the form.submit() part to change window.location.href with form.attr('action').
What about jQuery's click-event?
$('td').click(function () {
$('form', this).submit();
return false;
});
This submits the form inside the clicked <td>.
I am having a small problem and i don`t know the reason. I set that
1- If you click Print button then print.php page will be printed automatically.
2- if you submit a form then print.php page will be printed automatically.
Problem is on second option. Page gets printed automatically perfect but if i click Print button again it does not print the page again.
I am using firefox.
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function loadiFrame(src)
{
$("#iframeplaceholder").html("<iframe id='myiframe' name='myname' src='" + src + "' frameborder='0' vspace='0' hspace='0' marginwidth='0' marginheight='0' width='1' scrolling='no' height='1' />");
}
$(function()
{
$("#printbutton").bind("click",
function() {
loadiFrame('print.php');
$("#myiframe").load(
function() {
window.frames['myname'].focus();
window.frames['myname'].print();
}
);
}
);
});
</script>
<?
if (isset($_POST['formSubmit']))
{
echo "form submitted";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#printbutton').trigger('click');
});
</script>
<? } ?>
</head>
<body>
<table border="1">
<tr>
<td><input type="button" id="printbutton" value=" Print " /><div id="iframeplaceholder"></div></td>
</tr>
</table>
<form action="auto.php" method="post">
<input name="formSubmit" type="submit" value="Submit" />
</form>
</body>
you should call loadiFrame function only if the iframe doesn't exist.
$(function()
{
$("#printbutton").click(
function() {
if($('#myiframe').length==0){
loadiFrame('print.php'); }
$("#myiframe").ready(
function() {
window.frames['myname'].focus();
window.frames['myname'].print();
});
});
});
Try it now.
Good luck :)
it's a bug in Firefox. It works if you add a counter that makes each iframe name unique.