JQuery help - everything was working, what did I change?

[cjohnweb]

Let's say this is an unknown error, possibly a syntax error, possibly an HTML error - I can't be sure.

Hey there,

I'm a PHP expert, but not so well with JQuery - I'm just starting out with JS in general.

I have a PHP based site I am working on, and I'm trying to add some awesome UI stuff to it. I had this working, I made some changes through out the site - too many to keep track of - and now it's not working, but I can't seam to figure out what I did to break it.

Here is my JQ:

$(document).ready(function() {

//On Keypress we update the search results field
$('#plantname').keyup(function() {
$.get('<?php echo $settings['site']['url']; ?>actions/search/'+escape($('#plantname').val()), 
function(data) {
//When we get the search data, we load #search_results with data.
$('#search_results').html(data);
}); // function data, get search results page data
}); // plantname keyup


//When page loads, if there is an existing search query, we need to load results right away
if($('#plantname').length > 0){
$.get('<?php echo $settings['site']['url']; ?>actions/search/'+escape($('#plantname').val()), 
function(data) {
//When we get the search data, we load #search_results with data.
$('#search_results').html(data);
}); // function data, get search results page data
}


}); // document ready

My Home page:

<header class="whentoplant">

<input type="text" id="plantname" class="plantname" name="plantname" value="<?php if(!empty($var[1])){ echo htmlentities(trim($var[1])); } ?>" onKeyPress="return disableEnterKey(event)" placeholder="Plant Name"/>
<?php
// Replaced this
// onfocus="if(this.value == 'Plant Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Plant Name';}"
// with this
//<input type="text" placeholder="Text Here">
?>
</header>

<section id="search_results"><img src="<?php echo $settings['site']['url']; ?>images/get-started.png" alt="Get Started" /></section>

The rest of the code is in a search.php file, I'll short hand it for you:

<?php

$var[1] = urldecode($var[1]); // Get the search query

if(strlen($var[1]) > 0){ // if it's not empty

//Put suggested search text into a variable
$dym = "<span class=\"did-you-mean\">".did_you_mean($var[1])."</span>";

if(mysql query and num rows == 1){
$agr = mysql_fetch_array($gr);
extract($agr);
echo "FULL ARTICLE When To Plant $p_articlename<br />";
}elseif(mysql query and num rows > 1){
echo $dym;
while($agr = mysql_fetch_array($gr)){
extract($agr);
echo "<a href=\"".$settings['site']['url']."pages/plants/when-to-plant-$p_permalink\">When To Plant $p_articlename</a><br />";
}
}else{
echo $dym;
echo "No results at all";
}
}


?>

So, like I said, it was working perfectly - You go to the home page and you see the input field, and an image below it saying "use the search bar", you start typing and you see the results update in real time. The you click on a search suggestion link, that brings you to the home page again, but it passes the suggested search text as well. The search form is prefilled with that suggested search text, and the search results show up below.

Here is what it is doing now:

With the line:

if($('#plantname').length > 0){

You go to the home page and the image that says "use the search bar" (get-started.png) disappears, as if it searched an empty search (I tested, that is exactly what it's doing) - no results show, just a blank page. It's loading search results before you type anything

I change my Jquery line to:

if($('#plantname').length > 1){

And it works again, but causes another error - you click on a suggested search link ($dym on the search page) - brings you to /pages/home/suggested text here - , the form prefills the suggested text but it doesn't load any results until you click into the text field and type at least a single key stroke.

Confusing. I don't even see why it's doing that.

I hope I was clear, it's hard to explain. I'm suspect it has something to do with that JQuery line, but I am not sure how to write the results of "$('#plantname').length" to the screen, or the actual text it is pulling.

So if you see an error, have a fix, or can help me get the script to print $('#plantname').length or $('#plantname').value to the screen I'd be grateful.

Thanks!

Any help greatly appreciated.

[cjohnweb]

I have a work around, but I'd still like to know how to fix the Jquery. I conditionally include the JQuery code that is causing the problem with PHP:

<?php
if(!empty($var[1])){
?>
//When page loads, if there is an existing search query, we need to load results right away
if($('#plantname').length > 0){
$.get('<?php echo $settings['site']['url']; ?>actions/search/'+escape($('#plantname').val()), 
function(data) {
//When we get the search data, we load #search_results with data.
$('#search_results').html(data);
}); // function data, get search results page data
}
<?php
}
?>

[Airshow]

cjw,

Looking only at your second post, I can't see anything obviously wrong with the php/jquery as long as it's wrapped in script tags and an appropriate jQuery structure:

$(document).ready(function(){...});
//or
$(function(){...})

A couple of further provisos:

1. if($('#plantname').length > 0) checks for the existence of the id="plantname" field. If you want to check for the field's contents, then use if($('#plantname').val().length > 0) .
2. $('#plantname').val() will only work for an input field or textarea. For a div or span, use $('#plantname').html() .

Airshow

[cjohnweb]

Thank you Airshow.

To clearify, what does the "if($('#plantname').length > 0){" check the length of? Are you saying it does not actually check length, just returns a true or false?

I will try .val().length, that sounds like it is exactly what I am looking for :)

Thanks again for the help!

[Airshow]

cjw,

To clearify, what does the "if($('#plantname').length > 0){" check the length of? Are you saying it does not actually check length, just returns a true or false?

Remember that a jQuery selector can find any number of DOM nodes; none, one or more than one. $('#plantname') constructs and returns a jQuery object containing all elements with id="plantname". It should find none or one DOM node (because HTML element ids should be unique). $('#plantname').length constructs a jQuery object then returns the number of elements found. $('#plantname').length > 0 constructs a jQuery object then returns true or false depending on the number of elements found. $('#plantname').val().length constructs a jQuery object then returns the length of the string currently in the field with id="plantname". $('#plantname').val().length > 0 constructs a jQuery object and again returns true or false but this time depending on the length of the string currently in the field with id="plantname".

In other words, it's all strictly logical!

Airshow

[cjohnweb]

Awesome Airshow, the line

if($('#plantname').val().length > 0){

is exactly what I was looking for.

I see, as I understand it,

if($('#plantname').length > 0){

will tell me if the <input id="plantname"[...]/> was found or not - in my circumstance the home page has the input tag, so on the home page the Jquery will always return true. But I needed to check the length of what was entered into the text field. It does work perfect now!

Thanks a ton!

[Airshow]

And to round off the discussion it's probably worth noting that jQuery is inherently tolerant of null selections.

If you are familiar with javascript DOM methods, then you will know you have to test that the result of getElementById(...) is not falsy before trying to do anything with it - otherwise javascript throws an error (null has no methods).

However, $('#nonExistantID').html('Display this text if you can!') will not throw an error. The jQuery core code says, "OK I'll try but hey there's nothing to operate on so I'll do nothing", and returns an (empty) jQuery object for assignment and/or method chaining in the normal way.

This inherent tolerance is an oft understated benefit of jQuery.

Airshow