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

When provided with varied inputs, new Date() yields distinct values for various time zones

var date1 = "2015-03-29"; console.log(new Date(date1)); //Output:Sun Mar 29 2015 05:30:00 GMT+0530 (India Standard Time) var date2 = "1869-12-31"; console.log(new Date(date2)); //Output:Fri Dec 31 1869 05:53:20 GMT+0553 (India Standard ...

Using Grails to create remote functions with multiple parameters

Currently, I am able to send one parameter to the controller using the code snippet below in Javascript: <g:javascript> var sel = "test"; <g:remoteFunction action="newExisting" method="GET" update="updateThis" params="'sel='+s ...

Error: VueJS mixins do not include the property definition

I've been trying to incorporate Mixins into my Vue.js code, but I've run into a few issues :/ Here's the current code for two test modules : ErrorBaseMixin.vue <script> import ErrorAlert from './ErrorAlert'; expor ...

Resizing svg to accommodate a circle shape

As I work on my vue.js app that involves a plethora of diverse icons, I made the decision to create a small icons builder in node.js. The purpose is to standardize their usage and also "crop" each SVG so it fits perfectly within its parent container by uti ...

Which is more effective: utilizing the "hidden" CSS attribute or fetching every new set of images individually?

Currently, I am attempting to retrieve a collection of photo data from Flickr by making a jQuery AJAX request using JSONP. The goal is to exhibit n images in succession, then proceed to display the next set of n images whenever the user selects a button. ...

Unable to display images in the ngImgCrop upload preview modal screen

Currently, I am utilizing ngImgCrop to enable an upload preview and square crop feature for profile pictures. Unfortunately, I am experiencing issues where neither the image preview nor the cropping functionality are being displayed. 'use strict ...

What is the best way to confirm if a Json response is empty or not?

{"PatientPastMedicalHistoryGetResult":{"PastMedicalHistory":[]}} The PastMedicalHistory object does not contain any values. How can I verify if it is empty? ...

Collections of ajax triumphs

$(".btn_tab").click(function() { var ids = new Array(); $i=0; $(this).ajaxSuccess(function(e) { alert($i); $( ".tab-content .active table tbody tr td a.elusive-align-justify" ).each(function() { ...

Auth0 encountering issues retrieving ID token and user metadata

Currently in the process of integrating Auth0 into a Vue.js/Node.js application, I have successfully enabled user registration and login functionality (to /callback). Although the manual addition of data to the user metadata section is functional at this s ...

Using VueJS to Bind an Array of Integer Values to Checkbox Models

I encountered a discrepancy between VueJS 1.0 and VueJS 2.0 regarding checkbox behavior. In VueJS 1.0, when binding checkboxes to a list of integers in v-model, the integers do not register as checked attributes. Below is the HTML code snippet: <div i ...

Unable to locate element using document.getElementById in ASP.NET form

Currently, I am working on a project to create an ASP.NET webforms page that will showcase a Google map using the Google Maps JavaScript API with multiple markers. Everything is functioning smoothly as long as I don't place <div id="map-canvas"> ...

Generate and save a document

Upon clicking the button, I am trying to generate a CSV file and download it right away. My current approach is as follows: html: <a class="btn btn-primary" @click="downloadCsv">Download CSV</a> <a v-if="fileObjectUrl !== null" ref="down ...

Out of Sync Promise Chain

I recently encountered an issue with promise chaining in JavaScript, specifically while working with Vue.js. Here is my code: I have an addItem function that inserts an item into the database. My goal is for this function to first insert the data into the ...

What specific types of errors is this try-catch block designed to catch and manage?

// This function establishes a connection to MongoDB using Mongoose const connectToDatabase = (url) => { return mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log('Conn ...

Error in parsing string data in Django Chart.js ajax using javascript

I'm currently working on creating a chart web page using Django and Chart.js within the views.py file of the Django framework. class ChartView(TemplateView): template_name = 'graph.html' def get_context_data(self, **kwargs): ...

Limiting the scope of the jQuery scrollToFixed functionality within various nested DIV elements

I have been grappling with this issue for the past two days without success. I am utilizing the ScrollToFixed plugin from https://github.com/bigspotteddog/ScrollToFixed and my goal is to restrict the fixed positioning within a parent DIV. Despite scouring ...

jQuery divs seem to "gaze up" towards the mouse pointer

I am attempting to recreate a fascinating effect using jQuery - where "cards" move in response to the mouse cursor as if they are looking up at it. I have come across a script that almost achieves what I need, but I require the ability to control the mov ...

Ionic 2: Unveiling the Flipclock Component

Can anyone provide guidance on integrating the Flipclock 24-hours feature into my Ionic 2 application? I'm unsure about the compatibility of the JavaScript library with Ionic 2 in typescript. I have searched for information on using Flipclock in Ionic ...

Minimize data once more using various key criteria

In my current setup, I have created a view that counts reports for different cities. function (doc) { if(doc.type == "report") { emit(doc.city_name, null); } } Using the _count reduce function, I get the following values: {'key': &a ...

Blazor Razor Component Library (RCL) Lacks CSS IntelliSense

I am encountering an issue with the CSS intellisense in my razor class library (RCL) that houses all the pages of my Blazor application. It appears that the CSS intellisense is not functioning within the RCL unless I modify the RCL .csproj xml tag From Sdk ...