CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
arame3333
arame3333

Reputation: 10193

Cannot use JQuery to remove contents of a search textbox

On my screen I search for a contract and when I select it I get the associated data for the contract. Once I have selected a contract, I want the contract title to render elsewhere further down the page. I can do that, but the contract title is also rendered in the search text box, and I do not want that. So in my code I have;

    <div class="col-md-12">
        <span style="margin-right: 10px;">Find a Contract</span>
        <span style="margin-right: 50px;">
            <input type="search" id="searchtermContract" class="contractTitle"
                   data-msurvey-autocomplete="@Url.Action("Contract", "Autocomplete")"
                   data-msurvey-autocomplete-update-id="#ContractId"
                   data-msurvey-autocomplete-update-label="#ContractTitle1" 
                   data-msurvey-populate-search-textbox-flag="N"/>
        </span>
        <input type="button" id="ResetContract" value="Reset"
               style="margin-left: -40px;"
               class="btn-mulalley btn-xs reset"
               data-msurvey-reset-field="#searchtermContract"
               data-msurvey-reset-id="#ContractId" />
        <input type="hidden" id="ContractId" name="ContractId" />
        <input type="hidden" id="ContractTitle1" name="ContractTitle1" />
    </div>
</div>
<div id="propertiesForContract">

</div>

In my javascript I have

var getPropertiesForContract = function (contractId) {
    var url = GetHiddenField("msurvey-get-properties-for-contract-url").replace(/__ID__/, contractId);
    $('#propertiesForContract').load(url);
    // TODO this line is not working
    $("#searchtermContract").val("");
};

And in developer tools for IE, it shows that the searchtermContract does not have a value, yet the selected contract still get displayed. Why is this?

<input class="contractTitle ui-autocomplete-input" id="searchtermContract" type="search" data-msurvey-autocomplete-update-label="#ContractTitle1" data-msurvey-autocomplete-update-id="#ContractId" data-msurvey-autocomplete="/(S(jdfx1zrfoqjcrsyb0ltueuyp))/Autocomplete/Contract" data-msurvey-populate-search-textbox-flag="N" autocomplete="off">

Upvotes: 0

Views: 48

Answers (2)

Bon Macalindong
Bon Macalindong

Reputation: 1320

The jquery load() function is asynchronous in nature, meaning all codes below your call to load() will run immediately even though the load() is not finished yet. You may use the complete callback function of the load() jquery function so that your code in the callback will run once the load() function is completed. Do some reading on http://api.jquery.com/load/

Upvotes: 1

user3559349
user3559349

Reputation:

The jQuery.load() is async so while its calling the server and returning the results, your $("#searchtermContract").val(""); line of code has already run (it sets the value to null but then its overwritten by the results of the load() method. Instead change you code to

$('#propertiesForContract').load(url, function() {
   $("#searchtermContract").val("");
});

so that you set the value in the callback

Upvotes: 1

Related Questions