Error: asp.net literal control disappears on page reload

I am currently working on incorporating Google Maps to display locations extracted from a database. The locations consist of vending points that are grouped by promoters, and upon selecting a promoter, their vending points should be shown on the map. After initially using the Subgurim.net library, I decided to switch to a JavaScript implementation with guidance from https://www.codeproject.com/Articles/36151/Show-Your-Data-on-Google-Map-using-C-and-JavaScrip (however, I modified it to use GoogleMaps v3 calls). The JavaScript insertion works perfectly during page load, but when there is a postback related to a promoter code to display their vending points, although the data is loaded in the codebehind and reflected in the literal control, no markers appear on the webpage. Upon inspecting the generated page using Microsoft Edge's development tools, I notice that the literal control remains unchanged even after loading new data following postback. The ASPX section of the page is simple and not contained within an UpdatePanel, despite one being present on the page. I have also experimented with setting EnableViewState to both true and false on the literal control without any success.

This snippet shows the relevant part of the ASPX:

<div id="mapContent" >
    <asp:Literal ID="mapJs" runat="server" EnableViewState="false" />
    <div id="mapDiv" style="width:100%; height:640px;" />
    <div id="infoDiv">
    ....
    </div>
</div>

Here is part of the code that inserts the initial script:

StringBuilder map = new StringBuilder();
bool loadPVGiro = false;
double centerMapLat = 37.451669,
    centerMapLong = 15.05263;

// Rest of the JavaScript code...

mapJs.Text = map.ToString();

