How to use jquery in weweb io ( even in the editor :) )

Tutorials
1

Hello everyone, I needed to use jquery in my project, and I’m going to teach you how to load it on weweb io and how to use it (it even works in the editor)

We have two ways of using jquery, either you use it on an entire page, or you can use it on just one component, as was my case.

What changes this? The way to load jquery (the workflow trigger type)

Type 1: (use jquery in a component): you will use on created in the component

Type 2: (use jquery in a page): you will use page load

Loading jquery into the workflow:

  1. (Jquery) Use custom javascript and put:
  if(!window["scp-loading-fc193996-e272-479e-999c-aaaafe135e2d"]) {
    window["scp-loading-fc193996-e272-479e-999c-aaaafe135e2d"] = true;
    let doc;
    /* Adding script from https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js */
    doc = document.createElement('script');
    doc.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js';
    document.body.appendChild(doc);
  }
  1. (Jquery UI) Use custom javascript and put:
  if(!window["scp-loading-ce3226c9-2cf5-4d3b-9e56-688ef1c125af"]) {
    window["scp-loading-ce3226c9-2cf5-4d3b-9e56-688ef1c125af"] = true;
    let doc;
    /* Adding script from https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js */
    doc = document.createElement('script');
    doc.src = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js';
    document.body.appendChild(doc);
  }
  1. (Jquery UI CSS) Use custom javascript and put:
  if(!window["scp-loading-4620f8ea-3d5d-4854-8c91-75776a25c86d"]) {
    window["scp-loading-4620f8ea-3d5d-4854-8c91-75776a25c86d"] = true;
    let doc;
    /* Adding stylesheet link from https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.3/themes/smoothness/jquery-ui.css */
    doc = document.createElement('link');
    doc.href = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.3/themes/smoothness/jquery-ui.css';
    doc.rel = 'stylesheet';
    document.body.appendChild(doc);
  }

With this workflow you will be loading jquery into the application, now we have to use it:

  1. In the same workflow, place a delay of 1000ms, to ensure that before it initializes the code that will be using jquery, it has loaded it
  2. Use custom javascript and put your code that uses jquery example:
$(function () {
  $("#draggable").draggable();
});

This way, you will: load jquery, and use it later :slight_smile:

Credits: https://weweb-embed.statechange.ai/ who helped generate the javascript codes to load jquery

1 Like