So far, i have done creating report with paging.
sample code index.php:
<div class='web'>
<h1>Data Order Notaris</h1>
<div id="page_data"></div>
<span class="flash"></span>
</div>
and use script:
$(document).ready(function(){
change_page('0');
});
function change_page(page_id){
$(".flash").show();
$(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
var dataString = 'page_id='+ page_id;
$.ajax({
type: "POST",
url: "paging.php",
data: dataString,
cache: false,
success: function(result){
$(".flash").hide();
$("#page_data").html(result);
}
});
}
my file for show paging is paging.php
my problem when using live search. i am trying add input type in index.php
add input script:
<input type='text' name='search' placeholder='search' />
i think it doesn't need form and submit button.
how to post value from input name='search' to paging.php for filter data report?
is it need more function or using function change_page? i am still confuse with logic. thanks for help
You should give Input in this way:
<input type='text' Id="search_box" name='search' placeholder='search' />
Then using js you can fetch this field's value
So your js code will be as:
$(document).ready(function(){
change_page('0');
});
function change_page(page_id){
//To get the field value
var search_val = $("#search_box").val();
$(".flash").show();
$(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
var dataString = 'page_id='+ page_id+'&search='+search_val;
$.ajax({
type: "POST",
url: "paging.php",
data: dataString,
cache: false,
success: function(result){
$(".flash").hide();
$("#page_data").html(result);
}
});
}
Then make the appropriate query in your paging.php :)
Related
I have below code. when I click reply link, it will show a comment box.
I want 2 points.
or give me best way to do my work.
When 1 comment box open other must be hide.
when I click on send button correct value should send vie serialize values.
These are the codes
PHP code
<?PHP
for($i = 1; $i < 10; $i++)
{
?>
<div>comments text etc etc...</div>
Reply
<div class="reply-comment-form" style="display:none;">
<form class="comment_form" method="post">
<textarea name="comment_box" rows="6" class="span10"></textarea> <br /><br />
<input type="button" onClick="send_comment()" class="btn btn-primary" value="send" />
</form>
</div>
<?PHP
}
?>
Jquery code
<script>
$(function(){
$('.reply-comment').on('click', function(e){
e.preventDefault();
$(this).next('.reply-comment-form').show();
});
});
function send_comment()
{
$.ajax({
type: "POST",
data : $('.comment_form').serialize(),
cache: false,
url: 'test.php',
success: function(data){
}
});
}
</script>
test.php file no need. I am checking values through firebug.
please help me to clarify this problem.
or give me best way to do my work.
I am stuck since 2 days.
Thank you for your valuable time.
For the first one
$('.reply-comment').on('click', function(e){
e.preventDefault();
// Hide others
$(".reply-comment-form").hide();
// Show the one which is required
$(this).next('.reply-comment-form').show();
});
And for second, do a .on("submit"... on the form and it will serialize the right input fields only.
UPDATE:
<form class="comment_form" method="post">
<textarea name="comment_box" rows="6" class="span10"></textarea> <br /><br />
// Change type to submit and remove onclick
<input type="submit" class="btn btn-primary" value="send" />
</form>
jQuery:
$(".comment_form").on("submit", function(e){
e.preventDefault(); // Here
var _data = $(this).serialize();
$.ajax({
type: "POST",
data : _data,
cache: false,
url: 'test.php',
success: function(data){
console.log(data);
}
});
});
I found a solution. #void helped me for this.
$(".test").on("click", function(){
var _data = $(this).parent().serialize();
$.ajax({
type: "POST",
data : _data,
cache: false,
url: 'test.php',
success: function(data){
}
});
});
Thanks!
I have a form that will display a list of transactions based on the name and date.
<form id="form1" name="form1" method="post" action="<?php echo base_url() ?>options/history">
Name
<input name="name" type="text" id="name" />
date
<input name="date" type="text" id="date" />
<input name="find" type="submit" id="find" value="find" />
</form>
Once the form is submitted all the relevant details are being displayed.
Can someone explain to me how I can use jquery to loads the data on the same page?
I'm new to jquery and learning stuff. I did some research and below is what I have found:
<script type="text/javascript">
$(document).ready(function() {
$('#find').click(function() {
$.ajax({
type: "GET",
cache: false,
url: "<?php echo base_url() ?>options/history",
success: function(data) {
alert('Data Loaded');
}
});
});
});
</script>
And also how do I pass the form variables to my controller? Is it possible to directly pass the values to the controller or do I have to pass it along with the URL?
<script type="text/javascript">
$(document).ready(function() {
$('#form1').submit(function() {
// get the data of the form
var data_form = $('#form1').serialize();
$.ajax({
type: "GET",
cache: false,
data: data_form,
url: "<?php echo base_url() ?>options/history",
success: function(data) {
alert('Data Loaded');
// Your data is in the var data returned, you can use it with, for example: $("#content").html(data);
}
});
// Prevent default behaviour
return false;
});
});
</script>
I am a bit confused here. But I suppose you actually want this:
$('form#form1').submit(function(evt){
$.ajax({
type: "GET",
data: $(this).serialize(),
cache: false,
url: "<?php echo base_url() ?>options/history",
success: function (data) {
alert('Data Loaded');
}
});
evt.preventDefault();
return false;
});
You can use .submit() to bind to the JavaScript's submit event instead. By returning false at the end of this handler you can stop the form submission as shown above; or, by using evt.preventDefault().
The data property in $.ajax specifies the data to be sent to the server. As for getting this data you can use .serialize(), it will encode the form elements ready for submit them.
I add <input type="text"> via $('#').click(function(){}); Then use form.js to write into the table, but does not.
If the text is standalone it does write.
below is the code used to ajax form.js.
$(function() {
$("#c .button").click(function() {
var text = $("#N").val();
var dataString = 'N='+ N;
$.ajax({
type: "POST",
url: "s.php",
data: dataString,
success: function(){
$('.success').fadeIn(1000);
}
});
return false; });
});
Should I use .live or .on. Neither of which works though. Any ideas as to why it does not work.
[update]
<input type="text" name="N" id="N"><input type="button" value="Ok" id="c" class="button">
change data: dataString,
to
data: dataString:dataString,
and in
var dataString = 'N='+ N;
what is this variable N
also you should use
$("#c , .button").click(function()
instead of
$("#c .button").click(function()
I'm trying to use the POST method in jQuery to make a data request. So this is the code in the html page:
<form>
Title : <input type="text" size="40" name="title"/>
<input type="button" onclick="headingSearch(this.form)" value="Submit"/><br /><br />
</form>
<script type="text/javascript">
function headingSearch(f)
{
var title=f.title.value;
$.ajax({
type: "POST",
url: "edit.php",
data: {title:title} ,
success: function(data) {
$('.center').html(data);
}
});
}
</script>
And this is the php code on the server :
<?php
$title = $_POST['title'];
if($title != "")
{
echo $title;
}
?>
The POST request is not made at all and I have no idea why. The files are in the same folder in the wamp www folder so at least the url isn't wrong.
You need to use data: {title: title} to POST it correctly.
In the PHP code you need to echo the value instead of returning it.
Check whether title has any value or not. If not, then retrive the value using Id.
<form>
Title : <input type="text" id="title" size="40" name="title" value = ''/>
<input type="button" onclick="headingSearch(this.form)" value="Submit"/><br /><br />
</form>
<script type="text/javascript">
function headingSearch(f)
{
var title=jQuery('#title').val();
$.ajax({
type: "POST",
url: "edit.php",
data: {title:title} ,
success: function(data) {
$('.center').html(data);
}
});
}
</script>
Try this code.
In php code, use echo instead of return. Only then, javascript data will have its value.
try this
$(document).on("submit", "#form-data", function(e){
e.preventDefault()
$.ajax({
url: "edit.php",
method: "POST",
data: new FormData(this),
contentType: false,
processData: false,
success: function(data){
$('.center').html(data);
}
})
})
in the form the button needs to be type="submit"
Id advice you to use a bit simplier method -
$.post('edit.php', {title: $('input[name="title"]').val() }, function(resp){
alert(resp);
});
try this one, I just feels its syntax is simplier than the $.ajax's one...
function signIn()
{
var Username = document.getElementById("Username").value;
var Password = document.getElementById("Password").value;
$.ajax({
type: 'POST',
url: "auth_loginCode.jsp",
data: {Username: Username, Password: Password},
success: function (data) {
alert(data.trim());
window.location.reload();
}
});
}
contentType: 'application/x-www-form-urlencoded'
I have two pages in php and I need that the value of radioButton selection pass to another page, but it not work.
The jquery code of the page that send the data is:
$(document).ready(function(){
$("#continue").click(function(){
var val = $("input[#name='opt']:checked").val();
$.ajax({
type: 'GET',
url:'editor.php',
data:'radio=' + val,
dataTyoe:'html',
succes: alert(val)
});
});
});
The html code into the php page is:
<input type="radio" id="opt" name="opt" value="opt1" checked="checked">Opt 1<br/>
<input type="radio" id="opt" name="opt" value="opt2"/>opt2<br />
<input type="radio" id="opt" name="opt" value="opt3"/>opt3<br />
Guardar continuar<br/>
And the code of the page that recive data is the follow.
<?php
$valor = $_REQUEST['radio'];
echo $valor
?>
Thanks
There were some spelling mistakes and need some correction. Try the following code;
$(document).ready(function(){
$("#continue").click(function(){
var val1 = $("input[name='opt']:checked").val();
$.ajax({
type: 'GET',
url:'editor.php',
data:'radio=' + val1,
success: function(){
alert(val1);
}
});
});
});
you misspelled succes: it should be success:
You may have some errors : try replacing dataTyoe:'html' for dataType:'html', Also $("input[#name='opt']:checked") by $("input[#name=opt]:checked")... and the success callback too...
It would look like :
var val = $("input[#name=opt]:checked").val();
$.ajax({
type: "GET",
url: "editor.php",
data:'radio='+val,
dataType: "html",
async:false,
success: function(){
alert(val);
}
}
);
Also you could remove the link from the html :
Guardar continuar<br/>