I try to populate data in alert box on button click but when I click on button then alert box not populate
I try this
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="submitchart" runat="server">Show Chart</button>
</div>
</form>
</body>
<script type="text/javascript">
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});
//});
</script>
when I write alert("i") after this line $('#submitchart').click(function () { then alert box populate but when i write alert ("i") after the success: function() { then alert box not populate
any solution?
$(function () {
$("#submitchart").on("click", function () {
debugger;
alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function () {
//alert(JSON.stringify(response.d));
debugger;
alert("i");
},
error: function () {
debugger;
alert("i");
}
});
ajax will be run error,don't run success
Give button type as button.
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="submitchart" type="button" runat="server">Show Chart</button>
</div>
</form>
</body>
<script type="text/javascript">
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
url: 'WebForm1.aspx / Jqufunc',
data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});
//});
</script>
This one worked for me.
This happening because when you write alert("i") after $('#submitchart').click(function () { then its not dependent on success of any ajax call and ot works fine as it should but when you write this after success: function() { then it is dependent on ajax call and if there is some errors in ajax it will not run as you have only defined it for successful ajax.
Write this if ajax contains errors also
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
},
error: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});
Related
I'm trying to call a JS method that uses ajax and jQuery from a .js file. I have the JS method defined in a .htm file, and I have access to some, but not all of the defined methods
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js">
function testingAjax() {
$.ajax({
type: "GET",
url: 'IISHander1.cs/DeleteItem',
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success on all frontiers");
},
error: function (e) {
alert("Something Wrong.");
}
});
}
</script>
and I have another script right under that which defines:
function testingScope() { alert("in Scope");}
I've tested both and I can only call testingScope. The other results in a method not found error. Why is this?
A script tag can't have both an src and code text inside it. When the src exists the textual code will be ignored
Change to
<script>
function testingAjax() {
$.ajax({
type: "GET",
url: 'IISHander1.cs/DeleteItem',
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert("success on all frontiers");
},
error: function(e) {
alert("Something Wrong.");
}
});
}
</script>
<!-- moved below so you can call testingAjax() in this script -->
<script type="text/javascript" src="js/script.js"></script>
i want to post two items into server by using ajax in java-script; based on server-side document the post url is like this
http://example.com/h/{first-item}/{second-item}
this is my java-script code:
$('#add-order').on('click', function() {
var name = $('#name');
var drink = $('#drink');
var order = ?? // my question is this part what should i add
$.ajax({
type: 'POST',
url: 'http://example.com/h/',
data: order,
contentType: 'application/json',
success: function(data) {
console.log("Data added!", data);
}
});
});
and this is my HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="input-group">
<h4>Add a Coffee Order</h4>
<p>name: <input type="text" id="name"></p>
<p>name_space: <input type="text" id="drink"></p>
<button id="add-order">Add!</button>
</div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
i am a new in ajax, thanks for your help.
You have to set the contentType to application/json in your Ajax request.
i.e as following:
$.ajax({
type: 'POST',
url: 'http://example.com/h/',
data: order,
contentType: "application/json",
dataType: "json",
success: function(data) {
console.log("Data added!", data);
}
});
});
here is an example for creating and encoding a json object.
var myObj = {
"name": $('#name').val(),
"drink": $('#drink').val()
};
var order = JSON.stringify(myObj);
Hard to really understand the post here, but it seems to me you simply forgot to mark the ajax requests contentType as json. See example below.
$.ajax({
type: 'POST',
url: 'http://example.com/h/',
data: order,
contentType: 'application/json'
dataType: 'json',
success: function(data) {
console.log("Data added!", data);
}
});
When i press the link the program should go to the ajax function to update the database without reloading the page.
the problem is when the link is pressed doesnt enter in the JS function (doesnt show the alert)
<a href="#" onclick="xpto2()" >Remind later</a>
<script>
function xpto2(){
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get', )
success: function(output) {
alert(output);
}
});
</script>
Fix your xpto2 function. There are syntax errors. This should be something like this.
<script>
function xpto2() {
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get',
success: function(output) {
alert(output);
}
});
}
</script>
Make sure jQuery is present.
Keep browser console opened for better insights.
Here's a full template to try.
updates
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function xpto2() {
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get',
success: function(output) {
alert(output);
}
});
}
</script>
</head>
<body>
<a href="#" onclick="xpto2()" >Remind later</a>
</body>
</html>
I am trying to get user information by using twitter api. The jquery code is below :
<script type="text/javascript">
function GetUser() {
$.ajax({
type: "GET",
url: "http://api.twitter.com/1/users/show.json?user_id=id&include_entities=true&callback=?",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
cache:true,
timeout:8000,
success: function (json) {
alert("Successfull");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
alert(thrownError);
}
});
}
</script>
xhr.responseText:undefined
thrownError:[object Error]
And html code :
<input type="submit" value="Submit" onclick="GetUser();" />
First your URL is not correct. Instead of
user_id=id
in your URL you have to use a actual value for id (id is just placeholder in your case). For example:
user_id=82193320
which would give you the data for my twitter user (uwe_guenther) back.
You can easily lookup twitter ids here:
http://mytwitterid.com/
If you just want to lookup user data by screen name you could use:
screen_name=uwe_guenther
instead.
The Twitter API description can you find here:
https://dev.twitter.com/docs/api/1/get/users/show
I have attached a working example for looking up screen_name by user_id and user_id by screen_name here:
The jsFiddle with the following example can be found here: http://jsfiddle.net/uwe_guenther/EvJBu/
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id='userIdTextField' type='text' placeholder='user_id'/>
<input id='userIdSubmitButton' type="submit" value="Submit"/>
<div id='screenNameResultView'></div>
<br>
<input id='screenNameTextField' type='text' placeholder='screen_name'/>
<input id='screenNameSubmitButton' type="submit" value="Submit"/>
<div id='userIdResultView'></div>
<br>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src='main.js'></script>
</body>
</html>
main.js
$(document).ready(function (){
$('#userIdSubmitButton').click(function (){
var userId = $('#userIdTextField').val();
$.ajax({
type: "GET",
url: "http://api.twitter.com/1/users/show.json?user_id=" + userId + "&include_entities=true&callback=?",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
cache:true,
timeout:1000,
success: function (json) {
alert("Successfull: screen_name=" + json.screen_name);
$('#screenNameResultView').text("screen_name=" + json.screen_name);
console.log(json);
},
error: function () {
alert("No Result");
}
});
});
$('#screenNameSubmitButton').click(function (){
var screenName = $('#screenNameTextField').val();
$.ajax({
type: "GET",
url: "http://api.twitter.com/1/users/show.json?screen_name=" + screenName + "&include_entities=true&callback=?",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
cache:true,
timeout:1000,
success: function (json) {
alert("Successfull: user_id=" + json.id);
$('#userIdResultView').text("user_id=" + json.id);
console.log(json);
},
error: function () {
alert("No Result");
}
});
});
});
Your Url is wrong
<script type="text/javascript">
function GetUser() {
$.ajax({
type: "GET",
url: "http://api.twitter.com/1/users/show.json?user_id=id&include_entities=true&callback=?",//this is wrong
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
cache:true,
timeout:8000,
success: function (json) {
alert("Successfull");
},
error: function () {
alert("cant search");
}
});
}
</script>
Here is a workin example http://jsfiddle.net/kMgES/
$.ajax({
url: 'http://api.twitter.com/1/users/lookup.json?screen_name=noradio&callback=?',
type: 'GET',
dataType: 'json',
timeout: 8000,
success: function (data) {
alert(data[0].name);
},
error: function () {
alert("cant search");
}
});
In this example the search is done by screen name. Take a look at https://dev.twitter.com/docs/api/1/get/users/show for all possible options.
Consider using this for error handdling
error: function(XMLHttpRequest, textStatus, errorThrown){
// error handling
}
I'm using this script to get all values from a form, in order to prepare it for an ajax request:
function saveDataAjax(){
var fd = new FormData();
var inputs = document.getElementsByTagName('input');
for(i=0;i<inputs.length;i++) {
fd.append(inputs[i].name, inputs[i].value);
}
$.ajax({
url: '/edit.php',
data: fd,
type: 'POST',
dataType: 'html',
success: function(data){
alert(data);
}
});
}
However I'm getting a Type error from jQuery, and if I alert fd['inputname'] I get undefined, so I guess I must be doing something wrong somewhere...
Firefox debuggers tells me this: NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object # http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2
Add the following to the AJAX call:
processData: false,
contentType: false,
So it looks like:
$.ajax({
url: '/edit.php',
data: fd,
type: 'POST',
processData: false, //Add this
contentType: false, //Add this
dataType: 'html',
success: function(data){
alert(data);
}
});
This is probably not the reason, but just wanted to point it out: i is global here. The idea in JS is towards global abatement. Should probably be var i=...
this page help you ...:)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
</head>
<body>
<form method="post" id="fileinfo" enctype="multipart/form-data">
file <input type="file" name="slug"><br>
<input type="button" id="uploadBTN" value="Stash the file!"></input>
</form>
<script type="text/javascript">
$(document).ready(function()
{
$('#uploadBTN').on('click', function()
{
var form = $('form').get(0);
console.log(form);
var fd = new FormData(form);
fd.append('user_id',4);
fd.append('user_media_category_id',1);
//console.log(fd);
fd.append("user_", "This is some extra data");
$.ajax({
url: 'http://localhost/yii2/azstudio/project/api/web/v1/user-media/new',
type: 'POST',
data: fd,
success:function(data){
console.log(data);
},
error:function(data){
console.log(data);
},
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</body>
</html>