{"id":6600,"date":"2023-04-17T04:42:45","date_gmt":"2023-04-17T04:42:45","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=6600"},"modified":"2023-08-04T06:15:12","modified_gmt":"2023-08-04T06:15:12","slug":"implementing-jquery-in-a-lightning-web-component-in-salesforce","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/","title":{"rendered":"Implementing jQuery in a Lightning Web Component in Salesforce"},"content":{"rendered":"<p>After Lightning Component and Lightning Web Components, JavaScript has always been accessible to Salesforce developers. However, there are situations when javascript is not the greatest option for us. The necessity for jQuery arises next, which offers us an improvement over conventional techniques to interact with the sites more effectively. The use of jQuery helps to reduce the amount of code and improves the performance of the entire page.<\/p>\n<p>As a Salesforce developer, you may be concerned about how you can make your lightning pages compatible with jQuery, which makes it simpler for you to work with a quick and feature-rich <a href=\"https:\/\/studysection.com\/blog\/javascript-2\/\">JavaScript<\/a> library.<\/p>\n<ul>\n<li>Download the jquery file from this link, after right-clicking to open the page and saving it to the desired folder.<br \/>\n<a href=\"https:\/\/code.jquery.com\/jquery-2.2.4.min.js\">https:\/\/code.jquery.com\/jquery-2.2.4.min.js<\/a><\/li>\n<li>After saving the file, open your Salesforce org.<\/li>\n<li>Go to setup and type &#8220;Static resource&#8221; into the quick find box.<br \/>\n<img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/sf-31.png\" alt=\"Salesforce\" \/><\/li>\n<li>Click on the New button to add a Static Resource.<br \/>\n<h2>Static Resources<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/sf-32.png\" alt=\"sf-32\" \/><\/li>\n<li>Add the JQuery JS file in the Static Resource. The Static Resource should appear as shown below:<img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/sf-33.png\" alt=\"sf-33\" \/>\n<p>Once the static resource has been added, you must utilize it in the JS file for the lightning web component along with the importing loadScripts and loadStyle method.<\/li>\n<li>First, import the static resource file on top of the js file and loadScripts from the platformResourceLoader.<br \/>\n<img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/sf-34.png\" alt=\"sf-34\" \/><\/li>\n<li>The script must then be loaded using the promise in the connectedCallback or renderedCallback.<br \/>\n<img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/sf-35.png\" alt=\"sf-35\" \/><\/li>\n<\/ul>\n<p>Finally, run the loadScript function that we imported previously in the connectedCallback method, passing a reference to the current template (this) and the Static Resource. Returning the Promise is this approach. Whenever the Promise is fulfilled, the then() method is invoked. If there is an error, the catch() function will be called.<\/p>\n<p><strong><em>This way, we can use jQuery in the Lightning Web Component.<\/em><\/strong><\/p>\n<p><small><em>Study Section provides a big list of certification exams through its online platform. The <a href=\"https:\/\/www.studysection.com\/french-language-and-concepts-advanced\">French Certification Exam<\/a> can help you to certify your skills to communicate in the French language. Whether you are new to the language or you are an expert in it, this French certification exam can test the ability of anybody\u2019s command over the French language.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>After Lightning Component and Lightning Web Components, JavaScript has always been accessible to Salesforce developers. However, there are situations when<\/p>\n","protected":false},"author":1,"featured_media":6601,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[170,41],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Implementing jQuery in Salesforce - SS Blog<\/title>\n<meta name=\"description\" content=\"After Lightning Component and Lightning Web Components, JavaScript has always been accessible to Salesforce developers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implementing jQuery in Salesforce - SS Blog\" \/>\n<meta property=\"og:description\" content=\"After Lightning Component and Lightning Web Components, JavaScript has always been accessible to Salesforce developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-17T04:42:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-04T06:15:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/Salesforce1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Implementing jQuery in a Lightning Web Component in Salesforce\",\"datePublished\":\"2023-04-17T04:42:45+00:00\",\"dateModified\":\"2023-08-04T06:15:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/\"},\"wordCount\":369,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Jquery\",\"salesforce\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/\",\"url\":\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/\",\"name\":\"Implementing jQuery in Salesforce - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2023-04-17T04:42:45+00:00\",\"dateModified\":\"2023-08-04T06:15:12+00:00\",\"description\":\"After Lightning Component and Lightning Web Components, JavaScript has always been accessible to Salesforce developers.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implementing jQuery in a Lightning Web Component in Salesforce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Implementing jQuery in Salesforce - SS Blog","description":"After Lightning Component and Lightning Web Components, JavaScript has always been accessible to Salesforce developers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/","og_locale":"en_US","og_type":"article","og_title":"Implementing jQuery in Salesforce - SS Blog","og_description":"After Lightning Component and Lightning Web Components, JavaScript has always been accessible to Salesforce developers.","og_url":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2023-04-17T04:42:45+00:00","article_modified_time":"2023-08-04T06:15:12+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/Salesforce1.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Implementing jQuery in a Lightning Web Component in Salesforce","datePublished":"2023-04-17T04:42:45+00:00","dateModified":"2023-08-04T06:15:12+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/"},"wordCount":369,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Jquery","salesforce"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/","url":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/","name":"Implementing jQuery in Salesforce - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2023-04-17T04:42:45+00:00","dateModified":"2023-08-04T06:15:12+00:00","description":"After Lightning Component and Lightning Web Components, JavaScript has always been accessible to Salesforce developers.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/implementing-jquery-in-a-lightning-web-component-in-salesforce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Implementing jQuery in a Lightning Web Component in Salesforce"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":1891,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6600"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=6600"}],"version-history":[{"count":2,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6600\/revisions"}],"predecessor-version":[{"id":6938,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6600\/revisions\/6938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/6601"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=6600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=6600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=6600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}