无法使用jquery清除值

时间:2016-03-28 12:35:05

标签: javascript jquery jquery-select2 select2

<apex:page standardController="account" id="page">
    <apex:includeScript value="//cdn.jsdelivr.net/jquery/1.7/jquery.min.js" />
    <apex:includeScript value="//cdn.jsdelivr.net/jquery.colresizable/1.3/colResizable.min.js" />
    <apex:includeScript value="{!URLFOR($Resource.JqueryA, 'js/jquery-ui-1.8.16.custom.min.js')}" />
    <!-- <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
            <apex:includeScript value="{!URLFOR($Resource.select2, 'select2/select2.js')}"/>-->

    <apex:form id="form1">
        <br />
        <apex:outputpanel id="counter1">
            <apex:pageBlock id="block1">
                <apex:pageBlockSection id="section1">

                    <c:AutoCompleteV2 allowClear="true" id="d" importJquery="true" labelField="name" SObject="account" valuefield="name" targetField="{!account.name}" />
                </apex:pageBlockSection>
            </apex:pageBlock>
            <apex:commandButton reRender="none" value="Get value" />
            <b><a href="#" onClick="clearValue()"><apex:commandButton value="Reset" onclick="this.form1.reset();return true;" rerender="counter1"/></a> </b>
        </apex:outputpanel>
    </apex:form>
    <script type="text/javascript">
        function clearValue() {
            //alert($("input[id$='d']").val());
            $("input[id$='d']").val('');
        }
    </script>
</apex:page>

Visualforce组件:

<apex:component controller="AutoCompleteV2_Con" selfClosing="true">
    <apex:attribute name="SObject" description="SOQL Object to query" type="String" assignTo="{!sObjVal}" required="true" />
    <apex:attribute name="labelField" description="API Name of Field to display for label" type="String" required="true" assignTo="{!labelFieldVar}" />
    <apex:attribute name="valueField" description="API Name of Field to display for value that is passed to the targetField" type="String" required="true" assignTo="{!valueFieldVar}" />
    <apex:attribute name="targetField" description="Field of current object that will hold the selection." type="Object" assignTo="{!targetFieldVar}" />
    <apex:attribute name="inputFieldId" description="Id of the field where the value will copied[Not generally required, used when you need to copy value to a field using js]" type="String" />
    <apex:attribute name="importJquery" description="Assign false if you dont want to jquery files" type="Boolean" default="true" />
    <apex:attribute name="syncManualEntry" description="Allow manual entry of data from autocomplete component." type="Boolean" default="true" />
    <apex:attribute name="allowClear" description="Set true to give user a option to clear existing value" type="Boolean" default="true" />

    <apex:attribute name="Style" description="style for the input component" type="String" />
    <!--Required js files-->
    <apex:outputPanel rendered="{!importJquery}">
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
    </apex:outputPanel>
    <apex:includeScript value="{!URLFOR($Resource.select2, 'select2/select2.js')}" />
    <apex:stylesheet value="{!URLFOR($Resource.select2, 'select2/select2.css')}" />
    <script>
        var v2 {
            !randomJsIden
        }

        var prevVal {
            !randomJsIden
        };

        function autocompleteV2 {
            !randomJsIden
        }() {
            var v2 = this;
            jQuery(function($) { //on document.ready
                v2.init($)
            });
        }

        autocompleteV2 {
            !randomJsIden
        }.prototype = {
            init: function($) {

                var $elem = $(".auto{!randomJsIden}").select2({
                    minimumInputLength: 1,
                    placeholder: "No value selected",
                    allowClear: {!allowClear
                    },
                    query: function(query) {
                        queryData {
                            !randomJsIden
                        }(query);

                    },
                    createSearchChoice: function(term, data) {
                        if ({!syncManualEntry
                            } == true) {
                            return {
                                id: term,
                                text: term
                            };
                        }
                    }
                });

                $elem.on("select2-selecting", function(e) {

                    $('.hiddenField{!randomJsIden}').val(e.val);
                });

                $elem.on("select2-removed", function(e) {
                    $('.hiddenField{!randomJsIden}').val('');
                });



                if ('{!cacheField}' != '') {
                    $elem.select2("data", {
                        id: "{!targetFieldVar}",
                        text: "{!cacheField}"
                    })
                }

            },

            triggerSearch: function(val) {

                if (prevVal {
                        !randomJsIden
                    } != val) {
                    $ = jQuery;
                    prevVal {
                        !randomJsIden
                    } = val;
                    var select = $('input.auto{!randomJsIden}');
                    var search = $('.select2-input')
                    select.select2('open');
                    search.val(val);

                    search.trigger("input");
                }
            }
        }

        /*
         *This method queries data according to the passed parameter
         *and populates the combobox accordingly
         ***/
        function queryData {
            !randomJsIden
        }(query) {

            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.AutoCompleteV2_Con.getData}', '{!sObjVal}', '{!labelFieldVar}', '{!valueFieldVar}', query.term,
                function(result, event) {

                    //if success
                    if (event.status) {
                        var data = {
                            results: []
                        }
                        data.results = result;
                        query.callback(data);
                    } else {
                        alert('Invalid Field/Object API Name : ' + event.message);
                    }

                }, {
                    escape: true
                }
            );
        }
    </script>

    <apex:inputText style="{!Style}" styleClass="auto{!randomJsIden}" value="{!cacheField}" />

    <apex:outputPanel id="hiddenPanel">
        <apex:inputText value="{!targetField}" id="hiddenField" styleClass="hiddenField{!randomJsIden}" style="display:none" />
    </apex:outputPanel>
    <script>
        v2 {
            !randomJsIden
        } = new autocompleteV2 {
            !randomJsIden
        }({});
    </script>
</apex:component>

脚本:

<script type="text/javascript">
    function clearValue() {
        //alert($("input[id$='d']").val());
        $("input[id$='d']").val('');
    }
</script>

我能够获得价值但是,我无法清除价值。

我在后面的visualforce组件级别使用select2组件。

我在visualforce页面上使用visualforce组件显示自动完成功能.cant能够使用按钮重置值。

1 个答案:

答案 0 :(得分:0)

我使用了它并且它可以工作

$("input[id=d]").val("");

让我知道它是否适合你。