Javascript: перемещение JQuery и т. Д. 1002 *. CDN из файла HTML? - PullRequest
Новая
       5

Javascript: перемещение JQuery и т. Д. 1002 *. CDN из файла HTML?

0 голосов
/ 09 апреля 2020

(я новичок в HTML / JS). Я пытаюсь очистить свой файл HTML до полной разметки и поместить все логики c в файл. js, включая включения CDN. Мне известно о Как включить CDN в javascript файл (*. js)?

В HTML ниже я попытался переместить 2 'sr c 'строк внизу, до form_validation. js, также показано ниже. Но когда я это делаю, проверка формы пользовательского интерфейса Semanti c перестает работать, и я получаю сообщения об ошибках, что .form не является функцией et c. Этот вызов addCDN () в файле JS этого не делает.

Я полагаю, это связано со мной, не понимая порядок, в котором эти вещи обрабатываются браузером ... Я бы очень ценим немного образования. 

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <style>.container {margin: 15em;}</style>
</head>
<body>
    <div class="container">
    <form class="ui form">
        <p>Give this a try:</p>
        <div class="field">
            <label>Name</label>
            <input placeholder="Your Name?" name="name" type="text">
        </div>
        <div class="ui submit button">Submit</div>
        <div class="ui error message"></div>
    </form>
    </div>

    <!-- get these guys out-a-here -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <!-- ..... -->

    <script src="form_validation.js"></script>
</body>
</html>

/*
 * form_validation.js
 * Uses Semantic UI validation JSON
 */

function addCDN(){
    // Can be removed? Ideally not in the HTML file...
    var jq = document.createElement('script');
    jq.setAttribute('src',
        'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'
    );  
        document.head.appendChild(jq);

    var sui = document.createElement('script');
    sui.setAttribute('src',
        'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js'
    );  
        document.head.appendChild(sui);
}

$(document).ready(function(){
    addCDN();   // this doesn't seem to happen :(
    $('.ui.form').form({
            fields: {name : ['minLength[6]', 'empty']}
        }); 
});```
...