Encountering a roadblock when trying to incorporate jQuery UI into TypeScript

  • I've been exploring Typescript to improve my coding skills.
  • Currently, I have a UI that's functional in jQuery.
  • My goal is to transition this UI to Typescript.
  • However, I'm facing some challenges as I try to encapsulate everything within the WholeUI() method.
  • Unfortunately, I keep encountering errors along the way.
  • If anyone has insight on how to troubleshoot this, please share your advice!

Here is a link to a working fiddle: http://jsfiddle.net/46aqscwv/

And here is a link to a broken fiddle: http://jsfiddle.net/Ls1aqLv1/

Error message:

Uncaught SyntaxError: Unexpected token (
    at new Function (<anonymous>)
    at exec (typescript.js:41)
    at HTMLDocument.runScripts (typescript.js:41)

Code snippet causing the error:

function WholeUI() {
        $(document).ready(function() {

            $('ul.tabs li').click(function() {
                var tab_id = $(this).attr('data-tab');

                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');

                $(this).addClass('current');
                $("#" + tab_id).addClass('current');
            })

Answer №1

It appears that there may be an issue with JSFiddle's ability to transpile your Typescript code into valid Javascript code. Specifically, the following portion of your code (in typescript):

users.map(u => ({ FileName: u.login }))

is being transpiled incorrectly, resulting in invalid Javascript syntax:

users.map(function (u) ({ FileName: u.login }))

To resolve this error, you can modify the arrow function as follows (both in typescript and javascript):

users.map(function (u)  { return ({ FileName: u.login }) })

Another issue is that the WholeUI function is not being called. You can view a working example by clicking here.

Answer №2

Working with TypeScript code on Fiddle platforms may not provide the best experience, as error messages are not very informative when there are syntax issues.

For a more efficient approach, consider using a robust editor like VS Code. By opening your code as a .ts file in an editor like this, you can easily spot errors such as undeclared variables (pai_to_delete) and missing type definitions for libraries like jQuery, kendoWindow, and Rx.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining if the device is connected to the internet

Is there a way to create a unique code using HTML, JavaScript, or jQuery that executes a random action when the website detects that the device is offline? ...

accepting decimal values for x-editable input field

Recently, I started using x-editable along with bootstrap and came across a roadblock. Here is the HTML field definition: <div class="form-group"> <label class="col-sm-4">Service Charges(%)</label> <div class="col-sm-6 hoverE ...

Utilize jQuery to display a list of defined CSS classes based on a regular expression, implementing a targeted CSS strategy to prevent any

I have defined a set of CSS classes in app.css: .eventcolor-1{background:rgba(249, 115, 0);} .eventcolor-2{background:rgba(14, 48, 71, 0.99);} .eventcolor-3{background:rgba(16, 130, 140, 0.99);} .eventcolor-4{background:rgba(41, 91, 167, 0.99);} .eventcolo ...

Is there a way to send a personalized reply from an XMLHttpRequest?

My goal is to extract symbol names from a stocks API and compare them with the symbol entered in an HTML input field. I am aiming to receive a simple boolean value indicating whether the symbol was found or not, which I have implemented within the request. ...

React-Redux: Unable to access the 'closed' property as it is undefined

Encountered a problem when using dispatch() in React-Redux. Specifically, the action below: export const fetchMetrics = () => { dispatch(fetchMetricsBegin); APIService.get('/dashboard/info/') .then((response) => { ...

Unable to get Bootstrap tooltip functionality to work with jquery.slim when importing through webpack

After installing bootstrap 4.6.0 and jquery 3.6.0 via npm, I encountered a strange issue when trying to use tooltips. The following code snippet is functioning correctly: import jQuery from "jquery/dist/jquery"; import "bootstrap/dist/js/bo ...

A delivery person is sending a JSON post request with an empty body to the Express server

When I sent a POST request from Postman to the Express server, the body is getting parsed correctly using app.use(express.json()), but it returns an empty body. However, I am able to retrieve params and other information successfully. Strangely, it works ...

"Troubleshooting Issue: Angular2 NGRX/Store View Failing to

I apologize for bringing up yet another concern regarding Angular 2 view updates, as I have not been able to find a solution in previous discussions. Although I mention the use of NGRX/Store, I highly doubt that it is the reason why the view is not updatin ...

Notification in display document

Exploring the Yii Framework for the first time. I am looking to implement an Ajax check to verify if a user exists. Sample View File <form method="post" action="<?php echo $baseUrl;?>/persons/login" role="form"><br> <div style="d ...

Combine the foundation navigation with bootstrap in order to create a seamless

Has anyone figured out a way to mimic the "top bar" functionality in Foundation (where child menu items slide to the left on mobile) within the Bootstrap framework? I really appreciate how Foundation handles the mobile navigation sliding for child items, ...

Choose an image from the gallery, assign a class to it, and then store it in the database

I am looking to implement a feature where users can select an image from a collection of images by clicking on a check mark. Once selected, the image should have a green checkbox indicating it is chosen, and then the ID or name of the selected image should ...

jQuery UI button not receiving proper styling

Having an issue with my javascript function that inserts a form when a button is clicked. There's another button at the bottom of the form added by the function, but it's not inheriting the ui css even if I add the ui-button class. Any assistance ...

Is there a method for dynamically loading angular directives?

Check out this quick demo: http://jsfiddle.net/aSg9D/ Essentially, both <div data-foo-{{letterA}}></div> and <div data-ng:model="foo-{{letterB}}"></div> are not being interpolated. I'm trying to figure out a way to dynamical ...

Is QA supported by LG WebOS 3.5 through webdriver?

I've been experimenting with Javascript ( nodejs ) and have successfully automated browser operations using selenium-webdriver on a local server. However, I am facing challenges when trying to automate tasks on my LG WebOS 3.5 TV. Does anyone know how ...

Encountered a "Transformer is not a constructor" error when trying to upgrade the React Native SDK version from 0.61.5 to 0.64

https://i.sstatic.net/LYdxj.pngRecently, I upgraded my react native version to the latest one and encountered an error stating "Transformer is not a constructor". The metro-react-native-babel-preset version I am currently using is 0.64.0. Can someone ple ...

The page quickly displays the splash page only if the user is logged in

I implemented a user authentication system where certain pages are displayed based on whether the user is logged in or not. For instance, when accessing localhost:3000/ (the home page), it should either show the splash screen or the dashboard of the logged ...

If a user refreshes too quickly or excessively, my server tends to crash

I'm feeling lost and struggling to find answers even through Google search. This is my first solo project where I am developing a MERN full-stack app. Initially, someone warned me it was too ambitious (they were right) and that I would get overwhelme ...

Construct a three-dimensional structure using JavaScript and set a standard height

I'm working on developing a 3D form using code and I've encountered an issue. My plan involves storing coordinates in a vector within the same plane, with an added default height to achieve a 3D effect. However, as someone new to programming and ...

Protractor encounters an error stating "No element found with specified locator" after attempting to switch to an

I've been attempting to download an embedded PDF from a webpage using Protractor selenium. However, I seem to be stuck when it comes to actually downloading the file as I always encounter the following error: Failed: No element found using locator: ...

Application utilizing Meteor to connect with external websites or applications

Hey everyone, I'm in the process of developing an application that features a directory of stores. One key requirement is that each store has a unique view created with either Flash or JavaScript. The special view components have already been develope ...