CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net
Mohan Perera
Mohan Perera

Reputation: 370

jQuery get() method with callback function

I'm researching on jQuery as a apprentice to jQuery.

In my jindex2.html file, I have used below jQuery code block to get data from a external file called test.asp

$(document).ready(function(){
  $("btn1").click(function(){
    $.get("test.asp", function(content, status){
      alert("This is the content of the file :- " + content + "\nStatus is :- " + status);
    });
  });
});

Content of the test.asp file is as below.

<%
response.write("Mohan Perera from Panadura")
%>

Below I have display my whole code of jindex2.html file.

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

$(document).ready(function(){
  $("p").click(function(){
    $("#img1").hide();
  });
});
  
$(document).ready(function(){
  $("btn1").click(function(){
    $.get("test.asp", function(content, status){
      alert("This is the content of the file :- " + content + "\nStatus is :- " + status);
    });
  });
});
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #5d90fd;
}

#panel {
  padding: 50px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Image Disappear</h2>
<p>This jquery application will help us to make invisible the below image</p>
<img src="imgeJquery.png" id="img1" /><br/>

<div id="flip">Click on this !</div>
<div id="panel">Because time is valuable, we deliver quick and easy learning.<br>
    At W3Schools, you can study everything you need to learn, in an accessible and handy format.</div><br/>

<form>
  <input type="button" id="btn1" value="Click !"/>
</form>

The other two jQuery I have used are working properly. But the above mentioned one is not working. I wanted to display the content of the test.asp file in an alert box, once I click on the btn1 (Click !). Please help me to do that, by showing my error here.

Upvotes: 1

Views: 2391

Answers (3)

Vikas singh
Vikas singh

Reputation: 3889

You can also do it like this 

$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test.asp", function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});

And Your Button Should be like this 

<button>get the result back</button>

Upvotes: 0

Renzo Calla
Renzo Calla

Reputation: 7706

Select your button element by its Id with # at the beginning

$(document).ready(function(){
  $("#btn1").click(function(){
    $.get("test.asp", function(content, status){
      alert("This is the content of the file :- " + content + "\nStatus is :- " + status);
    });
  });
});

Upvotes: 1

K.B
K.B

Reputation: 885

In below jQuery use have missed to # while adding event to button(id:btn1).

if you are writing based on id #(tag id) -> #btn1, if it class .(tag class) ->.btn1

Try below code

$(document).ready(function(){
  $("#btn1").click(function(){
    $.get("test.asp", function(content, status){
      alert("This is the content of the file :- " + content + "\nStatus is :- " + status);
    });
  });
});

Upvotes: 3

Related Questions