Searching not working in ajax once textbox onblur event is called - php

I have the following code to search through AJAX. Now if I apply onblur event to the textbox (so that searching result disappears) and get back to the textbox again, searching facility is no more working. So the thing is, it might not be able to call onfocus event properly once onblur event is called. Any help would be appreciated.
<script type="text/javascript">
$(document).ready(function () {
$(".searchproductbrand").keyup(function () {
var kw = $(".searchproductbrand").val();
if (kw != '') {
$.ajax({
type: "POST",
url: "livesearch.php",
data: "kw=" + kw,
success: function (option) {
$("#livesearch").html(option);
document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
}
});
} else {
$("#livesearch").html("");
document.getElementById("livesearch").style.border = "0px";
}
return false;
});
});
</script>
<script>
$(document).ready(function () {
$(".searchproductbrand").blur(function () {
document.getElementById("livesearch").style.display = "none";
})
});
</script>
Livesearch is the div where I print my search results.

You should provide your markup, or a jsfiddle but i'm almost sure that everything is working but on the onblur event you set the display rule of the 'livesearch' element to none, but you never set it back to block so you made it invisible and it stayed that way because you need to set it to block or whatever visibible display rule that you want, i created a jsfiddle example based on what you posted, i took the liberty to alter your code and removed the ajax part so you can focus on the real issue, i hope this solves your problem.
http://jsfiddle.net/kFj9u/1
jQuery(document).ready(function(){
var $liveSearch = $('#liveSearch');
$(".searchProductBrand").keyup(function(){
var keyWord = $(this).val();
if(keyWord != ''){
var msg = 'You searched for ' + keyWord;
$liveSearch.css('display','block').html(msg);
}else{
$liveSearch.html('').
css('border','none');
}
}).blur(function(){
$liveSearch.css('display','none');
})
});

Probably your livesearch is still hidden, try this:
<script type="text/javascript">
$(document).ready(function () {
$(".searchproductbrand").keyup(function () {
var kw = $(".searchproductbrand").val();
if (kw != '') {
$.ajax({
type: "POST",
url: "livesearch.php",
data: "kw=" + kw,
success: function (option) {
$("#livesearch").show(); // this is
$("#livesearch").html(option);
document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
}
});
} else {
$("#livesearch").html("");
document.getElementById("livesearch").style.border = "0px";
}
return false;
});
});
</script>
<script>
$(document).ready(function () {
$(".searchproductbrand").blur(function () {
document.getElementById("livesearch").style.display = "none";
})
});
</script>

Related

Ajax PHP - keyup function Bug (Slow Query)

I building a application to fetch records database with ajax. And I'm using the keyup function to catch what I'm querying/writing. But some times when I write something like "si" and there are many records in the database and query takes more time than me writing the next letter this bug happens. (querying 'sitre' but PHP only catches 'si'):
My question is, is there a way to get around this?
My JS code:
<script>
$(document).ready(function(){
load_data();
function load_data(query) {
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '') {
load_data(search);
} else {
load_data();
}
});
});
</script>
Thank you.
Fixed with delay thanks to Taron Saribekyan
<script>
var timeout = null;
$(document).ready(function(){
load_data();
function load_data(query) {
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
clearTimeout(timeout);
if(search != '') {
timeout = setTimeout(function () {
load_data(search);}
, 500);
} else {
load_data();
}
});
});
</script>
Set delay before ajax query.
See how to do it

Custom Autocomplete With Ajax/jQuery

I'm creating custom autocomplete with help of Ajax, jQuery and I have hard-coded one database which is created in PHP as I am getting correct output. But when I click on any text in the autocomplete box it does not get selected.
$(document).ready(function () {
$("#search_Textbox").keyup(function () {
var searchbox_Value = $("#search_Textbox").val();
$("#serach_Result").show();
if ($("#search_Textbox").val() == null || ($("#search_Textbox").val() == "")) {
$("#serach_Result").hide();
}
$.ajax({
url: "custom_database.php",
type: "GET",
data: {
text_Value: searchbox_Value
},
success: function (server_Response) {
$("#serach_Result").html(server_Response);
}
});
});
$('a').bind('click', function () {
alert("yes");
var achor_tag_text = $(this).val();
alert(achor_tag_text);
$("#search_Textbox").text(achor_tag_text);
});
});
You could use .on() function it is more preferable from jquery 1.7
$(document).on('click','a', function() {
alert("yes");
//do your stuff
var achor_tag_text = $(this).val();
alert(achor_tag_text);
$("#search_Textbox").text(achor_tag_text);
});
but don't bind common element to click event give an class name to an element then bind your event with that class
You are binding to the <a> tags which are present at the initial load of the page, not those that are present when the ajax returns.
Change your $('a').bind('click', function() { to $(document).on('click', 'a', function() {.

Making Java Script global variables

I am using the var function to create variables so that I can use them in PHP So I can use the post function, Basically I imported them in javascript.
Anyway how do I make them global variables?
Ive tried including them in the document.ready function or even before the code starts executing document.ready function. it be alot neater then just repeating those var everywhere.
Here is the code
$(document).ready(function () {
var user_login = $('#user_login').val();
var user_pass = $('#pass_login').val();
$('#field').keyup(function (e) {
if (e.keyCode == 13) {
//If enter is pressed vailidate the form
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: {
user_login: user_login,
pass_login: user_pass
},
success: function (data) {
$('#content').html(data);
}
});
};
});
$('#submit').click(function (e) {
if (e.keyCode != 13) {
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: {
user_login: user_login,
pass_login: user_pass
},
success: function (data) {
$('#content').html(data);
}
});
}
});
});
You probably dont want them to be global, as there is no reason. As you have this coded now the variables will be evaluated only once as soon as the document is ready which will be before a user has entered anything in your form fields. You want to evaluate them in your onkeyup handler or on submit of the form so that you have the current values. Im not sure that your check.php does but it should look something like this:
$(function(){
$('form#theform').submit(function(e){
e.preventDefault();
var user_login = $('#user_login').val(),
user_pass = $('#pass_login').val();
// you ajax submit here
});
$('#field').keyup(function(e){
e.preventDefault();
var user_login = $('#user_login').val(),
user_pass = $('#pass_login').val();
// do your validation, if successful then do: $('theform').trigger('submit');
});
});
The reason you dont want to use globals here is because you ALWAYS need the most recent input. If you use a global variable then there is no way to tell that you have the most recent input because things are going to get out of sync.
Global is probably not the way to go here. It sounds like you are more interested in reducing the duplicate code? You could refactor the current code into something like:
$(document).ready(function () {
function submitForm() {
var user_login = $('#user_login').val();
var user_pass = $('#pass_login').val();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: {
user_login: user_login,
pass_login: user_pass
},
success: function (data) {
$('#content').html(data);
}
});
}
$('#field').keyup(function (e) {
if (e.keyCode == 13) {
//If enter is pressed vailidate the form
e.preventDefault();
submitForm();
};
});
$('#submit').click(function (e) {
if (e.keyCode != 13) {
submitForm();
}
});
});
You need to call .val() on your input each time you want to get the current value of the inputs. If you only call it once at the beginning, the variables won't stay up-to-date as the user types in the inputs.
Do something like this:
$(document).ready(function() {
// Make a function that returns the data, then call it whenever you
// need the current values
function getData() {
return {
user_login: $('#user_login').val(),
user_pass: $('#pass_login').val()
}
}
function check(e) {
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: getData(), // get current values
success: function (data) {
$('#content').html(data);
}
});
}
// Don't repeat so much; use the same function for both handlers
$('#field').keyup(function(e) {
if (e.keyCode == 13) check(e);
});
$('#submit').click(function(e) {
if (e.keyCode != 13) check(e);
});
});

jquery Ajax URl issue

I have looked around quite a bit and it seems absolute urls is the way to go here. I have no problem in chrome but firefox and IE IE still wants to redirect fully to the wrong page.
my states:
<script type="text/javascript">
$(function() {
$('#page_submit').click(function () {
event.preventDefault();
$('.standard span').hide();
var pw = $("input#pw").val();
if (pw == "") {
$("span#pw_err").show();
$("input#pw").focus();
return false;
}
var pw2 = $("input#pw2").val();
if (pw2 == "") {
$("span#pw2_err").show();
$("input#pw2").focus();
return false;
}
if (pw != pw2) {
$("span#match_err").show();
$("input#pw2").focus();
return false;
}
var data = 'pw=' + pw + '&pw2=' + pw2;
$('.standard input').attr('disabled','true');
$('.loading').show();
$.ajax({
url: "/members/includes/change.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//hide the form
$('#pw_form').fadeOut('slow');
//display results
$('#pw_form_result').fadeIn('slow');
$("#pw_form_result").html(html);
}
});
return false;
});
});
</script>
the structure of the file I am trying to access is:
www.site.com/members/includes/change.php
Not sure what the cause is really. I know the jquery initiator is working because i can summon alert calls to and from the function itself.
edit
after commenting out
event.preventDefault();
it seems to function right? everything I had read before said this was a necessary piece however.
This line
$('#page_submit').click(function () {
should be
$('#page_submit').click(function (event) {
so this code
event.preventDefault();
can take effect.
And the 'return false;' is unneccesarry.

something wrong with this jquery?

i have these two jquery scripts on my html page, one of them loads more results(like pagination), and the other one replies to users messages, just like twitter!
the replies works(inserts username into textbox), when the page is on default, but when i load more results, the loaded results wnt insert the username into the textbox!! these are the two scripts,
the replies jquery:
function insertParamIntoField(anchor, param, field) {
var query = anchor.search.substring(1, anchor.search.length).split('&');
for(var i = 0, kv; i < query.length; i++) {
kv = query[i].split('=', 2);
if (kv[0] == param) {
field.val(kv[1]);
return;
}
}
}
$(function () {
$("a.reply").click(function (e) {
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this,"reply_name",$("#reply_name"));
insertParamIntoField(this, "replyto", $("#inputField"));
$("#inputField").focus()
$("#inputField").val($("#inputField").val() + ' ');
e.preventDefault();
return false; // prevent default action
});
});
the loadmore jquery script:
$(function() {
//More Button
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ul.statuses").append(html);
$("#more" + ID).remove();
}
});
}
else
{
$(".morebox").html('The End');
}
return false;
});
});
EDIT: when i load more posts, and i click reply the page is refershed, so that ends up with loaded data being hidden again!!
If the reply button is being replaced by the ajax, this might be a workaround.
$(function () {
$("a.reply").live(click, function (e) {
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this,"reply_name",$("#reply_name"));
insertParamIntoField(this, "replyto", $("#inputField"));
$("#inputField").val($("#inputField").val() + ' ').focus();
e.preventDefault();
});
});
Also... If the status_id, reply_name , replyto info is contained within your reply button, make sure these data exists for each reply button after the more button is clicked.

Categories