Utilizing a JavaScript variable as an argument in Fluid URI ViewHelper: A step-by-step guide

I am trying to create an Ajax call from a Fluid template using the Fluid URI action ViewHelper. However, I am facing an issue where one of the arguments needs to be dynamically obtained from a Javascript variable. How can I ensure that the ViewHelper is rendered by Fluid and the content of the Javascript variable is inserted at runtime?

Below is a simplified version of my code:

function test(field) {
    xmlhttp.open("GET", '<f:uri.action action="ajax" arguments="{filterfield:' + field + '}" />', true);
}

Currently, the Fluid rendered output appears as follows:

function test(field) {
    xmlhttp.open("GET",'mod.php?...&tx_test_test_testview%5Bfilterfield%5D=%20%2B%20field%20%2B%20...', true);
}

However, my desired output is:

function test(field) {
    xmlhttp.open("GET",'mod.php?...&tx_test_test_testview%5Bfilterfield%5D=' + field + '...', true);
}

I have indicated ... where the output is not significant.

javascriptajaxfluidextbasetypo3-6.2.x

Answer №1

It may not be possible to achieve your desired outcome using fluid alone, as the f:uri viewhelpers ultimately go through the typolink method which utilizes urlencode. Perhaps a solution would be to pass a unique string and then replace it using JavaScript. Here's an example:

function test(field) {
    xmlhttp.open("GET", '<f:uri.action action="ajax" arguments="{filterfield: '___FIELD___'}" />'.replace('___FIELD___', field), true);
}

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

Identifying text within clicked divs using identical ids

$(document).ready(function(){ $('#peoplelayer').click(function(){ $(this).fadeOut(500); var str = $(this).text(); alert(str); }); }); This is code where I use the same id "#peoplelayer" for all the divs. When on ...

javascriptjqueryhtml

Guide on pushing a nested array of objects into another object as a nested array of objects using MongoDB and NodeJS

I am working with a "cart" object and an "order" object. The "cart" object has the following structure: { "_id" : ObjectId("cart123"), "userId" : "user123", "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascriptnode.jsarraysmongodbmongoose

Unable to retrieve JSON data from the remote URL

I have been attempting to retrieve information from but unfortunately, I am not receiving any data in return. Despite this, I can see the data in my response tab using Google Chrome. My attempts include running it on both a webserver and locally for test ...

javascriptajaxjsonjsonp

Trying to access a property that doesn't exist (fetching 'fetchBans')

My goal is to create a command within my Discord bot that can unban a user. However, when I finished writing the code, I encountered an error stating 'Cannot read properties of undefined (reading 'fetchBans'). Here is the section of code cau ...

javascriptnode.jsdiscorddiscord.js

Incorporating a RadAjaxManager within a user control is recommended to have only one manager for each page

Trying to add the RadAjaxManager to your page multiple times is a common mistake: Only one instance of a RadAjaxManager can be added to the page Telerik provides an explanation on how to address this issue for design-time problems using a proxy control ...

c#asp.netajaxtelerik

Display the component only if the image source is legitimate

Before rendering an Image component, I want to ensure that the URL is valid and not broken. My current approach seems error-free and the onload function is functioning properly. However, I suspect there might be an issue with how I am handling the return ...

javascriptreactjs

An issue arose when trying to implement react-router within a multi-step registration process

While working on my multi-step registration form, I encountered an error when implementing react router. Clicking on the personal info link led to the following console errors: "Uncaught TypeError: Cannot read property 'ownerName' of undefined" ...

javascriptreactjsreact-router

Repeatedly triggering the Jquery Dialog Event

When I open a calendar plugin in jquery dialog, I encounter a recurring issue. Every time I close and reopen the dialog, my calendar event onDayClick triggers multiple times – twice, thrice, and so on. <div id="show_calendar"> <div class="c ...

javascriptjqueryhtmldialogrepeat

What is the best way to split an array into smaller chunks?

My JavaScript program fetches this array via ajax every second, but the response time for each request is around 3 to 4 seconds. To address this delay, I attempted to split the array into chunks, however, encountered difficulties in completing the task: { ...

javascriptphphtmlajax

The scrolling on the image listing webpage is not as fluid as desired

I'm currently working on building a website for displaying images in Angular, similar to Google Photos. The site includes a custom scrollbar that displays the month and year. I want the image list to scroll when the user moves the scrollbar thumb. Her ...

javascriptangularimage

When running grunt-bower, I am encountering an error stating that _.object is not a function

I am attempting to execute the grunt-bower task in order to copy all of my bower components. Encountered an error while running "bower:dev" (bower) task TypeError: _.object is not a function at Object.exports.getDests (/Users/wonoh/cocApp/node_modules/g ...

javascriptnode.jsgruntjslodash

Running Jest encounters errors when there is ES6 syntax present in the node modules of a create-react-app project

Currently, I am working on a project using create-react-app and attempting to perform unit testing on a component from office-ui-fabric-react using Jest and Enzyme. The most recent version of office-ui-fabric-react utilizes es6 syntax which is causing iss ...

javascriptreactjsnpmjestjsenzyme

What is the best way to bend a Polyline in react-google-maps?

Just dipping my toes into React and experimenting with the react-google-maps package. I'm on a mission to curve a Polyline connecting two locations. I've reviewed the documentation and I'm attempting to integrate the curve polyline function ...

javascriptreactjsgoogle-mapsreact-google-maps

Guide to automatically compressing images during the file upload process

Is there a way to automatically compress images larger than 4MB to less than 1MB before uploading them in AngularJS? Any suggestions on how to achieve this? Here is the sample file: JSFIDDLE var myApp = angular.module('myApp', []); myApp.dir ...

javascripthtmlangularjsng-file-upload

Is it possible to execute asynchronous queries within a map function in Mongoose?

Currently, I am struggling to create queries using a .map function, pushing the results to an array and then returning it. The issue is that the array always ends up empty due to the asynchronous nature of the operation. Although I attempted using async/ ...

javascriptnode.jsexpressmongoose

Attempting to set up Prettier in my VSCode environment

I've been delving into JavaScript with the guidance of "Morten Rand-Hendriksen" on LinkedIn Learning. The instructor emphasized the importance of installing "Prettier" in our VSCode environment. Following his instructions, I headed to the "Extensions" ...

javascriptnode.jsnpm

What is the best way to incorporate async/await in a useEffect hook in a React Native application?

Upon executing useEffect, my objective is to retrieve the token from AsyncStorage, fetch the data value using the axios.post('/auth/me') endpoint, and trigger the KAKAOLOG_IN_REQUEST action through dispatch. After verifying that the data value i ...

javascriptnode.jsreactjsreact-native

The script from 'URL' was declined for execution due to its MIME type of 'text/html' which is non-executable, in addition to strict MIME type checking being enabled

I encountered an error stating "Refused to execute script from 'URL' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled." The code that triggered this error is shown below. <!DOCTYPE htm ...

javascriptjqueryhtmlajax

I'm having trouble with my AJAX Update Panel. Can someone please help me figure out what I'm doing wrong?

--------------Handling Gridviews DataBound Event ----------------- protected void grdShowCallingList_DataBound(object sender, EventArgs e) { if (grdShowCallingList.Rows.Count > 0) { foreach (GridViewRow row in grdShowCallingList.Rows) ...

javascriptasp.netajaxgridviewupdatepanel

Merge two JavaScript functions

I've been attempting to merge two if functions together but I keep encountering errors. Despite trying different methods, I have not been successful in combining them. My goal is to check if the body has a specific class and if it does, I want to unc ...

javascriptfunction