Issue with decodeURI function causing hyperlinks to display as plain text

I have been developing a Sharepoint App that includes a feature to extract contact details from a list on the Sharepoint site. Below is a snippet of my code:

var currentOpeningContent = '<h4 onclick="ShowJobDetail(\'' + encodeURI(currentOpeningTitle.text()) + encodeURI(currentOpeningRR.text()) '\');">'+Show details+'</h4>';

$("#open_jobs").append(currentOpeningContent);

function ShowJobDetail(title, roles)
{
    $(".job_page_title").html(decodeURI(title));
    $(".job_roles").html(decodeURI(roles));
}

The issue I am facing is that when an email id is passed in the "roles" parameter, it appears as plain text due to decodeURI method. However, my goal is to have a popup window open when a user clicks on the email id.

javascriptsharepointdecodeuricomponent

Answer №1

I'm having trouble grasping your issue, but it seems like there is an issue with the code.

Since you're already utilizing jQuery, instead of resorting to this messy approach:

var currentOpeningContent = '<h4 onclick="ShowJobDetail(\'' 
    + encodeURI(currentOpeningTitle.text())
    + encodeURI(currentOpeningRR.text()) '\');">'
    + Show details
    + '</h4>';

$("#open_jobs").append(currentOpeningContent);

You should consider doing it in a more structured manner:

var $currentOpeningContent = $('<h4>Show details</h4>').click(encode);

function encode(e){
    var title = '' + encodeURI(currentOpeningTitle.text()) + encodeURI(currentOpeningRR.text());

    ShowJobDetail(title, roles); //"roles" is undefined! that's probably not wat you want
}

$("#open_jobs").append($currentOpeningContent);

This reflects a direct comparison of your code. Upon clicking on 'h1', you'll notice that "roles" is undefined. It appears that you simply missed adding a comma between your function arguments.

IMPORTANT: Avoid embedding JS within an HTML string explicitly. This will only lead to complications. Furthermore, when using jQuery, try opting for jQuery's HTML-generating methods rather than plain HTML strings.

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

Check Image Dimensions prior to Image Loading

I've been working with JQuery Masonry and would like to incorporate Lazy Load using a WordPress plugin to load images only when they come into view. The issue I'm facing is that when Lazy Load is used, the masonry elements don't recognize t ...

javascriptjquerylazy-loadingjquery-masonryimage-size

Form values not being transmitted correctly in Ajax POST request

I'm facing an issue with my form submission through AJAX where the values are coming out incorrect. Strangely, when I use a normal POST submit it works perfectly fine! <script type="text/javascript"> $(function () { $('#B ...

c#javascriptjqueryajax

Utilizing Vue's dynamic component feature to create event listeners

Issue: My current project involves creating a versatile table component that can be utilized by other components to display tabular data. Each cell in this table could contain one of three possible values: Text HTML Component While I have successfully im ...

javascriptvue.jsvue-dynamic-components

Move through different screens using React JS

Can anyone help me with this issue I'm facing in React Js? I am trying to implement a button that changes to another screen when clicked, but I keep getting an error message: TypeError: Cannot read property 'push' of undefined. I have tried ...

javascriptreactjs

What is the process of adding information to a JSON file?

I'm looking to store my data in an external JSON file and have it update the list when the page is reloaded. Can anyone assist with this? Below is my code: $scope.addUser = function() { var user = { id: null, login: '', ...

javascriptangularjsjson

ran into the error that this state is not a function

Every time I run my code, I encounter the error message this.setState is not a function. Can anyone offer guidance on how to fix this issue? Thank you! spiele.listUsers(params, function(err, data) { if (err) console.log(err, err.stack); else con ...

javascriptreactjs

Develop a pair of jQuery plugins that are able to communicate with one another

My mind is currently in disarray. I am interested in developing two unique jQuery plugins: A tab plugin A slider plugin. These plugins need to be able to communicate with each other. For example, clicking on a tab should activate the corresponding index ...

javascriptjquerypluginsjquery-eventsextends

Is it possible to link actions to a storage location external to a component?

Imagine having a store set up with a middleware called redux-thunk. The store is created and exported using the following code: import myOwnCreateStoreMethod from './redux/createStore'; export const store = myOwnCreateStoreMethod(); Now, you ha ...

javascriptreactjsredux

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

As a user types or erases characters, I am utilizing redux to update an array of characters. This allows me to set a success flag when the user correctly types the entire phrase. Currently, when typing in characters, the SET_INPUT action in redux fires of ...

javascripthtmlreactjsredux

Angular does not seem to be identifying the project name as a valid property

After installing Angular materials using the CLI, I decided to check my angular.json file and encountered an error in the console stating that "Property MEAN-APP is not allowed". [The name of my Angular project is MEAN-APP] Here's a screenshot of the ...

javascriptjsonangularwebfrontend

Executing a callback function in AngularJS after dynamically rendering elements with `ng-repeat`

Many posts demonstrate how to implement callback functions in directives to wait for ng-repeat to finish before calling a function. Here is an example: <div ng-repeat="Object in Objects" class="objectClass" on-finish-render>{{Object.Overlay}</div ...

javascriptjqueryangularjsangularjs-directiveangularjs-ng-repeat

Error: The configuration object provided for initializing Webpack does not adhere to the correct API schema in Next.js. This results in a ValidationError due to the invalid configuration

When I used create-next-app to set up my next.js project, everything seemed fine until I tried running npm run dev and encountered this error: ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that doe ...

javascriptnode.jswebpacknext.js

What is the best way to define properties for objects within views.py so that the updated object can be effectively passed to JavaScript code?

When loading an "endless scroll" feed via AJAX and pagination, I realized that before passing objects to the JS code, I need to add a property (or attribute) to every object indicating whether it was liked by the current user or not. However, my initial ...

javascriptpythonajaxdjango

I prefer not to have my preceding component re-rendered in React

I'm currently working on developing a user interface for a search engine using elasticsearch within React. One issue I'm facing is with the Pagination technique - when a user clicks on a result and then navigates back to the list of results, it r ...

javascriptreactjselasticsearchreact-router

I am having trouble getting my AngularJS client to properly consume the RESTful call

As I venture into the world of AngularJS and attempt to work with a RESTful service, I am encountering a challenge. Upon making a REST call to http://localhost:8080/application/webapi/myApp/, I receive the following JSON response: { "content": "Hel ...

javascriptangularjsjsonrest

When using React.js Material UI's CardActionArea with a flex display, the children elements may not automatically use the full width as expected

Getting straight to the point - I recently experimented with changing the display style property from block to flex, along with setting flexDirection: 'column' for the CardActionArea component. The main goal was to ensure that CardContent maintai ...

javascriptreactjsmaterial-ui

invalid audio element

I'm currently working on building an audio player with a visualizer feature. However, when I try to initiate the audio player by clicking on the input button, my debug console keeps showing this error message: Uncaught (in promise) DOMException: Fa ...

javascriptjqueryhtmlaudio

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...

javascriptphpjqueryhtmlcss

An error has occurred in the Shadow Dom due to the inability to access the property 'style' of an

While working on a component using shadow DOM, I encountered the following error in the console: "Cannot read property 'style' of undefined". This issue seems to be related to my HTML code in PHP. The main challenge I am facing is figuring out ho ...

javascripthtmlcssdomshadow

Error message "SyntaxError: Unexpected token < in JSON at position 0" encountered while using AJAX

When data is sent through an ajax request and processed, a returned array is encoded into json format. $response = array( 'data' => $leaveData, 'message' => 'Event added successfully', ...

javascriptphpjqueryjsonajax