Trouble with UpdatePanel: Why isn't the content page running javascript?

I am facing an issue with a gridview, bootstrap modal that is nested inside an update panel on a content page referencing a master page.

The gridview comprises of 3 columns and a linkbutton.

Even though I expect the javascript to be triggered when the Linkbutton event is fired, it fails to do so.

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(funct1);

Although I've attempted this solution, I encounter a 'sys undefined error' in the console.

This is a snippet of my code:

GridView -> View Button ->

var link = (Control)sender;
            GridViewRow row = (GridViewRow)link.NamingContainer;
            Label LiD = (Label)row.FindControl("LabelID");
            id = Convert.ToInt32(LiD.Text);
            Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "funct1()", true)            
             MandateDetailusingId(id);

I also gave a shot at using:

//ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "MyFunction", "funct1()", true);

Here's the javascript function being referenced:

function funct1() {
            $('#<%=MandateView.ClientID%>').modal("toggle");
            return false;
        } // div id="MandateView"

Is there a way to trigger the pop-up modal given that everything exists within the updatepanel?

javascriptc#asp.netupdatepanel

Answer №1

After much persistence, I was able to successfully resolve the issue with 

    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitialiseSettings);

function InitialiseSettings(){
    // insert your DOM Loaded settings here. 
    // If you already have a document.ready event, 
    // simply extract the function portion and insert it here. 
    // Do not include document.ready 
    $(element).slideUp(1000, method, callback});

    $(element).slideUp({
                   duration: 1000, 
                   easing: method, 
                   complete: callback});
}

triggered on the page.

A big thank you to the resource provided in this link:

https://stackoverflow.com/questions/14038684/execute-javascript-after-a-partial-postback-of-an-updatepanel

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 sets apart the process of installing AngularJS and AngularJS Core using NuGet?

I am curious about the difference between these two packages in my packages.config file. Would it be advisable to uninstall one of them? <?xml version="1.0" encoding="utf-8"?> <packages> <package id="angularjs" version="1.3.15" targetFr ...

javascriptangularjs

What causes TypeScript to generate an error when using two array of object types, but not when using the shape of both?

There are two basic types of data available: type DataA = { percent: string; exchange: string; }; type DataB = { price: number; exchange: string; }; I'm puzzled as to why TypeScript gives errors when I try to use both types together: const ...

javascriptarraystypescriptjavascript-objects

What is the best way to eliminate an object from an array by using Lodash?

Seeking assistance in removing an object from an array using Lodash. Within server.js (utilizing NodeJS): var lodash = require('lodash')(); var rooms = [ { channel: 'room-a', name: 'test' }, { channel: & ...

javascriptnode.jslodash

Change a Vue route parameter from title to id

As I develop a course website, each course is assigned its own page URL. For example, when accessing course number 1, the link appears as http://localhost:8080/course/1 . However, I aim to customize it to display as http://localhost:8080/course/course-name ...

javascriptvue.jsvuejs2vue-componentvue-router

Which jquery Grid is capable of handling a constant flow of updates in json format?

Provided below is a brief summary of this extensive post (please read the entire post to provide an answer): Current Implementations: The website retrieves a large json dataset (approximately 30kb, already compressed) The data is rendered as an HTML tab ...

javascriptjqueryjsonsortinggrid

Using Jquery to tally the number of JSON elements

I'm currently developing a chart system that pulls data from an AJAX JSON response. My goal is to categorize certain JSON objects based on color and month. For instance, I aim to organize all the colors (Red, Blue, Yellow) into separate groups and th ...

javascriptjqueryjsonhighcharts

The AngularJS Input Validation TypeError occurs when attempting to use an undefined function for validation

Currently, I am working on input validation using Angular. However, when the function is triggered, all elements return as undefined. The crucial code snippets are provided below, but do let me know if you need more information. Your assistance is greatly ...

javascriptangularjsvalidationangularjs-directive

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Hey there, I'm currently working on a beginner project and could use some assistance. My project involves creating a basic BMI calculator using metric units, but I seem to be encountering issues with rounding numbers. Here is a snippet of my code: var ...

javascript

How can I prevent 401 unauthorized errors from appearing in the console?

I am facing an issue with a Vue.js function that sends data to the back-end for user login. When the user doesn't exist, it returns a 401 unauthorized error. While I can handle this error, it keeps getting logged in the console. Is there a way to prev ...

javascriptvue.js

How can I use C# controller code to compare arrays within an array in a JSON file?

I've been working on aligning my model code with the structure of a json file. The json file contains a jsonArray called ReportList, which is functioning properly. However, I encountered an issue with the accountlist array nested within the items arra ...

c#.netjsonmongodb

Generate new variables based on the data received from an ajax call

Suppose there is a .txt file containing some integers separated by spaces, like '22 1 3 49'. I would like to use Ajax to read the file as an array or list, and then save each integer as a JavaScript variable. Currently, this code reads all cont ...

javascriptjqueryajax

A guide on extracting data from an HTML table containing various input fields

I have a webpage with this table generated by a PHP script. What I need to do is extract the values from each of the 4 input fields and save them in separate JavaScript variables. Each button already has an onclick="fetchGrades(); trigger added. How can ...

javascriptphpjqueryhtml-table

In my app.post request in node.js and express, the body object is nowhere to be found

Having an issue with node.js and express, trying to fetch data from a post request originating from an HTML file. However, when I log the request, the req.body object appears empty. I've added a console.log(req.body) at the beginning of my app.post(" ...

javascriptnode.jsexpress

Tips for retrieving the selected item from Material-UI DropDownMenu

Hello fellow StackOverFlow users, I am new here so please be patient with me In my React app, I am using Material-UI's DropDownMenu to collect information from users. However, the issue I'm facing is that the value being pushed to state is an in ...

javascriptreactjsmaterial-ui

Insert a 3D model at the location where the mouse is clicked using the three.js library

: I am attempting to incorporate a 3D model into the scene upon mouse click, where the mesh should align with the point clicked by the mouse. This involves utilizing raycasting and projection techniques. The code for the mouseClick event is as follows: ...

javascript3dthree.jsprojectionraycasting

Utilizing OrientDB in a SailsJS Application: A Step-by-Step Guide

I'm diving into the world of NodeJS and SailsJS after working with Rails and PHP. I'm interested in integrating SailsJS with OrientDB, but I'm unsure of the best approach to take. I've come across two options so far, but the available ...

javascriptnode.jssails.jsorientdbwaterline

Issues are arising with back4app's cloud code due to an invalid function being

My current challenge involves implementing a payment system in an iOS app using Conekta. Previously, everything was working smoothly with Braintree in the cloud code on Back4App, but after switching to Conekta, the Back4App calls keep failing with an "Inva ...

javascriptiosnode.jspaymentback4app

SyntaxError: An invalid character was encountered (at file env.js, line 1, column 1)

This marks my debut question so kindly indulge me for a moment. I recently stumbled upon a guide that outlines how to dynamically alter environment variables in a React project without the need for re-building. You can find the guide here. The method work ...

javascripthtmlreactjsenvironment-variables

employing variable in front of json notation

For my github-gist project, I am using JavaScript and AJAX to customize the file name. Here is the JSON data I am working with: var data = { "description": gist_description, "public": true, "files": { "file.txt" : { "content": gist_conten ...

javascriptjsongithubgithub-apigist

Transferring data from a jsp button click to a servlet

Hey there! I'm fairly new to jsp and servlets and I'm trying to figure out how to pass a value to a servlet upon clicking a button. Below is the code snippet that I have been working on. web.xml <servlet> <servlet-name>Login</serv ...

javajavascriptajaxjspservlets