The visibility of the Google +1 button is lost during the partial postback process in ASP.NET

When trying to implement the Google Plus One button using AddThis on one of our localized pages, we encountered a strange issue. Despite retrieving data from the backend (let's assume a database), the plus button was not loading during an AJAX based partial postback.

The following HTML snippet is dynamically added to the page only during a partial postback:

<div class="addthis_toolbox addthis_default_style" style="float:right;">
   <a class="addthis_button_google_plusone" g:plusone:size="small"></a>
</div>

Simultaneously, the script is included through:

ScriptManager.RegisterStartupScript(Page, typeof(string),
                                    "RegisterHTMLScript" + scriptID,
                                     scriptstring,
                                     false); 

The value of scriptstring is as follows:

<script type="text/javascript">
     var addthis_config = {"data_track_clickback":true};
     if (window.addthis) {
        addthis.toolbox('.addthis_toolbox'); 
        addthis.init(); 
     }
     else {
       $.getScript('http://s7.addthis.com/js/250/addthis_widget.js#username=XXXXX&domready=1'); 
       $.getScript('https://apis.google.com/js/plusone.js'); 
     }
 </script>

No client-side errors are visible, yet the +1 button remains invisible. What could be causing this issue?

I attempted the following instead of RegisterStartupScript: 1. Adding ScriptReference programmatically to the current ScriptManager. 2. Using the RegisterClientScriptInclude method on the ScriptManager.

However, I achieved almost the same result.

Answer №1

Let's dive in,

When ASP.NET AJAX undergoes a partial postback, it requires knowledge of the dependent scripts to be downloaded in order to declare "DOCUMENT IS READY" once they are all fetched. In versions of ASP.NET before 3.5, adding "notifyscriptloaded" is the sole method for ASP.NET to identify that a dependent script resource needs to be retrieved - specifically during a partial postback.

By registering a script with notifyscriptloaded, ASP.NET delays executing the document ready function until the script has been successfully downloaded. This guarantees that the script's document ready event is triggered as intended. NOTE: ASP.NET 4.0 no longer requires this step (albeit the exact approach used remains unclear).

The issue at hand is now evident. When utilizing an external third-party JavaScript file as a reference, ASP.NET restricts us to including it only within the static page header (or master page). This means there is no way to download the script during a partial postback - unless you have control over the third party script and can incorporate "notifyscriptloaded" within it.

The resolution required me to convert this external third-party script into a static reference within the page header. Fortunately, this adjustment was not problematic since I already had multiple instances of the +1 button dispersed across various pages.

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

What is the best way to use ReactJS to remove the last 3 characters from a selected text?

How can I display text on a webpage while cutting off the last 3 characters? For example, Python%22 should be displayed as Python I attempted to use substring() but it doesn't seem to be working correctly. Any help would be greatly appreciated! rende ...

Trying out the Deezer app and receiving the message: "Please provide a valid redirect URI."

While testing an application using the Deezer JavaScript SDK, I encountered an issue when trying to login as it prompted me with a "You must enter a valid redirect uri" message. Here is the setup: DZ.init({ appId: '000000', channelUrl: ...

Experiment with re-rendering advertisements using Vue.js

Hey there, I'm new around here so please be patient with me if I make any mistakes :D So, onto my question! I have a website built with vuejs and I want to incorporate some ads into it. To do this, I have created some components: <template> ...

Action in ASP.NET MVC API is giving a 404 error, while the rest of the actions are

I am facing an issue with my Angular application that calls an ASP.NET WEB API. There is a specific method added to one of the API controllers which returns a 404 error, while all other methods on the same controller work fine. The app is being hosted loca ...

Move on to a different screen in a React Component once the data has been fetched

Currently, I am delving into the world of React and TypeScript and attempting to utilize "react-router-dom" in order to create a login component that will interact with my backend server. Essentially, my goal is to develop a "Login" class that, upon form ...

jQuery Datatables provide a powerful and customizable way to display

I've been working on a project that requires me to incorporate Grid functionality into the displayed data. To achieve this, I'm utilizing the Datatable plugin from jquery. The implementation is smooth and flawless. However, a concern arises wh ...

What is the best way to retrieve the errors recorded property from a customized input component that has been validated with vee-validate?

I am currently exploring the use of VeeValidate within a custom input component. In my attempts, I have experimented with using $emit on both @input and @blur events. However, I have encountered an issue where validation takes place in the next tick, caus ...

Discover the procedure for extracting a dynamic value from JavaScript to PHP

Could the centerId value be utilized and transferred to a php variable? const data = { action: 'ft-add-member', maritalStatus: $('.ft-entry-relationship-info .ft-marital-status ul li.current a').data('dropdown' ...

The JSON.stringify() function helps to convert data into a JSON-formatted string, avoiding any potential "c

connection.query( 'SELECT DeskName FROM desks WHERE stat = ?',["Booked"], function(err, rows){ if(err) { throw err; }else{ try{ var dataToParse = new Array(); dataToParse = rows; res.render('workspaces.html',{parsedArray : JS ...

removing the mapStateToProps function will result in an undefined value

I am new to React and I'm in the process of converting a class component to functional components using hooks. I need some guidance on safely removing 'mapStateToProps' without encountering undefined errors. I have two pages, A.js and B.js. ...

Searching for the way to access the values of a nested object's ref in Vue JS?

Within my Vue data object, I store a reference to a structure called Plot. It has properties for length, width, and acreage. interface Plot { length: number, width: number, acreage: number } const model = { plot: ref<Plot[]>([]), }) When fe ...

Having trouble sending a POST request to a Node.js HTTP Webserver unless it's from the localhost

I am currently facing an issue while attempting to transfer text/data from a client browser to a Node.js webserver. Whenever I try to use any IP address other than localhost, I encounter a "POST ERR_CONNECTION_TIMED_OUT" error. Below is the code snippet f ...

Observing the occurrences of JavaScript events

Is there a way to track all JavaScript events in the browser? Such as, identifying the functions that have been executed and the parameters that have been passed in each JS file? I'm dealing with some obfuscated code and I'm looking to determine ...

Objects cannot be rendered inside JSX. An error is thrown stating that Objects are not allowed as a React child, with the specific object being [object Promise]

Within my React project, I have a Class-based component that serves as a child component. The state it relies on is passed down from a parent component. Within the JSX of this component, there is a map function that iterates over a platformsList array. Whi ...

How can I conditionally disable a button in Vue.js using an if statement?

Can someone help me figure out why all my buttons are getting disabled when I only want one to be disabled? Here is the code where I created a counter with vue.js: <body> <div id="app"> <button @click="co ...

Prevent the href from navigating to the next page when a doubleclick event listener is triggered

In my project, I am using an anchor tag that redirects to another page. However, if the user double clicks on it, I want to prevent the default behavior and stop the redirection. <a href="{location}">My Link</a> element.addEventListen ...

Dealing with a checkbox click event in Vuejs when there is no parent element involvement

In the table below, you can see checkboxes displayed as images: example image of a table with checkboxes Here is an example code snippet: <tbody> <tr @click="goDetail"> <th scope="row><input type="checkbox" /></th> <t ...

Exploring the issue of $scope variable changes not reflecting in ng-show elements in AngularJS

I am in the process of creating a website that includes a video element. For those interested, here is a link to the code for my page on Plunker: http://plnkr.co/edit/5NUnZ2KET1apWwxMxjex?p=preview The video on the website utilizes the html5 video tag, a ...

In search of the most efficient method for integrating an AJAX-powered TreeGrid feature

Can anyone recommend an Ajax/TreeGrid implementation that meets the following criteria: Must support server side sorting Should be able to load leaf nodes on demand, meaning only children of open nodes are loaded Needs to support paging so that nodes are ...

Does utilizing this.someFunction.bind(this) serve a purpose or is it duplicative

As I analyze someone's code, I stumbled upon the following snippet: this.device_name.changes().onValue(this.changeName.bind(this)) My interpretation so far is that onValue requires a callback function, which in this case is this.changeName.bind(this ...