CODEWITHSUNDEEP
phpjquerymysqlautocomplete
Monty
Monty

Reputation: 1322

can't get JQUERY .autocomplete to work right with .attr

I'm going around and around in circles on this. I'm new to JQUERY and so far it's awesome! I've looked over tons of stuff on the internet and here in the answered questions but I have not been able to figure out the right answer. Right now I'm killing myself trying to figure out what I'm doing wrong on it. The .autocomplete is working fine with the basic stuff like giving me back a string from the MYSQL database and inputing it into form how I want. But the problem I'm having is bringing back a boolean value and marking a check box with that value. What I'm getting right now is all the boxes checked even if the value if 0.

Here's my .autocomplete code.

<?php require_once('../connection.php'); ?>
<?php include '../_includes/jq.inc.php';?>
<html>
<head>
<script type="text/javascript">
$(function() {
    $('#Company_Name').val("");
    $('#Manager').val("");
    $('#Phone').val("");
    $('#Contacted').val("");
    $('#Pitched').val("");
    $('#Interested').val("");
           $("#autoSearch").autocomplete({
                source: "Test.QUERY.php",
                minLength: 2,
                select: function(event, ui) {
                        $('#Company_Name').val(ui.item.Company_Name);
                        $('#Manager').val(ui.item.Manager);
                        $('#Phone').val(ui.item.Phone);
                        $('#Contacted').attr("checked", true);
                        $('#Pitched').attr("checked", true);
                        $('#Interested').attr("checked", true);
                }
            });
     }); 
</script>
</head>
<body>
<form action="<?php echo $PHP_SELF;?>"  method="post">SEARCH:
<input type="text" id="autoSearch" size="60" onClick="this.form.reset()"/>
</form>
<form method="POST" name="form">
<input type="text" name="Company_Name" id="Company_Name">Company Name<br>
<input type="text" name="Manager" id="Manager">Manager<br>
<input type="text"  name="Phone" id="Phone">Phone<br>
Contacted<input type="checkbox" name="Contacted" id="Contacted"><br>
Pitched<input type="checkbox" name="Pitched" id="Pitched"><br>
Interested<input type="checkbox" name="Interested" id="Interested">
<br>
<input type="submit" name="button" value="UPDATE">
</form>
</body>
</html>

Here's how the MYSQL DB is set for the next QUERY

Company_Name  varchar(45)
Manager       varchar(45)
Phone         varchar(45)
Contacted     tinyint(1)
Pitched       tinyint(1)
Interested    tinyint(1)

Here's the Test.QUERY.php Page

<?php include_once '../conn.php';?>
<?php
try {
  $conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
}
catch(PDOException $e) {
    echo $e->getMessage();
}
$return_arr = array();

if ($conn)
{
    $ac_term = "%".$_GET['term']."%"; 
    $query = "SELECT
Company_Name, Manager, Phone, Contacted, Pitched, Interested,
CONCAT_WS(' ', Company_Name, Manager, Phone) AS autoNameShow
FROM CustomerList
WHERE `Company_Name` LIKE :term
    OR `Manager` LIKE :term
    OR `Phone` LIKE :term
";
    $result = $conn->prepare($query);
    $result->bindValue(":term",$ac_term);
    $result->execute(); 

    while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
        
        $row_array['value'] = $row['autoNameShow'];
        $row_array['Company_Name'] = $row['Company_Name'];
        $row_array['Manager'] = $row['Manager'];
        $row_array['Phone'] = $row['Phone'];    
        $row_array['Contacted'] = $row['Contacted'];
        $row_array['Pitched'] = $row['Pitched'];
        $row_array['Interested'] = $row['Interested'];

        array_push($return_arr,$row_array);
    }

}
$conn = null;
echo json_encode($return_arr);
?>

So, the million dollar question is..... What did I do wrong & how should I fix it?

EDIT from Suggestion.

QUERY PAGE

<?php include_once '../conn.php';?>
<?php
try {
  $conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
}
catch(PDOException $e) {
    echo $e->getMessage();
}

$return_arr = array();

if ($conn)
{
    $ac_term = "%".$_GET['term']."%"; 
    $query = "SELECT
Company_Name, Manager, Phone, Contacted, Pitched, Interested,
CONCAT_WS(' ', Company_Name, Manager, Phone) AS autoNameShow
FROM CustomerList
WHERE `Company_Name` LIKE :term
    OR `Manager` LIKE :term
    OR `Phone` LIKE :term
";
    $result = $conn->prepare($query);
    $result->bindValue(":term",$ac_term);
    $result->execute(); 

    while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $return_arr[] = array(
        'value' => $row['autoNameShow'],
        'Company_Name' => $row['Company_Name'],
        'Manager' => $row['Manager'],
        'Phone' => $row['Phone'],
        'Contacted' => $row['Contacted'],
        'Pitched' => $row['Pitched'],
        'Interested' => $row['Interested'],
  
    );
}}
$conn = null;
echo json_encode($return_arr);
?>

