ReCaptcha doesn't show up on Facebox - php

<?php
session_start();
require_once('recaptcha/recaptchalib.php');
$publickey = "API_KEY"; // you got this from the signup page
?>
<script type="text/javascript" src="javascripts/jquery.form.js"></
script>
<script type="text/javascript">
$(document).ready(function() {
$('#inquiry').ajaxForm({
target: '#error',
success: function() {
$('#error').fadeIn('slow');
}
});
});
var RecaptchaOptions = {
theme : 'clean'
};
</script>
<div class="top_area">Inquiry Form</div>
<div id="search_area">
</div>
<div style="overflow-y: hidden;">
<form name="inquiry" id="inquiry" action="asadadasd.php"
method="post">
<div id="error"></div>
<table align="center">
<tr>
<td valign="top" align="right"></td>
<td>
<?php
echo recaptcha_get_html($publickey);
?>
</td>
</tr>
<tr>
<td valign="top"></td>
<td>
<input type="submit" id="submit" name="submit" value="Submit"
style="height: 30px; background: #ab2220; border: 2px #fff solid;
color: #fff;" />
</td>
</tr>
</table>
</form>
</table>
</form>
</div>
That's the code I have as of now but recaptcha plugin doesn't show up
am I missing something?
Thanks guys,
You are so awesome

You have to use the recaptcha AJAX API on facebox. Include the AJAX script in your page (Not the page facebox will display. Put it in the containing page) Then use the recaptcha api as specified in the docs.
http://code.google.com/apis/recaptcha/docs/display.html#AJAX

Related

how to add jquery confirmation popup in codeigniter

im developing a project my own and i use codeigniter as my framework, i'm pretty begginer to php and codeignier. i created a confirm box in jquery ,but it's and html alert. so how to do that? don't laugh at me guys. thanks.
view
<?php
$_instance = get_instance();
$attributes = array('id' => 'main_form');
?>
<?php echo form_open('registration/reset',$attributes);?>
<style>
span{
color: red;
}
#main_tb{
margin-top:100px;
}
</style>
<table cellspacing='10' id>
</table>
<div id='main_form'>
<form id="main_form" name="form">
<table CELLSPACING=2 CELLSPACING=10 id='main_tb' >
<tr>
<td></td>
<td id="error"></td>
</tr>
<tr>
<td>User Name</td>
<td> <select class="cmb" style="width: 200px;" id="cmb_user" name="cmb_user"> </select></td>
</tr>
<tr>
<td></td>
<td><?php echo $this->session->flashdata('reset_error'); ?></td>
</tr>
<tr>
<td></td>
<td> <input type="submit" id="save" value="reset password"/></td>
</tr>
</table>
</form>
</div>
<?php echo form_close();?>
script
$j('#main_form').submit(function() {
// event.preventDefault();
var status = confirm("Are you sure? This cannot be undone");
if(status == false){
return false;
}
else{
return true;
}
});
controller
function reset(){
$password =$_POST['cmb_user'];
echo $username = $this->input->post('cmb_user');
$data_array = array(
'id_user' => $this->input->post('cmb_user'),
);
// // echo 'sdsd';
// echo $_POST['cmb_user'];
//
$this->load->model('registration/registration_model');
$this->registration_model->reset_pass($data_array);
$this->session->set_flashdata('reset_error', ' <br><span style="font-size: 10px;background-color: #FFFFFF;color:#ff0000;border:solid 1px #ff99cc;padding:2px;border-radius: 5px 5px 5px 5px">Reset Successfull</span>');
redirect('/registration/admin_reset');
}
this function works great. but i want to add jquery fancy popup like sweet alert. thank's again..
Add the following code into your view
<script src="https://cdn.rawgit.com/t4t5/sweetalert/master/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/t4t5/sweetalert/master/dist/sweetalert.css">
<script language="javascript">
sweetAlert("Oops...", "Something went wrong!", "error");
</script>

Refresh page give difference style result after adding form element

