Reputation: 2097

passing a variable into a function

Title may make this question seem simpler than it really is. First off, my knowledge, familiarity and skill levels with jQuery is shaky at best, so chances are i'm just trying to go about something in a stupid way that would only make sense to a noob.

I have a php generated page that builds a bunch of text fields based on external data. These fields are to be converted to kind of a hybrid jQuery UI Autocomplete/Combobox field (like a combo but allows free text). I'm stuck when trying to assign the .click(function(...)) to the dropdown button and I believe it has to do witht the fact that I'm executing the jQuery to convert all of the textfields via a for loop and var i isn't being properly passed into the .click function.

Here is the full test page that I'm working with (almost all of the HTML and js arrays will be generated via 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>

Any help would be greatly appreciated.

Edit: Sorry I forgot to add that i'm getting "Error: input[i] is undefined Line: 62"

Upvotes: 0

Answers (2)

jreed121

Reputation: 2097

Finally got it figured out, well sort of. I had a feeling that the following workaround would work, however I was kind of hoping that there would be a more elegant way of doing this.

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

And I also gave the button a unique name to correspond with the field...

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

Thanks for the help guys.

Upvotes: 0

Emre Erkan

Reputation: 8482

Ok. I updated my answer after new source code.

Give it a try.

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

Upvotes: 1

passing a variable into a function

Answers (2)

Related Questions