autocomplete page

<?php include '../_includes/jq.inc.php';?>
<html>
<head>
<script type="text/javascript">
var $form = $('#my_form');

$(function() { 
    $('#Company_Name').val("");
    $('#Manager').val("");
    $('#Phone').val("");
    $('#Contacted').val("");
    $('#Pitched').val("");
    $('#Interested').val("");
    
    $('#autoSearch').autocomplete({
    source: 'Test.QUERY.php',
    minLength: 2,
    select: function(event, ui) {
        $form.find('input').val('');
        $form.find('input[type="checkbox"]').attr('checked', '');

        $('#Company_Name').val(ui.item.Company_Name);
        $('#Manager').val(ui.item.Manager);
        $('#Phone').val(ui.item.Phone);

        if (ui.item.Contacted) { $('#Contacted').attr('checked', 'checked'); }
        if (ui.item.Pitched) { $('#Pitched').attr('checked', 'checked'); }
        if (ui.item.Interested) { $('#Interested').attr('checked', 'checked'); }
    }
});
});

</script>
</head>
<body>
<form action="<?php echo $PHP_SELF;?>"  method="post">SEARCH:
<input type="text" id="autoSearch" size="60" onClick="this.form.reset()"/>
</form>
<form method="POST" name="form" id="my_form">
<input type="text" name="Company_Name" id="Company_Name">Company Name<br>
<input type="text" name="Manager" id="Manager">Manager<br>
<input type="text"  name="Phone" id="Phone">Phone<br>
Contacted<input type="checkbox" name="Contacted" id="Contacted"><br>
Pitched<input type="checkbox" name="Pitched" id="Pitched"><br>
Interested<input type="checkbox" name="Interested" id="Interested">
<br>
<input type="submit" name="button" value="UPDATE"> 
</form>
</body>
</html>

Still getting all the boxes checked.

What am I doing wrong?

Also posting the JSON return data.

[{"value":"Company Test 1 Manager Test 1 111-111-1111","Company_Name":"Company Test 1","Manager":"Manager Test 1","Phone":"111-111-1111","Contacted":"0","Pitched":"0","Interested":"0"},{"value":"Company Test 2 Manager Test 2 222-222-2222","Company_Name":"Company Test 2","Manager":"Manager Test 2","Phone":"222-222-2222","Contacted":"0","Pitched":"1","Interested":"1"},{"value":"Company Test 3 Manager Test 3 333-333-3333","Company_Name":"Company Test 3","Manager":"Manager Test 3","Phone":"333-333-3333","Contacted":"0","Pitched":"0","Interested":"1"},{"value":"Company Test 4 Manager Test 4 444-444-4444","Company_Name":"Company Test 4","Manager":"Manager Test 4","Phone":"444-444-4444","Contacted":"1","Pitched":"0","Interested":"1"},{"value":"Company Test 5 Manager Test 5 555-555-5555","Company_Name":"Company Test 5","Manager":"Manager Test 5","Phone":"555-555-5555","Contacted":"0","Pitched":"1","Interested":"1"},{"value":"Company Test 6 Manager Test 6 666-666-6666","Company_Name":"Company Test 6","Manager":"Manager Test 6","Phone":"666-666-6666","Contacted":"1","Pitched":"0","Interested":"1"},{"value":"Company Test 7 Manager Test 7 777-777-7777","Company_Name":"Company Test 7","Manager":"Manager Test 7","Phone":"777-777-7777","Contacted":"0","Pitched":"1","Interested":"1"},{"value":"Company Test 8 Manager Test 8 888-888-8888","Company_Name":"Company Test 8","Manager":"Manager Test 8","Phone":"888-888-8888","Contacted":"1","Pitched":"0","Interested":"1"},{"value":"Company Test 9 Manager Test 9 999-999-9999","Company_Name":"Company Test 9","Manager":"Manager Test 9","Phone":"999-999-9999","Contacted":"0","Pitched":"1","Interested":"0"},{"value":"Company Test 10 Manager Test 10 000-000-0000","Company_Name":"Company Test 10","Manager":"Manager Test 10","Phone":"000-000-0000","Contacted":"1","Pitched":"0","Interested":"1"}]

