How to add jQuery to JSfiddle

Question

The interface of JSfiddle has changed and i can't see any option to add jQuery, and set it onLoad as it was Before..

So can someone help me how to activate it.

And thank you for help.

Annelieseannelise

JSfiddle changed its interface so, in nowadays, no answer is working! – Lipson

@PeterKrauss: It works exactly as described below for me. – Angulo

Answer 1

Alternatively to Velimir Tchatchevsky's Answer you can click the Javascript Settings button (top right left of Javascript pane).

You can select jQuery, and other extensions and frameworks, from the Frameworks & Extensions drop down.

Also, depending on the library selected there are also some other extensions to that library. An example below of jQuery 1.7.2, you can also include jQuery UI, jQuery Mobile etc.

---

In regards to Velimir Tchatchevsky's answer, the External Resources section on the left is more for importing other files / libraries that JSFiddle does not have.

For example, you could import libraries like FontAwesome or Datatables.js, or your own hosted CSS / JS files.

Chrotoem

As @mry shows in their answer - the settings button is now in the top left of the JS panel. – Chrotoem

Answer 2

At the left side there is an "external resources" button that you can click and fill in the url of the jquery source

Clarenceclarenceux

Thanks so now it doesn't set it it self – Annelieseannelise

"jquery" not works, no autocomplete... please show a concrete example to illustrate... Ah, now working fine, code.jquery.com/jquery-1.11.3.js – Lipson

Answer 3

Had the same question. using ImClarky's answer figured it out in updated interface. Adding steps in updated interface. hope these help someone looking for same in future

1. Click on Javascript menu in javascript pane and select jQuery from Frameworks & Extensions menu

2. Add your code using jQuery !!

Carrero

Answer 4

Add the following to the top of the html block:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

---

Example:

---

function code()
{
console.log('change');
console.log($('#select').val());
$('#copySelect').html($('#select').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<select id="select" onchange="code()">
<option value="Hi">Hi</option>
<option value="Bye">Bye</option>
</select>
<span id="copySelect">
Hi
</span>

Savell