Tag Archives: bootstrap

When using bootstrap modal box, uncaught typeerror: $(…). Modal is not a function

When using bootstrap modal box, uncaught typeerror: $(…). Modal is not a function

Look at the official website code, found no error, and video source comparison also found no error

//Click the add button to pop up the add page
        $("#emp_add_modal_btn").click(function(){
            //clear form data
            
            //send ajax request to query department information and display it in the list

            // pop up the add page
            $("#empAddModal").modal({
                backdrop:false
            });
        });

It turns out that the introduction of jQuery is behind the bootstrap. Just put the JS introduction of jQuery behind the bootstrap

<script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
 <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
 <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

Using CEF as user interface

Learn this, you can use local files to achieve a pure HTML, JavaScript and CSS (bootstrap) based user interface, and use it to operate the system

1、 Create a new folder in the project: HTML resources. Then copy the bootstrap file directory structure and content into it. And set the copy to output directory value of these files to copy always

2、 To display and manipulate index.html In the interface. Add button button to execute with JavaScript. (cefcustomobject is an instance of the operation class later)

<button class="btn btn-info" onclick="cefCustomObject.showDevTools();"&>Open Chrome Dev Tools</button&>
  <button class="btn btn-primary" onclick="cefCustomObject.opencmd();"&>Open cmd.exe</button&>

3. Create a new operation class (user target class) (click the button to perform the operation.) For example, opencmd method: open the CMD process

4、 In the constructor (1 — 4 is the same as using CEF as the browser)::

1. Cefsetting instantiation settings

2. Use CEF to initialize settings

3. Instantiate the chromiumwebbrower object (locally located) index.html (file)

4. Load this object into the control and set it to fill

5. The browser builds objects to register JS events. Binding instantiates the operation class.

6. Some browser properties are set by browersettings. Assigned to the browser.

Git source code address:

https://gitee.com/HuLuMiaoMiao/SecondCefSharp

Reference (some changes are easy to understand and some mistakes are made)

https://ourcodeworld.com/articles/read/173/how-to-use-cefsharp-chromium-embedded-framework-csharp-in-a-winforms-application