CODEWITHSUNDEEP
javascriptc#jqueryasp.netajax
Java Nerd
Java Nerd

Reputation: 968

Changing a div/text using AJAX

Hello there I am totally new to ASP.NET and learning it to my own. I am good at Java J2EE (Struts2 Framework)! I know how can i update or change any control/text inside any div element using struts2 and ajax code.

My Problem

Actaully, I'm trying to do the same thing in ASP.NET just for the learning! Suppose that I have a Default.aspx page with the javascript and ajax methods as:

 <head runat="server">
  <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  </script>

  <script type="text/javascript">
    function Change() {
        $.ajax({
            type: "GET",
            url: "temp.aspx",

            dataType: "text/html;charset=utf-8",
            success: function(msg) {
                $("#changer").html(msg);
            }
        });
    }
  </script>
  <title>Untitled Page</title>
 </head>
<body>

  <div id="changer">//this is the div i want to update it using ajax
    Hello Old Text
  </div>
    <input type="button"id="but" value="Hello Changer" onclick="Change()"/>

</body>

and suppose that I have my temp.aspx as:

 <head runat="server">
   <title>Untitled Page</title>
 </head>
 <body>

  <div id="changer">
    Hello New Text
  </div>

 </body>

I just want to know if this is possible in ASP.NET because with Java I am familiar with such an operation but I don't know why this is not working in case of ASP.NET!

Any hints or clues are favorable for me, Please don't mind for my question because I am totally new to ASP.NET but I am good at Java

Thanks in Advance!

Upvotes: 1

Views: 3402

Answers (2)

Berkay Yildiz
Berkay Yildiz

Reputation: 605

dataType must define as html like this;

function Change() {
    $.ajax({
        type: "GET",
        url: "temp.aspx",

        dataType: "html",
        success: function(msg) {
            $("#changer").html(msg);
        }
    });
}

From jQuery Docs;

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String

Additionally, you can inspect errors using error.

function Change() {
    $.ajax({
        type: "GET",
        url: "temp.aspx",

        dataType: "html",
        success: function(msg) {
            $("#changer").html(msg);
        },
        error: function(xhr, status, err) {
            console.error(status, err.toString());
        }
    });
}

This is not related to ASP.NET or other web frameworks. It is just related to jQuery and Javascript. jQuery didn't recognise this "text/html;charset=utf-8". If you didn't use dataType, the ajax request worked successfully. It is just verification and result is interpreted according to dataType. For example, you are returning a JSON and the mime type of the your endpoint is not json (considering its mime type is html) just changing of the dataType as "JSON" you can parse the result as object.

I wrote a little script, in first example, I set dataType as HTML and in other example, I set dataType as JSON. enter image description here

Upvotes: 2

Pieterjan Stevens
Pieterjan Stevens

Reputation: 31

You could add a generec handler called Temp.ashx wich return the new text.

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello New Text");
        }

In your ajax call you need to specify you are expecting a text.

 <script type="text/javascript">
    function Change() {
        $.ajax({
            type: "GET",
            url: "temp.ashx",

            dataType: "text/plain",
            success: function(msg) {
                $("#changer").html(msg);
            }
        });
    }
  </script>

Upvotes: 0

Related Questions