I found a strange behaviour in my css style. I created a login page that can be accessed from a link wihtin home page. If I access login page from a link within home page or login page itself, everything looks fine. But, whenever I refresh login page, the header looks weird. And all of this happen only if <form> element is exists, without <form> element, there's no problem.
So, what causes this to happen? And how do I fix this?
Note: Everything after this is only attachment for my question details.
The login file page written like this:
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/config/core.php'); ?>
<html>
<?php include_once($root.'/includes/head.php');?>
<body>
<div id="wrapper">
<?php include_once($root.'/includes/header.php');?>
<?php include_once($root.'/includes/navigation.php');?>
<section>
<article>
<h2>Login</h2>
<form action="<?php echo $current_file;?>" method="post">
<table align="center" border="0" cellpadding="0" cellspacing="15">
<tr>
<td width="100">Username</td>
<td>:</td>
<td><input type="text" name="username" maxlength="50" size="35"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="password" maxlength="50" size="35"></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value=" Login "><input type="submit" value=" Reset "></td>
</tr>
</table>
</form>
</article>
</section>
<?php include_once($root.'/includes/news.php');?>
<?php include_once($root.'/includes/footer.php');?>
</div>
</body>
</html>
The header.php file that I included written like this:
<header>
<div id="logo">
<img src="/images/arh.png" />
<h1>The Header</h1>
</div>
</header>
And, the css file for header element is written like this:
header {
background-color: #000; height: 120px;
}
#logo {
float: left;
}
#logo img {
height: 100px; padding: 10px;
}
#logo h1 {
color: #ccc; float: right; font-size: 36px; padding: 30px;
}
The result if i access login.php page from link:
And, if i refresh the page:
i had pretty much that same problem. Matewka is right.
there was a small error in my html on my header. i had my div in the middle of my table.
What i had
<div>
<table>
<tr>
<td>
</td>
</tr>
</div>
</table>
what i changed it to
<div>
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
I just moved my div to the end of my table. I don't know how i did this, but being up for a few days or staring at the same thing over and over you start missing things. I would double check the html, it might be that simple. (are you using height % ?) do you have borders?

Jquery not adding dynamic php

I have a basic form that submits the form data to the same page and do a simple search in a MySQL db. The php for this in before the <html> tag
<body>
<div data-role="page">
<div role="main" class="ui-content">
enter code here
<table style="width:750px;">
<form enctype="multipart/form-data" action="player_documents_m.php" method="get" data-ajax="false">
<tr style="height:35px;">
<td style="width:250px; vertical-align:top; text-align:left;">
<label for="name">Player Name: </label>
</td>
<td style="text-align:left; vertical-align:middle; text-align:center;">
<input type="text" name="name" id="name" class="inputs" size="45" value="<?php echo $my_name; ?>" maxlength="255"/>
</td>
</tr>
<tr style="height:35px;">
<td style="text-align:left; vertical-align:bottom; text-align:right;" colspan="2">
<input type="submit" name="search" id="search" value="Search Player" />
</td>
</tr>
</form>
</table>
The above works in JqueryMobile
Then the results are added dynamically with html content but this does not work in JqueryMobile but taking out all JQueryMobile related stuff and leave a normal php page everything works.
Below the table tag above I add my php to add the founded search results.
<?php
for($j = 0; $j < $i; $j++)
{
$photo = "images/" . $db_new . "/players/" . $player[$j]["player_id"] . ".jpeg";
echo "<br />";
?>
<!-- Search Results -->
<div class="singleResult" onclick="javascript: window.location.replace('load_documents.php?identification=<?php echo $player[$j]["player_id"]; ?>');">
<table border="1" style="width:100%; border: solid thin; padding:0; border-spacing:0;">
<tr>
<!-- Image 1st Column -->
<td rowspan="2" colspan="1" style="width:10%; vertical-align:top; text-align:left;">
<img src="<?php echo $photo; ?>" style="width:150px; height:180px;" />
</td>
<td class="labels">Name:
<p class="results"><?php echo $player[$j]["player_name"]; ?></p>
</td>
</tr>
</table>
</div>
<!-- End Of Search Results -->
<?php
}
?>
</div>
</div>
</body>
Now the above only works normally and not in JqueryMobile. can some please explain to me what I am doing wrong / need to add, or anything helpful please.
Thanks

php form cannot submit which access by ajax

I try to submit form using isset($_POST(['submit'])) in php file which access through ajax but it doesn't work. Please find the code snippets below:
<html>
<script>
$(document).ready(function() {
$.ajax({
url: './B.php',
type: 'POST',
success: function(data)
{ $("#showB").html(data);}
});
});
</script>
<body>
<table style="width: 100%">
<tr>
<td colspan="2"><div id="showB"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
B.php:
<html>
<?php
if(isset($_POST['submit']) && !empty($_POST['submit'])) {
$message= "halo";
}
?>
<head>
<title>Untitled 1</title>
</head>
<body>
<table>
<tr>
<td style="height: 30px"></td>
<td style="height: 30px"><?php if(!empty($message)) { echo $message; } ?></td>
<td style="height: 30px"></td>
<td style="height: 30px; width: 298px;"></td>
</tr>
<form method="post" action="halo.php">
<tr>
<td> </td>
<td>
<input name="submit" type="submit" value="Save Changes"/></td>
<td> </td>
<td style="width: 298px">
</td>
</tr>
<tr>
<td style="width: 244px; height: 26px;"><h5>Effective Width : </h5></td>
<td style="width: 262px; height: 26px;"><input name="effectivewidth" type="text"/></td>
<td style="width: 261px; height: 26px;"></td>
<td style="width: 298px; height: 26px;"></td>
</tr>
</form>
</table>
</body>
</html>
The form in B.php cannot be submit with no error. Please help. thanks
Its because you are not passing any data over post.
<script>
$(document).ready(function() {
$.ajax({
url: './B.php',
type: 'POST',
data: { submit: "submit"},
success: function(data)
{ $("#showB").html(data);}
});
});
</script>
Pass the appropriate data to $.ajax
https://api.jquery.com/jQuery.ajax/

