Utilizing ajax for refreshing a container

My asp.net webform includes a div element called 'contents' with some HTML content loaded into it from the codebehind file. I am trying to mark up certain text within this HTML so that when clicked by the user, it sends a message back to the server and populates a textbox on the form with different data.

The challenge I'm facing is figuring out how to communicate back to the server. Here are the specific questions:

  1. How can I use AJAX to send a parameter 'hello' back to the server upon clicking a marked-up text?
  2. Which method on the server should be invoked? Would it be another Page_Load or something else?
  3. After sending the request to the server, how do I update the textbox without reloading the entire page, still using AJAX? Assume receiving 'hello' and sending back 'goodbye' to the textbox

In my aspx file:

And in the codebehind file within form_load:

System.IO.StreamReader rdr = System.IO.File.OpenText("c:\\myHtmlFile.html");
string s = rdr.ReadToEnd();
this.contents.InnerHtml = s;

The HTML content loaded into the div has a JavaScript function and an onclick event:

<script type="text/javascript">
     function myfunction(x)
 { 
  alert("You clicked " + x);
     }
 </script>

 <p  onclick="myfunction('hello')">hello</p>

When 'hello' is clicked, I want TextBox1 to display 'goodbye'. The server needs to handle this interaction without refreshing the webpage.

If you have any suggestions or solutions, please keep them simple. Thank you in advance!

Answer №1

Make sure to reference Microsoft's official documentation for integrating this particular interface:

ICallbackEventHandler

Hopefully, this information proves helpful.

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

Create images from HTML pages with the help of Javascript

Hello there, UPDATE: I am looking to achieve this without relying on any third-party software. My application is a SAP product and installing additional software on every customer's system is not feasible. The situation is as follows:   ...

Switch up the image source with Javascript in a random sequence

Looking to create a script that randomly changes the image source of an element with one specified in an array. However, the variable "target" keeps returning undefined. Can you help? HTML <ul> <li><img src="http://www.placehold.it/20x ...

Favicon is not displaying correctly, appears to be caused by a problem with webpack

I have a React/Redux application and I am using webpack to transpile my JSX and ES6 code, as well as load my stylesheets and images into my JavaScript. My development server is running on port 3000. Below is the content of my webpack.config.js file: var ...

Open an external program

I'm currently working on a local web application and I want to be able to trigger an external application using a button click. I came across this code that works perfectly in an .html file with Internet Explorer, but when I try to implement it within ...

Creating an identifier using a PHP loop and integrating it with JQuery AJAX

How can I make an id reference "logout" clickable in my PHP code? This functionality is crucial for progressing with the project, especially since it involves PhoneGap. PHP File The PHP file retrieves user details from the database. The logout id trigger ...

The error prop in Material UI DatePicker does not function properly when combined with yup and react-hook-form

Currently, I am working on enhancing a registration form using tools such as yup, react-hook-form, and Material UI DatePicker/TextField. My goal is to include a date of birth field that validates whether the user is over 18 years old. Although the error me ...

Utilizing AJAX for seamless communication between JavaScript and PHP within a modal dialogue box

I'm struggling with learning how to effectively use ajax. In the project I'm currently working on, I have a chart where I can select different people. Once I click on a person's button, their information gets updated in the database. However ...

Having trouble loading the Google map after taking a screenshot using html2canvas

I recently attempted to use html2canvas to capture a Google Map image, but unfortunately, the resulting image only displayed the map's direction and not the actual map. Can anyone provide assistance with this issue? Below is the code snippet along wit ...

Please ensure all three of the last checkboxes are ticked before finalizing submission

Here is the list of checkboxes for my PHP form. I am trying to figure out how to write a script that will only allow the form to be submitted if the last three checkboxes are checked. I have tried looking at similar questions but haven't found the sol ...

Can you tell me how to include an edit/delete button for each row in a DHTMLX grid?

Currently, I am in the process of using the DHTMLX grid and I want to include an edit/delete button in every row. I have searched on Google for a solution and so far have only come across information about check boxes and links. I would greatly appreciate ...

Comparing Jscript's impact on CSS classes to the power of Json

On my HTML page, there is a div that looks like this: <div class="circle active" id="prg_inizio"> bla bla bla </div> After making an Ajax call, I receive a JSON result and need to update the class name from "circle active" to "circle done." ...

How can you effectively transfer a parameter from .run to .config?

Currently, I am working on my angularjs ui-route project and have placed a variable called clientid in the .run() core function to store it in $rootScope. However, there comes a point where I need to access this stored variable within the .config() core. ...

Assistance with JSONP (Without the use of jQuery)

I've been putting in a lot of effort trying to understand how to make a JSONP request, but all the reference materials I find are full of jQuery examples. I can go through the jQuery source code, but I prefer a straightforward and simple example. I&ap ...

Loop through a JSON array in a React Native application

Encountering an issue while working in react native involving parsing a JSON object and iterating over a nested array. The goal is to list all profiles objects. Tried the code below but it's not fetching the profiles object. How can I print all profi ...

Condensing a lengthy list by utilizing an array element

I require assistance, Looking at the code below, it is evident that I will have a lengthy list of code to handle an onblur and on focus scenario for a div and an input field. Is there a more efficient way to achieve this without writing separate lines of ...

Transfer a loaded object to a different object using Javascript

Starting with the title, I have an initialized object that looks like this "travellerDetails": { "traveller_1": { "Full Name": "", "Gender": "", }, "traveller_2": { "Full Name": "", "G ...

Error in Angular: Http Provider Not Found

NPM Version: 8.1.4 Encountered Issue: Error: Uncaught (in promise): Error: Error in ./SignupComponent class SignupComponent_Host - inline template:0:0 caused by: No provider for Http! Error: No provider for Http! The error message usually indicates the a ...

Determining the Maximum Number of Characters Allowed in a Div Using jQuery

Could anyone provide guidance on how to populate a div with single characters? I want the div to span the width of the viewport. The code to get the width is: $(window).width(); I would like JavaScript to generate HTML similar to this: <div id="text ...

Validation in Antd's dynamic form remains functional even after rows have been deleted

After going through the Antd documentation, I attempted to implement this code snippet from antd dynamic form item: import { Form, Input, Button, Space } from 'antd'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons' ...

In React Native, changing the translation of an element causes it to shift below all other elements, regardless of

Check out this sandbox project: I'm trying to create a simple animation using translation in React Native, but I'm facing an issue where when I move the element to the right and down, it goes under other elements. However, if I move it left and ...