I am making a search engine.I want to post the data from jquery to php.
Here is my code of jQuery
<script>
$(document).keypress(function(e) {
if(e.which == 13 && $('#textfield').val()) {
$.post("search_result.php",
{
wording: $('#textfield').val()
}, function() {
window.location = "search_result.php";
}
);
}
});
</script>
Here is my code of php to get the wording:
<?php include('../include/common_top.php');
$key_word = $_POST["wording"];
var_dump($key_word);
?>
But what I get is a null value.Please help.
You shouldn't redirect to the PHP script. That runs it a second time, but this time with no POST parameters.
The output of the PHP script from the AJAX request will be the argument to the callback function, you can display it from there.
$(document).keypress(function(e) {
if(e.which == 13 && $('#textfield').val()) {
$.post("search_result.php",
{
wording: $('#textfield').val()
}, function(result) {
$("#somediv").text(result);
}
);
}
})
Hope your are fine!
I'm would like to execute a request (SQL) like this one:
SELECT Name FROM course WHERE IdSectionFK = '.$idSectionFK.';
I have the list of sections:
while($row = $selectAllSection->fetch(PDO::FETCH_OBJ)){
echo "<option value=".$row->IdSection.">".$row->Name."</option>";
}
And I would like to display the data only for the selected value. I tried something like this to get the value of the list:
<script>
function displayVals() {
var idSection = $("#sectionListe").val();
$.post('index.php', { 'idSection': idSection },function (){
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
}
$("select").change(displayVals);
displayVals();
</script>
So, the variable "idSection" is equale to the PHP variable "idSectionFK" in my SQL request.
But how can I execute the right SQL request ?
Thank you so much for your help!
Lapinou.
AJAX is the solution.
JS code:
function displayVals() {
var idSection= $("#sectionListe").val();
$("p").html(idSection);
$.post('/url/to/php/file', { 'idSection': idSection }, function (response) {
// do something with the response here
// e.g: $('select').append(response);
console.log(response);
});
}
$("select").change(displayVals);
displayVals();
PHP code to process the received data:
$idSectionFK = 0;
if (isset($_POST['idSection'])) {
// get the ID from ajax, run SQL here
$idSectionFK = intval($_POST['idSection']);
$query = "SELECT Name FROM course WHERE IdSectionFK = '.$idSectionFK.';";
// .... your code ...
}
Just to give you the basic idea.
What I want to do
When writing in the text field, I want the <div class="result"> to be filled with what PHP is echoing.
But it doesn't work!
Jquery
$(document).ready(function() {
var search = $("#search");
if (search.val() !== '') {
search.keyup(function() {
$.post("index.php", { search : search.val()}, function(data) {
$(".result").html(data);
});
});
}
});
php
if (isset($_POST['search'])) {
echo 'hello';
}
html
<input type="text" name="search" id="search"/>
<br />
<div class="result"></div>
Problem
When filling the input, nothing happens, and it meant to POST the entered data on keyup (When entering a new character/or deleting.
What is stopping it from working? I am new to jQuery .
Thanks.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
This is wrong.
if (search.val() !== '') {
The above line should be,
if (search.val() != '') {
EDIT:
Then wrap the if condition inside the keyup function.
$(document).ready(function() {
var search = $("#search");
search.keyup(function() {
if (search.val() != '') {
$.post("getInputs.php", { search : search.val()}, function(data) {
$(".result").html(data);
});
}
});
});
When I run into situations like this, I just start breaking the problem in half to see where its failing. Here are a couple things I would try.
First, in your jQuery, add some output to the console:
if (search.val() !== '') {
console.log("I am not empty so I should go to index.php");
search.keyup(function() {
$.post("index.php", { search : search.val()}, function(data) {
$(".result").html(data);
});
});
}
else
{
console.log("search val was empty");
}
Of course you could always check the browsers network profiler to see if it made a POST to that resource. This will tell you if the problem is in your search.val test.
Then, if you want to debug the PHP side, you could remove the isset test and just always return "hello". That will tell you if its an issue with your POST variables or checks.
Finally, you could output the data result to be sure something is coming back at all. This will remove any issues with $(".result").html() being the problem:
$.post("index.php", { search : search.val()}, function(data) {
console.log(data);
$(".result").html(data);
});
If none of these work, maybe you could just switch around the way you bind to keyup in the first place:
$(document).ready(function() {
$("#search").keyup(function() {
if ($(this).val() !== '') {
$.post("index.php", { search : $(this).val()}, function(data) {
$(".result").html(data);
});
});
}
});
$(document).ready(function() {
var search = $("#search");
});
This fire only at document ready but not on keyup, means in var $("#search").val() will be blank.
Change your code to capture inpute value on every key-up stroke.
$(document).ready(function() {
search.keyup(function() {
var value = $("#search").val();
if(value!="")
{
$.post("index.php", { search : value}, function(data) {
$(".result").html(data);
});
}
});
});
Your logic is incorrect. You are only setting the keyup event handler if your #search has text in it. Unfortunately when that script runs on document ready, there is NO value in #search so your keyup handler never gets set, which is why it never fires.
I rewrote some of your logic and was able to get it to work. One being the way your checking to ensure you have a value. Instead of string comparing I am checking the length. Also, instead of binding the event to the field, I bind the event on the document and target the field. Try it:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input type="text" name="search" id="search"/>
<br />
<div class="result"></div>
<script>
$(document).ready(function() {
$(document).on('keyup', 'input#search', function() {
if($(this).val().length > 0) {
$.post('index.php', {"search":$(this).val()}, function(data) {
$('div.result').html(data);
});
}
});
});
</script>
// when the html is loaded
$(document).ready(function() {
// find an element with the id 'search'
var search = $("#search");
// if this element's value is NOT an empty string -- oh look, it is!
if (search.val() !== '') {
// well, going to skip all this here then
search.keyup(function() { // don't care
$.post("index.php", { search : search.val()}, function(data) { // don't care
$(".result").html(data); // don't care
});
});
}
// YAAAAY! All done!
});
Actually nothing is wrong in your code. I have tried your code itself. Only issue was that you have called keyup function conditionally. Your Javascript code should be like below:
$(document).ready(function() {
var search = $("#search");
search.keyup(function() {
if (search.val() != '') {
$.post("index.php", { search : search.val()}, function(data) {
$(".result").html(data);
});
}
});
});
Here, condition should be inside the keyup function.
I have added an ajax loader to my code below. The problem is when the data from database is over, still the scroll function is going to an infinite loop and also the ajax scroll image is displayed. I want to stop the scroll function once the data is finished and also disable the ajax loader image. THis is my code
var counter=25;
$(window).on('scroll',function(){
if($(window).scrollTop()==($(document).height()-$(window).height())){
$('div#lastPostsLoader').html('<img src="loading-icon.gif">');
//Get older posts
$.ajax({
type: 'POST',
url: 'getdata.php?start_row=' + counter,
success: function(oldposts){
if(oldposts)
{
//Append #postsDiv
$('#data').append(oldposts);
counter += 15;
}
else
{
$('#lastPostsLoader').hide();
}
}
});
}
});
Try with this:
var counter = 25;
$(window).on('scroll', function () {
if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
$(document).ajaxStart(function() {
$('div#lastPostsLoader').html('<img src="loading-icon.gif">');
});
$.ajax({
type: 'POST',
url: 'getdata.php?start_row=' + counter,
success: function (oldposts) {
if ($('#data')) {
$('#data').append(oldposts);
counter += 15;
}
}
});
$(document).ajaxComplete(function() {
$('div#lastPostsLoader').find('img[src^="loading"]').remove();
});
}
});
If i am not wrong, in the success function, if you get the data, you should hide the loader there itself. I am not getting what is the purpose of hiding the $('#lastPostsLoader') in the else part ???
From what I understand is that you are hiding the loader if you dont get any data.
#pavan
if ($('#data')) {
//if you have data process your business logic.
}
else
{
//Hide the loader.
//remove the event handler you can use .off for it.
}
For removing event handler http://api.jquery.com/off/
here is my jquery $.post
$(document).ready(function() {
$("form[name=frmedit]").submit(function() {
$.post('index.php',
{
dealname: $("[name=dealname]").val(),
startdate: $("[name=startdate]").val()
},
function(data)
{
if(data.success)
{
location.href = data.redirect;
}
else
{
$("#colright #error").html(data.message);
}
}, 'json');
return false;
});
});
the php part is on the same page
if(isset($_POST['btnNext']) && ($_FILES['image']['size'] > 0))
{ //run query to save data }
so my question is can i have all this on one page?
i also have another question
where i have
$("form[name=frmedit]").submit
how can i put the name of the button btnNext in that rather than just .submit?
the reason why i want to use all this on one page is because when a submit is done i want to check
if a thumbnail uploaded is greather than 0 being that it exists, like i was normally doing.
thanks
if your ajax succeeds , then return true so that it will do form submit otherwise do a false, it won't do a form submit
function(data)
{
if(data.success)
{
return true
}
else
{
$("#colright #error").html(data.message);
return false
}
}, 'json');
return false;