Upvotes: 2

Views: 457

Answers (6)

RCE
RCE

Reputation: 1721

Here's a more compact version of the solution you came up with.

select: function(event, ui) {
    $('#Company_Name').val(ui.item.Company_Name);
    $('#Manager').val(ui.item.Manager);
    $('#Phone').val(ui.item.Phone);

    $('#Contacted').prop('checked', ui.item.Contacted == '1');
    $('#Pitched').prop('checked', ui.item.Pitched == '1');
    $('#Interested').prop('checked', ui.item.Interested == '1');
}

Upvotes: 0

Highway of Life
Highway of Life

Reputation: 24411

When you are selecting a value from the autocomplete list, You’re automatically checking all three checkboxes regardless of the value that is returned.

You’ll want to use something like:

var $form = $('#my_form');

$('#autoSearch').autocomplete({
    source: 'Test.QUERY.php',
    minLength: 2,
    select: function(event, ui) {
        $form.find('input').val('');
        $form.find('input[type="checkbox"]').attr('checked', '');

        $('#Company_Name').val(ui.item.Company_Name);
        $('#Manager').val(ui.item.Manager);
        $('#Phone').val(ui.item.Phone);

        if (ui.item.Contacted == "1") {
            $('#Contacted').attr('checked', 'checked');
        }

        if (ui.item.Pitched == "1") {
            $('#Pitched').attr('checked', 'checked');
        }

        if (ui.item.Interested == "1") {
            $('#Interested').attr('checked', 'checked');
        }
    }
});

Your form would need an ID:

<form method="POST" name="form" id="my_form">
    <input type="text" name="Company_Name" id="Company_Name"> Company Name<br />
    ...
</form>

A minor note on your PHP code, you can use the following code to assing to the $return_arr array rather than using array_push.

while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $return_arr[] = array(
        'value' => $row['autoNameShow'],
        'Company_Name' => $row['Company_Name'],
        'Manager' => $row['Manager'],
        'Phone' => $row['Phone'],
        // ... etc
    );
}

Upvotes: 1

Monty
Monty

Reputation: 1322

Thank you all for your suggestions! Here's what I came up with from them all.

select: function(event, ui) {
  $('#Company_Name').val(ui.item.Company_Name);
  $('#Manager').val(ui.item.Manager);
  $('#Phone').val(ui.item.Phone);
     
 if (ui.item.Contacted == "1") {
  $('#Contacted').prop('checked', true);
 } else {
  $('#Contacted').prop('checked', false);
 }
 if (ui.item.Pitched == "1") {
  $('#Pitched').prop('checked', true);
 } else {
  $('#Pitched').prop('checked', false);
 }
 if (ui.item.Interested == "1") {
  $('#Interested').prop('checked', true);
 } else {
  $('#Interested').prop('checked', false);
 }
}

Now that is works, any ideas on how to make it more compact? :) Thanks Again!

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34196

Modify your autocomplete to pick out the checkbox items instead of setting them to checked:

$(function() {
    $('#Company_Name').val("");
    $('#Manager').val("");
    $('#Phone').val("");
    $('#Contacted')[0].checked = false;
    $('#Pitched')[0].checked = false;
    $('#Interested')[0].checked = false;
    $("#autoSearch").autocomplete({
                source: "Test.QUERY.php",
                minLength: 2,
                select: function(event, ui) {
                        $('#Company_Name').val(ui.item.Company_Name);
                        $('#Manager').val(ui.item.Manager);
                        $('#Phone').val(ui.item.Phone);
                        $('#Contacted')[0].checked = ui.item.Contacted;
                        $('#Pitched')[0].checked = ui.item.Pitched;
                        $('#Interested')[0].checked = ui.item.Interested;
                }
    });
});

My assumption here is that the ui.item.Contacted etc contain the true/false values. You could put a console.log(ui.item.Company_name+ ":"+ui.item.Contacted); in the select to test those values or simply alert(ui.item.Company_name+ ":"+ui.item.Contacted);

Upvotes: 0

Leo
Leo

Reputation: 5286

You explicitly check all your checkboxes with this code :

$('#Contacted').attr("checked", true);
$('#Pitched').attr("checked", true);
$('#Interested').attr("checked", true);

It's actually normal that what you are "getting right now is all the boxes checked".

Upvotes: 0

Darcy
Darcy

Reputation: 5368

If you are using jquery 1.6 or higher, you need to use .prop for checkboxes instead of .attr. If you MUST use .attr, the correct syntax is .attr('checked', 'checked')

Upvotes: 0

Related Questions