The content generated on the page (from Edge's development tools):

<div id="mapContent" >
// Script generation...
</script> 
<div id="mapDiv" style="width:100%; height:640px;" />
....

When a postback occurs after selecting a promoter code, the script is regenerated with the list of markers, yet the literal control still displays the original script. Although the literal control is updated with the new script (verified through debugging), the updated script does not reflect on the page. Any assistance in resolving this issue would be highly appreciated.

Rodolfo.

PS: I also attempted using ViewStateMode="disabled" on the literal control without any changes.

PS2> Additionally, I tried ClientScript.RegisterClientScriptBlock and ClientScript.RegisterStartupScript, but the scripts generated were identical to those within the literal control. It should be noted that the page resides within a MasterPage.

Answer №1

It appears that the issue is connected to the user tree located within the update panel. When a user is clicked, a postback occurs but the script injected in the literal control does not reflect changes on the page, only in the codebehind. By removing the updatepanel, the script updates and executes properly. Once I complete the necessary project modifications, I will delve deeper into understanding this behavior.

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

Having trouble with enter key input not triggering?

I have scoured various resources for answers to my query, including Stackoverflow. Unfortunately, none of the posts I came across have helped me resolve my issue with getting the enter key to work in my project for FreeCodeCamp on Codepen. When I press the ...

What is the best way to access a nested element within an array in JavaScript?

I am dealing with an array that looks like this: console.log(this.props.countrysideTypes) [{…}] 0: field: Array(8) 0: "Wood" 1: "Grain" 2: "Grain" 3: "Grain" 4: "Stone" 5: "Iron" 6: "Grain" 7: "Grain" length: 8 __proto__: Array(0) id: "-MHLWLm8bFRE2_1a ...

Declare a Nodejs variable as public

Here is my nodejs script to retrieve the current weather on a specific location using the command line. // Index.js // Required Modules const program = require('commander'); const clear = require('clear'); const chalk = require('c ...

Create a fresh page using JQuery's bPopup feature

Currently, I am utilizing bPopup to launch a page within a popup container. However, my issue arises when there is a link on the popup page that I want to open in the existing bPopup container. Unfortunately, assigning a new page link in an anchor tag caus ...

Need to monitor AJAX requests in Chrome on an iOS device?

I have implemented a method to intercept AJAX requests on my website by modifying the XMLHttpRequest.prototype open and send methods. This approach has been successful in all browsers I tested, except for Chrome on iOS (iPhone) where it seems to continuous ...

Can Three.js be used to create a compact canvas?

I've successfully implemented a three.js scene on my website where users can drag to rotate an object. However, I don't want the scene to take up the entire webpage. I tried adjusting the field parameters with the following code: renderer.setSiz ...

Is there a way to place a C# list within a Div container?

I currently have a C# list: List<string> Listtags = GetListTag.GetTagList().ToList(); My goal is to place this list inside a Div element: <div id="tags"> <ul> <li><This should be filled with items from my list> ...

Attempting to send a GET request from localhost:8080 to localhost:3000 is proving to be a challenge as I keep encountering a CORS error. Even after trying to install CORS on my node.js server, the issue

While attempting to send an axios GET request from my front-end app on localhost:8080 to my Node.js/Express.js server on localhost:3000, I encountered a CORS error. Despite installing the cors npm package and using it as middleware in my Node.js/Express.js ...

What is the best way to compare dates in PostgreSQL timestamp with time zone?

In my PostgreSQL database, there is a field labeled as "timestamp with time zone compare" Currently, I am trying to implement a data range comparison using JavaScript var start = Date.UTC(2012,02,30);//1333065600000 var end = Date.UTC(2013,02,30); //136 ...

Enhance the functionality of the 'validate as true' function

I have an object that resembles the following $scope.object = { Title: 'A title', Status: 'Open', Responsible: 'John Doe', Author: 'Jane Doe', Description: 'lorem ipsum dolor sit' } My aim now i ...

Redirecting an autoplaying HTML5 video to full screen upon completion

Although I have seen this question asked before, I am struggling to make it work. I am new to javascript and only have a basic understanding of it. I have a link on my website that directs users to a full-screen video that autoplays, which is working fine ...

Issue with Inline JavaScript in `href` tag not functioning correctly in Firefox

I am encountering an issue with this inline JavaScript not working in Firefox. I need to figure out how to make it function correctly in Firefox. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> ...

Alternative techniques apart from submitting

Within my PHP submit form, I have integrated a PHP image gallery that pulls images from a specific folder (with a dropdown to select images from different folders). When I click on an image in the gallery, the path to that image is automatically entered i ...

Troubleshooting "Module Not Found" issue with Vue.js single page component integrating Google Maps

I'm facing an issue while trying to integrate a Google Map from the Google Maps API into my Vue.js application. I have obtained my API key and made an attempt to display the map. However, upon running the app, Atom throws a "Module not found" error me ...

Finding the right URL for an ajax request in a JavaScript file

Currently, I am dealing with an ASP MVC application. To streamline the process, I have created a clients.js file that includes an ajax method to call a controller and retrieve data. However, the URL structure of the page where this function operates is cau ...

Is it feasible to utilize Google Calendar API for JavaScript through npm install? Alternatively, can the Google Calendar API be utilized for Node.js in the browser within Next.js?

Looking to integrate the Google Calendar API as a library in your Next.js project without using _document.tsx? I have explored two potential approaches for achieving this: Utilize the google calendar api for JavaScript by installing it via npm Use the goo ...

What is the best way to implement an event listener for every button in a table row outcome?

I have a Rails application where I am populating a table using an @results variable, with each row representing a @result. My goal is to have buttons associated with each @result, and I'm attempting to use a JavaScript event listener for each button a ...

Is there a way to instruct npm to refrain from installing any dependencies when users install my npm module?

After developing and publishing an NPM module, I noticed that it does not require any additional dependencies to function properly since it is already fully built. Despite this, when the module is installed in a different repository, it somehow triggers u ...

What is the procedure for loading a tsv file into a node server using D3 within an AngularJS environment?

I am experienced in visualizing data with AngularJS, D3.js, and node.js. Below is the structure of my application: Application/ client/ app/ app.js index.html dashboard/ dashboard.html dashboard.js dashboar ...

The Angular material datepicker is not accurately capturing the date I am trying to select

I am facing an issue with the Angular Material datepicker where it does not select the date I choose. Instead, in my AngularJS controller, I always get the sysdate even if I select another date. Can anyone help me figure out what I am doing wrong? Here is ...