не могу заставить JQUERY .autocomplete правильно работать с .attr - PullRequest
Новая
       1

не могу заставить JQUERY .autocomplete правильно работать с .attr

2 голосов
/ 25 октября 2011

Я хожу по кругу по этому вопросу. Я новичок в JQUERY, и пока это круто! Я просмотрел тонны вещей в Интернете и здесь в ответах на вопросы, но я не смог найти правильный ответ. Прямо сейчас я убиваю себя, пытаясь понять, что я делаю неправильно. .Autocomplete отлично работает с основными вещами, такими как возвращение мне строки из базы данных MYSQL и ввод ее в форме, как я хочу. Но у меня проблема с возвращением логического значения и установкой флажка с этим значением. Сейчас я получаю все флажки, даже если значение равно 0.

Вот мой код .autocomplete. 

<?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>

Вот как устанавливается база данных MYSQL для следующего запроса QUERY 

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

Вот страница Test.QUERY.php 

<?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);
?>

Итак, вопрос на миллион долларов ..... Что я сделал не так и как мне это исправить?

РЕДАКТИРОВАТЬ из предложения.

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);
?>

страница автозаполнения 

<?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>

Все еще отмечены все флажки.

Что я делаю не так?

Также публикуем данные возврата JSON. 

[{"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"}]

Ответы [ 6 ]

1 голос
/ 27 октября 2011

Спасибо всем за ваши предложения! Вот что я из них придумала. 

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);
 }
}

Теперь, когда все работает, есть идеи, как сделать его более компактным? :) Еще раз спасибо!

1 голос
/ 25 октября 2011

Когда вы выбираете значение из списка автозаполнения, вы автоматически устанавливаете все три флажка независимо от возвращаемого значения.

Вы хотите использовать что-то вроде: 

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');
        }
    }
});

Для вашей формы потребуется идентификатор: 

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

Небольшое примечание к вашему PHP-коду, вы можете использовать следующий код для доступа к массиву $ return_arr вместо использования 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
    );
}
0 голосов
/ 12 декабря 2011

Вот более компактная версия решения, которое вы придумали . 

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');
}
0 голосов
/ 25 октября 2011

Измените свое автозаполнение, чтобы выбрать элементы-флажки вместо того, чтобы устанавливать их на флажки: 

$(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;
                }
    });
});

Я предполагаю, что ui.item.Contacted и т. Д. Содержат значения true / false.Вы можете поместить console.log(ui.item.Company_name+ ":"+ui.item.Contacted); в выборку для проверки этих значений или просто alert(ui.item.Company_name+ ":"+ui.item.Contacted);

0 голосов
/ 25 октября 2011

Вы явно отмечаете все свои флажки с этим кодом: 

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

На самом деле это нормально, что то, что вы «получаете сейчас, это все флажки отмечены».

0 голосов
/ 25 октября 2011

Если вы используете jquery 1.6 или выше, вам нужно использовать .prop для флажков вместо .attr.Если вы ДОЛЖНЫ использовать .attr, правильный синтаксис будет .attr('checked', 'checked')

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...