Setting a form value from QueryUI draggable

I'm trying to set a form value when mulitple draggable objects are dropped onto a form. Once all the draggables have been dropped, I want to press the submit for a PHP code to do some processing with the form values.
I just can't get the drop event to set the form value????
Here's the JqueryUI stuff..
$(function() {
$( ".player" ).draggable({ revert: "invalid" });
$( ".position" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept:".player",
drop: function( event, ui ) {
var playerid = ui.draggable.attr("id");
var target = $(this).attr("id");
alert(playerid); //this works - got the right draggable id
alert(target); //this works - got the right droppable id
//!!!! THIS DOESN'T SET IT!!!!!
$('#resultform').attr('#target','playerid');
}
});
});
Here is the HTML
<div id="result_space">
<div id="player_list" class="player_list">
<p>This is the player space </p>
<div id="pos_1" class="player">
<p>Player 1</p>
</div>
<div id="pos_2" class="player">
<p>Player 2 </p>
</div>
</div>
<div id="pitch">
<form id="resultform" name="resultform" action="results_submit.php" method="post">
<table background="../_images/5_results/pitch_v2.jpg" width="560" border="1px">
<tr height="30"> <td colspan="4" align="center" style="color: #FFFF00; font-size: 24px;">stowupland falcons fc</td></tr>
<tr height="80" valign="bottom"><td colspan="4" align="center"><div class="position" id="goalie"> <input type="text" name="goalie" id="goalie" value="Player 1" /></div></td></tr>
<tr height="110" align="center" valign="middle">
<td width="25%"><div id="defence1"><input class="position" type="text" name="r_def_1" id="r_def_1" value="player 2" /></div></td>
<td width="25%"><div class="position" id="defence2"><input type="hidden" name="r_def_2" id="r_def_2" value="player 3" /></div></td>
</table>
<input name="submit" type="submit" id="submit" value="Submit" />
</form>
</div>
</div>
So as an example, I want to drag Player 1 (pos_1) to Defence 1 and make the form value r_def_1 = pos_1.
I made a few tweaks to get this to work:
I updated the HTML to make the tds droppable. This seems to work a little bit better. I also changed the colspan attribute of the tds appropriately.
Updated HTML:
<div id="result_space">
<div id="player_list" class="player_list">
<p>This is the player space </p>
<div id="pos_1" class="player">
<p>Player 1</p>
</div>
<div id="pos_2" class="player">
<p>Player 2 </p>
</div>
</div>
<div id="pitch">
<form id="resultform" name="resultform" action="results_submit.php" method="post">
<table background="../_images/5_results/pitch_v2.jpg" width="560" border="1px">
<tbody>
<tr height="30">
<td colspan="2" align="center" style="color: #FFFF00; font-size: 24px;" class="">stowupland falcons fc</td>
</tr>
<tr height="80" valign="bottom">
<td colspan="2" align="center" class="position">
<div class="" id="goalie">
<input type="hidden" name="goalie" id="goalie" value="Player 1" />
</div>
</td>
</tr>
<tr height="110" align="center" valign="middle">
<td class="position">
<div id="defence1">
<input class="" type="hidden" name="r_def_1" id="r_def_1" value="player 2" />
</div>
</td>
<td class="position">
<div class="" id="defence2">
<input type="hidden" name="r_def_2" id="r_def_2" value="player 3" />
</div>
</td>
</tr>
</tbody>
</table>
<input name="submit" type="submit" id="submit" value="Submit" />
</form>
</div>
</div>
JavaScript:
$(function() {
$(".player").draggable({
revert: "invalid"
});
$(".position").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ".player",
drop: function(event, ui) {
var playerid = ui.draggable.attr("id");
$("input", this).val(playerid);
}
});
});​
The key is this line:
$("input", this).val(playerid);
which finds the input inside of the droppable td.
CSS (with draggable its useful to limit the width of draggable items):
​.player { width: 75px; }​
Example: http://jsfiddle.net/z8pWN/

Categories