I am trying to teach myself code igniter and mvc. I have a working site in php that allows the input of an isbn number and returns the title, rank etc. I use ajax to get the information from amazon and then put it into the existing form. This works great, now i am trying to convert it to code igniter. My view is buybackmws.php and looks like this:
<?php echo validation_errors();?>
<?php echo form_open('buyback', $title);?>
<table height="220">
<tr>
<td><label>ISBN</label></td>
<td><input type="text" id="isbn" name="isbn" value="<?php echo set_value('isbn'); ?>" /></td>
<td></td>
<td rowspan=7><a id="detailURL" href="#" target="_blank"><img id="bookCover" src="<?php echo base_url();?>images/imgNotFound.gif" height="200px" /></a></td>
</tr>
<tr>
<td><label for="quantity" class="label">Quantity</label></td>
<td><input type="text" id="quantity" name="quantity" value="<?php echo set_value('quantity'); ?>"/></td>
<td></td>
</tr>
<tr>
<td><label for="payPrice" class="label">Price to Pay</label></td>
<td><input type="text" id="payPrice" name="payPrice"/></td>
<td></td>
</tr>
<tr>
<td><label>Edition</label></td>
<td><input type="text" id="edition" name="edition" readonly="readonly"/></td>
<td></td>
</tr>
<tr>
<td><label>Title</label></td>
<td><input type="text" id="title" name="title"/></td>
<td></td>
</tr>
<tr>
<td><label>Sales Rank</label></td>
<td><input type="text" id="salesRank" name="salesRank" readonly="readonly" /></td>
<td></td>
</tr>
<tr>
<td></td><td><input type="button" id="buy" value="Buy" /></td><td></td>
</table>
<?php echo form_close() ?>
my js with the ajax is buybackmws.js:
$('#isbn').keydown(function () {
//retrieve price to pay (and other data)
var isbn = $('#isbn').val();
$('#quantity').val('0'); //default quantity to 0
$('#buy').attr('disabled', false).css('backgroundColor', '');
$('#quantity').css('border', '');
$('#payPrice').css('border', '');
$('#payPrice').css('backgroundColor', '');
$('#payPrice').css('color', '');
$.ajax({
type: "POST",
url: ' ../verifybuyback/title',
async:false,
dataType: "json",
data: ({isbn: isbn }),
success: function(data){
console.log(data);
$('#title').val(data.title);
$('#salesRank').val(data.salesRank);
$('#edition').val(data.edition);
$('#binding').val(data.binding);
$("#detailURL").attr("href",data.DetailURL);
} //end of success
});
verifybuyback is:
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Verifybuyback extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('amz','',TRUE);
$this->load->helper('amazon');
}
function title()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('isbn', 'ISBN','trim|required|xss_clean|callback_title_check' );
if($this->form_validation->run('title')==FALSE)
{
//Field validation failed. User redirected to login page
$this->load->view('buybackmws');
}
else
{
//GOTO RESTRICTED AREAS
redirect('buybackmws', 'refresh');
}
}
function title_check()
{
//Field validation succeeded. Validate against database
$isbn=$this->input->post('isbn');
//QUERY AMAZON FOR THE INFORMATION
$result = basic($isbn);
if($this->session->userdata('amazon'))
{
$sess_array = array();
$result=$this->session->userdata('amazon');
$sess_array=array(
'title'=>$result['Title'],
'rank'=>$result['SalesRank'],
);
}
else
{
$this->form_validation->set_message('get_title', 'Invalid ISBN number');
return false;
}
}
} //END OF BUYBACK
When I test it, and look at what is shown in the response tab, the information is there. My console.log is not doing anything so i don't think the information is being returned to the js. I am therefore having an issue getting everything into the view. How do I do this?
EDIT: I got the console.log in the ajax success to show the results in Firebug, but they are still not populating the form. Any ideas??
you are using datatype json for ajax . Remove json datatype and use
$data['view'] = $this->load->view($view, $this->data, true);
$this->output->set_output($data);
you can now access data.view in ajax
OR
with json in datatype
Use
$data['view'] = $this->load->view($view, $this->data, true);
$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($data));
Also if you redirect in controller from ajax it will not work for page . you need to redirect in ajax after success return data
Related
I want to fetch database values into text boxes without refreshing page. with page refresh it goes fine but I don't want to refresh it.
My code is shown below.
PHP
<?php
include 'Connection.php';
$sql=mysqli_query($connect,"select * from `registration`");
while ($row=mysqli_fetch_array($sql))
{
echo "<tr>
<td>".$row['Emp_Code']."</td>
<td>".$row['Full_Name']."</td>
<td>".$row['Permanent_Address']."</td>
<td>".$row['Mobile_No']."</td>
<tr>";
if (isset($_POST['Fetchdetails']))
{
$userid = $_POST['userid'];
$fetchquery = mysqli_query($connect,"select * from `registration` where `Emp_Code` = '$userid'");
if (mysqli_num_rows($sql)>0)
{
while ($row=mysqli_fetch_array($fetchquery))
{
$employeecode=$row['Emp_Code'];
$fullname=$row['Full_Name'];
$permanentaddress=$row['Permanent_Address'];
$mobileno=$row['Mobile_No'];
}
}
}
}
?>
My HTML Code is
<html>
<body>
<div align="center" id="div">
<table width="400" border="1">
<tr align="right" style="background-color:#FFF;">
<td width="100">Permanent Address : </td>
<td width="100">
<input type="text" name="permanentaddress" id="permanentaddress" placeholder="Permanent Address" size="15" value="<?php echo $permanentaddress;?>"/> </td>
</tr>
<tr align="right" style="background-color:#FFF;">
<td width="100">Employee Code : </td>
<td width="100"> <input type="text" name="employeecode" id="employeecode" placeholder="Employee Code" size="15" value="<?php echo $employeecode;?>"/> </td>
</tr>
<tr align="right" style="background-color:#FFF;">
<td width="100">Full Name : </td>
<td width="100"> <input type="text" name="fullname" id="fullname" placeholder="Full Name" size="15" value="<?php echo $fullname;?>"/> </td>
</tr>
<tr align="right" style="background-color:#FFF;">
<td width="100">Mobile No. : </td>
<td width="100"> <input type="text" name="mobileno" id="mobileno" placeholder="Mobile No." size="15" value="<?php echo $mobileno;?>"/> </td>
</tr>
</table>
</div>
<br>
<div align="center">
<input type="submit" name="Fetchdetails" value="Fetch Details" id="Fetchdetails" />
</div>
</body>
</html>
How can I fetch values from database into text boxes without refreshing web page?
You can use AJAX to achieve the dynamic loading of the data.An Example would be:
$.ajax({
url: "yourscript.php",
cache: false,
success: function(html){
$("#results").append(html);
}
});
where yourscript.php is your backend script, where the database calls would be executed and returned back to your success on successful request.
Please note that the data should be exchanged in a serialized format(for AJAX requests the most common approach is JSON).
You can achieve this by json.
Try the following code.
PHP Code
<?php
include 'Connection.php';
$userid = $_GET['userid'];
$fetchquery = mysqli_query($connect,"select * from `registration` where `Emp_Code` = '$userid'");
if (mysqli_num_rows($sql)>0)
{
while ($row=mysqli_fetch_array($fetchquery))
{
$return['employeecode']=$row['Emp_Code'];
$return['fullname']=$row['Full_Name'];
$return['permanentaddress']=$row['Permanent_Address'];
$return['mobileno']=$row['Mobile_No'];
}
}
echo json_encode($return);
Javascript Code
$("#Fetchdetails").click(function(e) {
e.preventDefault();
var userId = $(this).attr('data-user-id');
$.ajax({
type: "GET",
url : 'http://localhost/test/get_data.php?userid='+userId,
dataType : 'json',
success : function(response) {
$('#permanentaddress').val(response.permanentaddress);
$('#employeecode').val(response.employeecode);
$('#fullname').val(response.fullname);
$('#mobileno').val(response.mobileno);
},
error : function() {
alert('There was an error');
}
});
});
Note : you have to replace following line with your php file url.
url : 'http://localhost/test/get_data.php
I found a tutorial that auto submits the form data but all I want to do is add a submit button to pass the data to ajax.
My goal is to have a form with multiple inputs and when the user clicks the submit button it sends it through ajax and updates the page without reloading the page. Also, another key piece is the way it post all the inputs into an array so that when the update script is ran the name attributes from the input fields match the columns in the database.
I think I'm close. I've searched and haven't found my exact solution. Thanks in advance.
<script type="text/javascript" src="/js/update.js"></script>
<form method="POST" action="#" id="myform">
<!-- start id-form -->
<table border="0" cellpadding="0" cellspacing="0" id="id-form">
<tr>
<th valign="top">Business Name:</th>
<td><input type="text" name="company_name" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th valign="top">Address 1:</th>
<td><input type="text" name="address_1" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th valign="top">Address 2:</th>
<td><input type="text" name="address_2" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th> </th>
<td valign="top">
<input id="where" type="hidden" name="customer_id" value="1" />
<button id="myBtn">Save</button>
<div id="alert">
</td>
<td></td>
</tr>
</table>
<!-- end id-form -->
</form>
update.js
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', function(event) {
updateform('form1'); });
function updateform(id){
var data = $('#'+id).serialize();
// alert(data);
$.ajax({
type: 'POST',
url: "/ajax/update_company_info.php",
data: data,
success: function(data) {
$('#id').html(data);
$('#alert').text('Updated');
$('#alert').fadeOut().fadeIn();
},
error: function(data) { // if error occured
alert("Error occured, please try again");
},
}); }
update_customer_info.php
<?php
include($_SERVER['DOCUMENT_ROOT'] . '/load.php');
// FORM: Variables were posted
if (count($_POST))
{
$data=unserialize($_POST['data']);
// Prepare form variables for database
foreach($data as $column => $value)
${$column} = clean($value);
// Perform MySQL UPDATE
$result = mysql_query("UPDATE customers SET ".$column."='".$value."'
WHERE ".$w_col."='".$w_val."'")
or die ('Error: Unable to update.');
}
?>
Ended up figuring it out. Thanks for everyones help.
<p id="alert"></p>
<form id="form" method="post" action="/ajax/update_company_info.php">
<!-- start id-form -->
<table border="0" cellpadding="0" cellspacing="0" id="id-form">
<tr>
<th valign="top">Business Name:</th>
<td><input type="text" name="company_name" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th valign="top">Address 1:</th>
<td><input type="text" name="address_1" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th valign="top">Address 2:</th>
<td><input type="text" name="address_2" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th> </th>
<td valign="top">
<input id="where" type="hidden" name="customer_id" value="1" />
<input type="submit" value="Save" id="submit">
</td>
<td></td>
</tr>
</table>
<!-- end id-form -->
</form>
update.js
$(document).ready(function() {
$('form').submit(function(evt) {
evt.preventDefault();
$.each(this, function() {
// VARIABLES: Input-specific
var input = $(this);
var value = input.val();
var column = input.attr('name');
// VARIABLES: Form-specific
var form = input.parents('form');
//var method = form.attr('method');
//var action = form.attr('action');
// VARIABLES: Where to update in database
var where_val = form.find('#where').val();
var where_col = form.find('#where').attr('name');
$.ajax({
url: "/ajax/update_company_info.php",
data: {
val: value,
col: column,
w_col: where_col,
w_val: where_val
},
type: "POST",
success: function(data) {
$('#alert').html("<p>Sent Successfully!</p>");
}
}); // end post
});// end each input value
}); // end submit
}); // end ready
update_customer_info.php
<?php
include($_SERVER['DOCUMENT_ROOT'] . '/load.php');
function clean($value)
{
return mysql_real_escape_string($value);
}
// FORM: Variables were posted
if (count($_POST))
{
// Prepare form variables for database
foreach($_POST as $column => $value)
${$column} = clean($value);
// Perform MySQL UPDATE
$result = mysql_query("UPDATE customers SET ".$col."='".$val."'
WHERE ".$w_col."='".$w_val."'")
or die ('Error: Unable to update.');
}
?>
I think that you want to update form when submit.so you should
remove submit with a button given below.
<button id="myBtn">Save</button>.
You should add the given below code in ur js file.
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', function(event){
Updateform('give id of the form');
});
function updateform(id){
var data = $('#'+id).serialize();
// alert(data);
$.ajax({
type: 'POST',
url: "/ajax/update_company_info.php",
data: data,
success: function(data) {
$('#id').html(data);
// alert(data);
//alert(data);
},
error: function(data) { // if error occured
alert("Error occured, please try again");
},
});
You can retrieve input value in your php code by using unserialize()
as an array.So you can save data to
database and whatever you want to.i hope you get the answer.Hence,your code will become
<form method="POST" action="#" id="form1">
<!-- start id-form -->
<table border="0" cellpadding="0" cellspacing="0" id="id-form">
<tr>
<th valign="top">Business Name:</th>
<td><input type="text" name="company_name" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th valign="top">Address 1:</th>
<td><input type="text" name="address_1" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th valign="top">Address 2:</th>
<td><input type="text" name="address_2" class="inp-form" /></td>
<td></td>
</tr>
<tr>
<th> </th>
<td valign="top">
<input id="where" type="hidden" name="customer_id" value="1" />
<button id="myBtn">Save</button>
</td>
<td></td> </tr> </table> <!-- end id-form --> </form>
Your js code become
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', function(event)
{ Updateform('form1'); });
function updateform(id){
var data = $('#'+id).serialize();
// alert(data);
$.ajax({
type: 'POST',
url: "/ajax/update_company_info.php",
data: data,
success: function(data) {
$('#id').html(data);
// alert(data);
//alert(data);
},
error: function(data) { // if error occured
alert("Error occured, please try again");
},
}); }
update_company_info.php will become
$data=unserialize($_POST['data']);
// you can retrieve all values from data array and save all .
?>
Instead of:
$(".submit").click(function() {
Give your form a id like 'myform': <form method="POST" action="#" id="myform">
And use this for preventing default submission of form:
$("#myform").submit(function(e) {
e.preventDefault();
//your code
}
Hello following is my html form which I want to validate with Ajax. So that Browser do not load the page. If user enter First Name, It's should show the first name above the html form. But It doesn't showing...
Html form:
<form id="validation"/>
<table width="500" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>First Name</td>
<td><input type="text" name="fname" value="<?php if(isset($_POST['fname'])) echo $_POST['fname']; ?>" class="tr" placeholder="First Name"/></td>
</tr>
<tr>
<td></td>
<td><input type="reset" name="reset" value="Clear" class="submit"/> <input type="submit" name="Submit" id="submit" value="Registration" class="submit"/></td>
</tr>
</table>
</form>
<script>
$('#validation').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'regProcess.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
}
});
});
</script>
Php code:
<?php
if(isset($_POST['Submit']) && $_POST['Submit'] == "Registration"){
$fname = $_POST['fname'];
echo $fname;
}
?>
Near the bottom of your code, you have this:
success: function (data) {
}
That's your problem. You're not doing anything with the returned "data" - you need to use javascript or jquery to insert it into the DOM somewhere.
EDIT: UPDATE
To use jquery to insert the data into the dom, do something like this:
success: function (data) {
$("#id of the element where you want the data").innerHTML+=data
}
That will append the "data" retrieved from the AJAX into the element with the specific ID. You can use any CSS selector inside the $("HERE") I believe.
I have to code to do both of these functions, however, when I try to integrate them its either one or the other. (either the email is sent with the name / email & lands on server.php, or the email is sent with the data & none of the inputs are sent). I want to be able to send both the html table data as well as the users name & email inputs. The code below will simply echo the html data or the users inputs.
This code sends data to the server:
Jquery / Html
<script language="javascript" type="text/javascript" src="jQuery.js">
</script>
<script language="javascript" type="text/javascript">
$(function(){
var dataArr = [];
$("table").each(function(){
dataArr.push($(this).html());
});
$('#sendServer').click(function(){
$.ajax({
type : "POST",
url : 'server.php',
data : "content="+dataArr,
success: function(data) {
alert(data);// alert the data from the server
},
error : function() {
}
});
});
});
</script>
<table id="table" border=1>
<thead> <tr>
<th>First</th>
<th>Last</th>
<th>Date of birth</th>
<th>City</th>
</tr></thead>
<tbody>
<tr>
<td>TEXT1</td>
<td>TEXT2</td>
<td>TEXT3</td>
<td>TEXT4</td>
</tr>
<tr>
<td>TEXT5</td>
<td>TEXT6</td>
<td>TEXT7</td>
<td>TEXT8</td>
</tr>
<tr>
<td>TEXT9</td>
<td>TEXT10</td>
<td>TEXT11</td>
<td>TEXT12</td>
</tr>
</tbody>
</table>
<input id="sendServer" name="sendServer" type="button" value="Send to Server" />
Server.php
<?php
echo $_REQUEST['content'];
?>
This form send data using ajax
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
<form id="ff" action="test.php" method="post">
<table>
<tr>
<td>Name:</td>
<td><input name="name" type="text"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" type="text"></input></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" type="text"></input></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></input></td>
</tr>
</table>
</form>
The jquery script
$('#ff').form({
success:function(data){
$.messager.alert('Info', data, 'info');
}
});
And the php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";
I'm sure that I'm just missing something small. When I implement these into my code, an email is sent. The email contains either the name & email, or the html table data. The difference in code is putting a button action="submit" on my code. Whenever the email sent displays the name & email, the page also redirects to the blank php page. Hopefully I'm being clear enough.
Cheers.
Just add a e.preventDefault(); to your submission javascript inside #sendServer's click handler. This will prevent the form from submitting traditionally like it's doing now.
You'll also need to add the parameter e to that function:
$('#sendServer').click(function(e){
// ajax call
e.preventDefault();
}
Or return false; in the same place as was commented below.
I just want to ask about my problem. I am a beginner in using jquery.
My problem is I want to get the json string from my jquery ajax request but I don't know how. Because I want to check if the json string values are correct.
Here's my code in jquery ajax:
$('#search-btn').on('click',function(){
var query = $("#keyword").val();
var image = "<?php echo base_url()."/resources/loading/loading43.gif"; ?>";
$('#loading').html("<img src='"+image+"' class='loeader' align='center' />");
var query_url = "<?php echo site_url('item_controller/searchItem'); ?>";
$.ajax({
type:'POST',
url: query_url,
data:{query: $("#keyword").val(), data_filter: $("#keyword").attr("data-selection")}, //how can I get the value of data_filter? and pass it to the controller?
dataType:'json',
async: false,
success:function(d){
//some codes for success. . .
},
});
$("#selection_filter").on('change',function(){
var filter = $("#selection_filter").val();
$("#keyword").attr("data-selection",filter);
});
This is the code for the events.
<table border="1" style="width: 100%; align: left" cellpadding="10" cellspacing="10" align="left">
<tr>
<td colspan="3">
<h5>SEARCH ITEM</h5>
</td>
</tr>
<tr>
<td style="width: 15%">
<label>Choose search filter: </label>
</td>
<td style="width: 25%">
<select id="selection_filter">
<option value="code">ITEM CODE</option>
<option value="itemname">ITEM NAME</option>
</select>
</td>
<td>
<input type="text" name="keyword" id="keyword" style="width: 80%" data-selection="code" /> <input type="button" value="SEARCH" id="search-btn" class="k-button" style="font-size: 12px" />
</td>
</tr>
</table>
This is my code for accessing the controller (CodeIgniter)
public function searchItem(){
$query = $this->input->post('query');
$filter = $this->input->post('data_filter');
if($filter == "code"){
$querySearch = "SELECT item_code,item_name from items WHERE item_code LIKE '%".$query."%' GROUP BY item_code";
}else{
$querySearch = "SELECT item_code,item_name from items WHERE item_name LIKE '%".$query."%' GROUP BY item_code";
}
$resultSearch = $this->db->query($querySearch);
$count = $resultSearch->num_rows();
echo json_encode($resultSearch->result_array());
//echo json_encode($querySearch);
}
What I want to get is:
In my ajax. There is a data that contains the value of keyword and data filter. Now What I need to do is get the data_filter value and pass it to the controller.
You can get the response inside your ajax like this
$.ajax({
type:'POST',
url: query_url,
data:{query: $("#keyword").val(), data_filter: $("#keyword").attr("data-selection")},
dataType:'json',
async: false,
success:function(res){
console.log(res.item_code);//Will give you the item code
console.log(res.item_name);//Will give you the item name
},
});
Ok got it just an error in my syntax. Thanks for the response guys.