передавая переменную в функцию - PullRequest
Новая
       3

передавая переменную в функцию

0 голосов
/ 03 мая 2011

Название может сделать этот вопрос проще, чем есть на самом деле. Во-первых, мои знания, уровень знаний и навыков в jQuery в лучшем случае шатки, так что, скорее всего, я просто пытаюсь сделать что-то глупое, что имеет смысл только для нуба.

У меня есть страница, сгенерированная php, которая строит несколько текстовых полей на основе внешних данных. Эти поля должны быть преобразованы в гибридное поле jQuery UI Autocomplete / Combobox (как комбо, но допускает свободный текст). Я застрял при попытке назначить .click (function (...)) на кнопку выпадающего меню, и я считаю, что это связано с тем, что я выполняю jQuery для преобразования всех текстовых полей через цикл for и var i неправильно передается в функцию .click.

Вот полная тестовая страница, с которой я работаю (почти все массивы HTML и js будут создаваться с помощью php): 

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" href="../includes/css/redmond/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="../includes/jquery-1.5.js"></script>
    <script type="text/javascript" src="../includes/jquery-ui-1.8.10.custom.min.js"></script>
        <style>
    .ui-button { margin-left: -1px;width:18px; }
    .ui-button-icon-only .ui-button-text { padding: 0; }
    button.ui-button-icon-only {width:18px;height:21px;}
    .ui-autocomplete-input { margin: 0; padding: 0; }
    </style>
</head>
<body>
    <form method="post" action="results.php">
    <input class="TC_1" type="text" name="TC_1_1" value="E02_04" />
    <script>
          var availableTags = [['test1','test2','test3']];
    </script>
    <br/>
    <input class="TC_1" type="text" name="TC_2_1" />
    <script>
          availableTags.push (['test5','test7','test9']);
    </script>
    <input type="submit" />
    </form>
    <script type='text/javascript'>
  //<![CDATA[
  var input = new Array();
var i = 1;

$('.TC_1').each(function(index) {

input[i] = $("[name=TC_"+i+"_1]").autocomplete({
    source: availableTags[i-1],
    select: function(){alert("selected");},
    minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");


$("<button type='button'>&nbsp;</button>")
    .attr("tabIndex", -1)
    .attr("title", "Show All Items")
    .insertAfter(input[i])
    .button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    })
    .removeClass("ui-corner-all")
    .addClass("ui-corner-right ui-button-icon")
    .click(function() {
    var $input = $(this).before();
    if ($input.autocomplete("widget").is(":visible")) {
        $input.autocomplete( "close" );
        return;
    }
    $(this).blur();
    $input.autocomplete("search", "" );
    $input.focus();
});

    i++;
});
  //]]>
  </script>
</body>
</html>

Любая помощь будет принята с благодарностью.

Редактировать: Извините, я забыл добавить, что я получаю "Ошибка: input [i] не определен Линия: 62 "

Ответы [ 2 ]

1 голос
/ 03 мая 2011

Хорошо. Я обновил свой ответ после нового исходного кода.

Дайте ему попытку. 

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" href="../includes/css/redmond/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="../includes/jquery-1.5.js"></script>
    <script type="text/javascript" src="../includes/jquery-ui-1.8.10.custom.min.js"></script>
    <style type="text/css">
    .ui-button { margin-left: -1px;width:18px; }
    .ui-button-icon-only .ui-button-text { padding: 0; }
    button.ui-button-icon-only {width:18px;height:21px;}
    .ui-autocomplete-input { margin: 0; padding: 0; }
    </style>
</head>
<body>
    <form method="post" action="results.php">
      <input class="TC_1" type="text" name="TC_1_1" value="E02_04" />
      <br/>
      <input class="TC_1" type="text" name="TC_2_1" />
      <input type="submit" />
    </form>
    <script type="text/javascript">
      //<![CDATA[
      $('.TC_1').each(function(i) {
        var availableTags = [];
        availableTags.push(['test1','test2','test3']);
        availableTags.push(['test5','test7','test9']);

        $(this).autocomplete({
          source: availableTags[i],
          select: function(){alert("selected");},
          minLength: 0
        }).addClass("ui-widget ui-widget-content ui-corner-left");

        $("<button type='button'>&nbsp;</button>")
          .attr("tabIndex", -1)
          .attr("title", "Show All Items")
          .insertAfter(this)
          .button({
              icons: {
                  primary: "ui-icon-triangle-1-s"
              },
              text: false
          })
          .removeClass("ui-corner-all")
          .addClass("ui-corner-right ui-button-icon")
          .click(function() {
            var $input = $(this).prev();
            $input.autocomplete("destroy");
            $input.val("search").select();
          });
      });
      //]]>
  </script>
</body>
</html>
0 голосов
/ 03 мая 2011

Наконец-то разобрался, ну вроде.У меня было ощущение, что следующий обходной путь подойдет, однако я надеялся, что будет более элегантный способ сделать это. 

    .click(function() {

//Get the name for the target field:
var target = $(this).attr('id');
target = target.substr(3);

    // close if already visible
    if ($("[name=TC_"+target+"]").autocomplete("widget").is(":visible")) {
    $("[name=TC_"+target+"]").autocomplete( "close" );
         return;
    }
    $(this).blur();
    $("[name=TC_"+target+"]").autocomplete("search", "" ); //where the error occurs
    $("[name=TC_"+target+"]").focus();
});

И я также дал кнопке уникальное имя, которое будет соответствоватьполе ... 

$("<button id='bt_"+i+"_1' type='button'>&nbsp;</button>")

Спасибо за помощь, ребята.

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

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

...