certain letters cause error in plugin

josh's Avatar

josh

19 Sep, 2012 08:59 PM

I have found what seems to me to be a strange issue. I am using version 1.4 of the plugin, the minified version. For the most part, everything works just fine -- the plugin has actually been in production (low use) for some months now. The issue, just found, is as follows:

If anyone types an 'n' or a 'u' as the first character, the plugin errors out and ceases to work. (Other letters are not a problem.) When this occurs, Firebug reports the following error: "TypeError: this_data[opts_selectedItemProp] is null"

I'm baffled as to why this would occur with only these letters. Also, if a user types these letters after some other characters, it works fine. For instance, "anull" works fine. Anyone have any ideas? Thanks in advance.

  1. 1 Posted by Jon on 20 Sep, 2012 06:12 AM

    Jon's Avatar

    I use the same version (with some modifications) and it works fine with those letters.

    opts_selectedItemProp or opts.selectedItemProp?

  2. 2 Posted by josh on 20 Sep, 2012 01:39 PM

    josh's Avatar

    Thanks for the reply. And yes, I did mean opts.selectedItemProp. But in any case, I found a partial resolution for the issue. It turns out that my data set had some null values (by design) in one of the fields that was being used for autoSuggest. So, it seems that the "NULL" values were somehow interacting with the n and u letters to cause the problem. I've filtered out the null values from my query and now n and u work normally.

    That said, a somewhat similar issue occurs if I type a '?' as the first character. If I do so, the input field disappears, though Firebug doesn't report an error in this instance. This isn't as urgent, but it would be nice to figure out why this occurs too.

  3. 3 Posted by Jon on 21 Sep, 2012 12:07 PM

    Jon's Avatar

    I have no problem if I type '?' as the first character, so I think the problem is not on the autosuggest plugin.

    If you could post your code here maybe we could figure out where the problem is.

  4. 4 Posted by josh on 21 Sep, 2012 07:56 PM

    josh's Avatar

    Hi Jon,

    Here is what I believe are the relevant portions (by the way, I didn't make any changes to the autoSuggest code itself):

    //jQuery script

    $(function () {
            $.getJSON("../Discrepancies/prepareDiscrepancySearchBox", {},
                function (discrepDescriptions) {
                    $("#discrepancyDescription").autoSuggest(discrepDescriptions,
                         { selectedItemProp: "Description", searchObjProps: "Description",
                             selectionLimit: 1, startText: "Search for an existing discrepancy",
                             limitText: "Now click the appropriate button to assign/select the chosen discrepancy, or remove the chosen discrepancy and choose another.",
                             asHtmlID: "discrepIDs",
                             resultClick: function (data) {
                                 $("#discrepancyID").val(data.attributes.value);
                             }
                         });
                })
        });
    

    //in the Controller:

    public JsonResult prepareDiscrepancySearchBox()
            {
                var discrepDescriptions = from d in db.Discrepancies
                                          where d.DiscrepancyDescription != null
                                          select new { value = d.DiscrepancyID, Description = d.DiscrepancyDescription };
    
                return Json(discrepDescriptions, JsonRequestBehavior.AllowGet);
            }
    

    //in the View:

    <div id="DiscrepancySelector" title="Select a Discrepancy">
            @using (Html.BeginForm("Index", "Discrepancies", FormMethod.Post))
            {
                    <p>Type a keyword or phrase in the Description box to search for an existing discrepancy.  Once you locate 
                    the appropriate discrepancy, click "Assign Discrepancy to Time Series Pair".  If you cannot find an 
                    appropriate discrepancy, then click "Create New Discrepancy"</p>
                <fieldset>
                    <legend>Discrepancy ID</legend>
                    <input type="text" id="discrepancyID" disabled />
                    <br />
                    <legend>Description</legend>
                    <input type="text" id="discrepancyDescription" size="120px"/>
                    <br /><br />
                    @if ((bool)Session["isAssociatedDiscrep"])
                    {
                        <input type="button" value="Assign Discrepancy to Time Series Pair" id="assignDiscrep" />
                    }
                    else
                    {
                        <input type="button" value="Select Discrepancy" id="selectDiscrep" />
                    }
                    <input type="button" onclick="location.href = '../Discrepancies/Index'" value="Create New Discrepancy" />
                    <input type="button" onclick="location.href = '../Home/Index'" value="Cancel" />
                </fieldset>
            }
        </div>
    

    Thanks for the help.

  5. 5 Posted by Jon on 24 Sep, 2012 06:50 AM

    Jon's Avatar

    I don't know what's wrong with your code. It could be:

    -the way you (or the framework) build the form.

    -the way the data for the autosuggest input field is obtained.

    Neither of them makes much sense. I would try to work on the second option, something like:

    $("#discrepancyDescription").autoSuggest("../Discrepancies/prepareDiscrepancySearchBox", { 
        selectedItemProp: "Description", 
        searchObjProps: "Description",
        selectionLimit: 1,
        startText: "Search for an existing discrepancy",
        limitText: "Now click the appropriate button to assign/select the chosen discrepancy, or remove the chosen discrepancy and choose another.",
        asHtmlID: "discrepIDs",
        resultClick: function (data) {
            $("#discrepancyID").val(data.attributes.value);
        }
    });
    

    This way you are making a lot more ajax requests to the server (everytime the user types a character).

  6. 6 Posted by josh on 24 Sep, 2012 02:58 PM

    josh's Avatar

    I tried reformatting my jQuery to match what you suggested above. It doesn't seem to have made any noticeable difference. The code still works, but a '?' will cause the text box to disappear, as before. I wonder if it has something to do with my data set, though I don't know exactly what it would be.

    I didn't quite get what you meant by "This way you are making a lot more ajax requests to the server". Did you mean your suggestion would result in more ajax requests? And is that a good thing?

  7. 7 Posted by Jon on 25 Sep, 2012 06:17 AM

    Jon's Avatar

    Yes, with your code you were making one ajax request to obtain your data, and once you've got it an instance of autosuggest is made filled with that data.

    With my suggestion the data is on '../Discrepancies/prepareDiscrepancySearchBox' page, and everytime the user types a character an ajax request is made.

    Is that a good thing? It depends on your data set. If it's large I would use the code I suggested (one large ajax request vs several little ones), and if the administrator adds some elements to that data set the user wouldn't have to refresh the page. If it isn't large and you don't change the data very often I would choose your code.

    I suggested that solution to see if the problem could have been in the way you call the autosuggest plugin. That was the only difference between your code and mine (apart from the data set and that I'm using php).

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac