Question

我正在研究Laravel项目。在刀片视图中，我有一个像这样的Javascript函数：

<script type="text/javascript">

        function autoFill (dropDown, emptyDropDown) {
            $("#" + dropDown ).change(function() { 

                $.ajax({
                    type: "GET",
                    url: "https://api.myjson.com/bins/bcnss",

                    success: function(response){

                        var dataLength = response.length;

                        $("#" + emptyDropDown).empty();

                        $("#" + emptyDropDown).append("<option value=''>Select</option>");
                        for( var i = 0; i< dataLength; i++){
                            var id = response[i].id;
                            var name = response[i].name;
                            $("#" + emptyDropDown).append("<option value='"+id+"'>" + name + " </option>");
                        }                 
                    }
                });
            });
        }

    </script>

然后，我在body标签中调用此函数，并将两个php参数传递给它：

<?php echo "<script> autoFill('$dropDown', '$emptyDropDown'); </script>"; ?>

但是当我运行它时，出现了一个错误：“未捕获的ReferenceError：未定义autoFill”。

如果需要，这是我在刀片视图中的完整代码：

<body>
        <div class="flex-center position-ref full-height">

            <div class="content">
                <div class="title m-b-md">
                    Activiti Form
                </div>

            @if(isset($formDataResult) && isset($dropdownValue))

                <div class="links">
                    <form action="{{ url('handle-form') }}" method="POST">
                            <!--Loop form data and call components to render form-->
                            @foreach($formDataResult as $formDataValue)
                                <div class="links">   
                                        
                                    @if($formDataValue['type'] == 'select')

                                        @if(array_key_exists('description',$formDataValue))

                                            <?php
                                                $dropDown = $formDataValue['name']
                                            ?>
                                        
                                            @component('components/InputSelect',[
                                                'name' =>   $formDataValue['label'],
                                                'id' => $formDataValue['name'],
                                                'enumData' => $dropdownValue
                                            ])
                                            @endcomponent

                                        @else

                                            <?php
                                                $emptyDropDown = $formDataValue['name'];
                                            ?>

                                            @component('components/EmptyInputSelect',[
                                                'name' =>   $formDataValue['label'],
                                                'id' => $formDataValue['name']
                                            ])
                                            @endcomponent

                                        @endif

                                    @elseif($formDataValue['type'] == 'text')

                                        @component('components/InputText',[
                                            'name' => $formDataValue['label'],
                                            'id' => $formDataValue['name'],
                                            'type'=>$formDataValue['type']
                                        ])
                                        @endcomponent

                                    @endif
                                    <br>
                                </div>
                            @endforeach

                            <?php echo "<script> autoFill('$dropDown', '$emptyDropDown'); </script>"; ?>

                            <!--Hidden input to store task id-->
                            @component('components/HiddenInput',[
                                    'id' => $taskId
                                ])
                            @endcomponent  
                             
                        <div>
                            <input type="reset" value="Reset Form">
                            <button type="submit">Complete Task</button>
                        </div>
                    </form>
                </div>
                <!--If don't have form data, show error alert-->
                @else
                    <div class="alert">
                        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
                        <strong>Notice!</strong> There are no tasks at this moment! 
                    </div>
                @endif
            </div>
        </div>
    </body>

    <script type="text/javascript">

        function autoFill (dropDown, emptyDropDown) {
            $("#" + dropDown ).change(function() { 

                $.ajax({
                    type: "GET",
                    url: "https://api.myjson.com/bins/bcnss",
                                              
                    success: function(response){
                        
                        var dataLength = response.length;
                        
                        $("#" + emptyDropDown).empty();
                    
                        $("#" + emptyDropDown).append("<option value=''>Select</option>");
                        for( var i = 0; i< dataLength; i++){
                            var id = response[i].id;
                            var name = response[i].name;
                            $("#" + emptyDropDown).append("<option value='"+id+"'>" + name + " </option>");
                        }                 
                    }
                });
            });
        }
        
    </script>

我该如何解决？

非常感谢您！

Answer 1

您正在尝试在定义函数之前调用该函数。将<script type="text/javascript">...</script>定义函数{em>之前放在试图调用它的<script> autoFill('$dropDown', '$emptyDropDown'); </script>之前。

Answer 2

您可以阅读js值以使用PHP。但是您可以将js值打印到HTML屏幕上。

您有一个<span>或<div>属性的class或id标签，然后可以将值放在其中。

这是您的js功能

<script>

    // whatever value you need in your js from PHP. you need to below code.

    let dropdown = <?php echo $dropDown; ?>
    let emptyDropdown = <?php echo $emptyDropDown; ?>


    // now pass your js variables here.
    function autoFill (dropDown, emptyDropDown) {
        $("#" + dropDown ).change(function() { 

            let $this = $(this);

            $.ajax({
                type: "GET",
                url: "https://api.myjson.com/bins/bcnss",

                success: function(response){

                    var dataLength = response.length;

                    $("#" + emptyDropDown).empty();

                    $("#" + emptyDropDown).append("<option value=''>Select</option>");
                    for( var i = 0; i< dataLength; i++){
                        var id = response[i].id;
                        var name = response[i].name;
                        $("#" + emptyDropDown).append("<option value='"+id+"'>" + name + " </option>");
                    }
                }
            });
        });
    }
</script>

在PHP Laravel中调用Js函数时未定义函数

2 个答案: