Is it possible to blend javascript with server-side javascript code in a single project?

At the moment, I find myself in a peculiar situation where I need to combine JavaScript with server-side code. Here's how it looks:

 function PerformGlobalCallback(sender, value) {
        var index = hfCurrentTabIndex.Get("activeIndex"));
        window['<%= ((ASPxCallbackPanel)myTabControl.TabPages[index].Controls[0]).ClientInstanceName %>'].PerformCallback(sender + "|" + value);
    }

In this code, hfCurrentTabIndex is a hidden field that stores the current tab index correctly. Unfortunately, I can't simply use the "index" variable within the <%= %> section, so I need to find a workaround.

The reason behind this requirement is that the current tab index of myTabControl gets lost during callbacks. Despite storing it in Session, I encounter null values when trying to access it in the code above.

If you have any insights or suggestions on how to address this issue, I would greatly appreciate your help.

javascriptasp.netdevexpressclient-side

Answer №1

var instanceNames = [];
<%
    for(let i=0; i<myTabControl.TabPages.Count; i++) 
    {
        Response.Write("instanceNames[" + i.toString() + "] = \"" + (ASPxCallbackPanel)myTabControl.TabPages[i].Controls[0]).ClientInstanceName + "\";");
    }
%>
function PerformGlobalCallback(sender, value) {
    var index = hfCurrentTabIndex.Get("activeIndex"));
    window[instanceNames[index]].PerformCallback(sender + "|" + value);
}

This code snippet should meet your requirements.

The server-side code is executed first, sending the page to the client browser before processing the JavaScript. Alternatively, you could utilize AJAX to retrieve the .ClientInstanceName. However, the method shown above constructs the JavaScript array on the server, simplifying the task in the client code by just performing an index lookup.

Note: This code was written within my browser window and has not been tested, so potential syntax errors might be present.

Answer №2

Affirmative.

This process is commonly done when configuring JavaScript with data generated by the server.

var myjsVariable = "<%= SomeServerSideVariable %>'

However, the method you used will not be effective.

The following code is written in JavaScript (client-side)

var index = hfCurrentTabIndex.Get("activeIndex");

Then, you attempt to utilize that client-side variable in a server-side function:

<%= ((ASPxCallbackPanel)myTabControl.TabPages[index].Controls[0]).ClientInstanceName %>
-----------------------------------------------^

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

confirm that the form is necessary and contains text

How can I ensure that a specific text string is validated for the input field labeled "promo"? Take a look at the code snippet below: <script> function validateForm() { var x = document.forms["myInquiry"]["promo"].value; if (x == null || x == "") ...

javascriptphphtml

Browser unable to interpret HTML tag stored in ModelMap as HTML content

I am working on a spring controller with the code snippet below : @RequestMapping(value="/getMessage.htm", method=RequestMethod.POST) protected String uploadFile(ModelMap model){ //... other codes model.addAttribute("theMessage", "Hello world ...

javajavascriptspringjstlhtml4

Unleashing the power of eventListeners through exponential re-rendering upon state updates

Trying to implement an eventListener for "keydown" to update the state (a boolean named showMenu). I placed it inside a useEffect, but it's not functioning correctly and I can't pinpoint the issue. When I include showMenu in the dependency arra ...

javascriptreactjsdomdom-events

What could be causing the request body in ExpressJs to be blank?

Using ExpressJs, I have created a simple app that can handle post requests and form submissions. Below is the code snippet from my index.js file: require ('./models/db'); const express = require('express') const app = express() const bo ...

javascriptexpress

Ways to display a loading indicator while an AJAX request is being sent

I have an AJAX function that retrieves data. How can I display a Bootstrap progress loader (circle loader) while waiting for the response? Here is the AJAX Function JS: $('#category_modal').click(function(event) { var url = $(this).data(&a ...

javascriptjqueryajaxtwitter-bootstrap

AngularJS - directive template is not being compiled correctly

I am facing an issue with AngularJS. .directive('field', ['$routeParams', function($routeParams){ return { restrict: 'E', compile: function(tElement, tAttributes) { var template ...

javascripthtmlangularjs

Eliminate specific categories from a JSON data structure

My JSON object contains various classes and corresponding values: { "Class 1": [ { "Key1": "value1", "Key2": "value3" }, { "Key3": & ...

c#arraysasp.netjson

Editable JSON data within a table using Twitter Bootstrap

How come I am unable to utilize the bootstrap editable table in this manner? <table id="addElements" data-height="299"> <thead> <tr> <th data-field="id" data-align="right">Item ID</th> < ...

javascriptcsstwitter-bootstrapbootstrap-table

Dynamic progress bar based on time remaining

Is it possible to create a progress bar that reflects the countdown timer displayed in a div? The timer counts down from 7 minutes and is shown as follows: <div id = "quiz-time-left"> 0:06:24 </ div> I want to ensure that if the page is reload ...

javascriptcss

If a PDF file is being handled by an HTTP handler and is located within an iframe, Firefox may not be

My website is hosted on IIS7 ASP.NET 3.5 I have set up an http-handler to serve PDF files. When I access a pdf-document (www.mysite.com/mypdf.ashx?id=doc1) in Firefox 3.0, it opens directly in the browser. Now, I have added an iframe to my page with the ...

asp.netiis-7url-rewriting

Is event delegation in React similar to jQuery's `on()` method?

Just starting out with React.js and I've built a list Component that has items being added and removed frequently. Each item needs to have click and/or hover events. I'm looking to implement event delegation similar to how it's done in jQue ...

javascriptreactjsevent-handlingevent-delegation

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...

javascriptjqueryhtmlcss

Guide to making a sliding animation appear when hovering over a menu using jQuery

I have noticed a common feature on many websites, but I am unsure of how to explain it. At times, there are sliding elements in the navigation, like an arrow under menu items that moves when the user hovers over different links. Here is an example of a s ...

javascriptjquerycssnavigationjquery-animate

When it comes to JavaScript, the evaluation order of arguments and delayed evaluation play a crucial

Assuming function( arg1, arg2 ), is it true that arg1 will always evaluate before arg2 (unlike traditional C)? Is there a way to create a function where arguments are not evaluated immediately, but only on demand? For instance, in if( cond1 || cond2 ), c ...

javascript

What causes the temporary halt of context execution in the eventloop framework?

Presenting the code immediately: setTimeout(() => console.log("next macro")); /// next macro Promise.resolve().then(() => gen.next()) /// microtask inside, #2 const gen = (function*(){ console.log("Hello"); yield; /// #3 console.log("W ...

javascriptecmascript-6specifications

Iterating through numerical values with assigned object properties, storing the resulting values in an array

A line chart requires filling in missing values with "0" from the object called "filteredTime." A dynamic number of items are present in the object, and a for loop is used to push the output into an array. The expected outcome is an array of 10 items, but ...

javascriptreactjsloopsfor-loopobject

Updating Angular 8 Component and invoking ngOninit

Within my main component, I have 2 nested components. Each of these components contain forms with input fields and span elements. Users can edit the form by clicking on an edit button, or cancel the editing process using a cancel button. However, I need to ...

javascriptangulartypescriptangular8

Using jquery to transition an image to fade out and then reappear in a different position

There is an image in a div with the highest z-index. Upon clicking on something, the image should fade out and then fade in at a specified position below another image with the class "aaa". The current approach involves using jQuery to fade out the image ...

javascriptjquery

I'm having trouble getting a http.request to run within an imported module. It just doesn't seem to work when I try to access

Here is the code from my main.js file: var spaceJson = require('./space.js'); var options = { "method": "GET", "hostname": "10.10.111.226", "port": null, "path": "/API/Org", "headers": { "authorization": "Bearer eyJ0eXAiOiJKV1QiLCJ ...

javascriptnode.js

tips for transforming a javascript string into a function invocation

I am faced with the challenge of turning the string logo.cr.Button into a function call. Here is the code I'm working with: logo.cr.Button = function(){ //something } var strg = 'logo.cr.Button'; strg(); When I attempt to execute strg(); ...

javascriptjqueryangularjsjquery-ui