Ajax will not submit no matter what.
I've been trying for hours...
script:
<script>
$(document).ready(
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
</script>
Try this:
$(document).ready(function({
$("#submit").on('click', function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
I also changed the event method, but you should choose the one corresponding your jQuery version!!
P.S re-check the ({})
You've not written document ready properly. Please check below code :
<script>
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
</script>
I hope this resolves your issue.
PS:
FYI check the alternative ways to write document ready : Documentation
Happy Coding
Related
I have a simple form with one select box and two options in it. Here is the related jQuery code:
$('.myCssClass').on('change', function() {
alert("This is executed");
$(this).parent().submit(function(e) {
alert("This is NOT executed");
$.ajax({
type: "POST",
url: "script.php",
data: $(this).parent().serialize(),
success: function(data)
{
alert(data);
}
});
e.preventDefault();
});
Form is a parent of a select box. So the first alert is executed when I change the select box option, but then next one is never reached. Any idea why?
This should do it. Don't bother with the submit event - it will not be triggered by a select box.
$('.myCssClass').on('change', function() {
$.ajax({
type: "POST",
url: "script.php",
data: $(this).parent().serialize(),
success: function(data)
{
alert(data);
}
});
});
You have to create the submit event listener outide the other event:
$('.myCssClass').parent().submit(function(e) {
$.ajax({
type: "POST",
url: "script.php",
data: $(this).serialize(),
success: function(data){
alert(data);
}
});
e.preventDefault();
});
$('.myCssClass').on('change', function() {
$(this).parent().submit();
});
Or as chain:
$('.myCssClass').on('change', function() {
$(this).parent().submit();
})
.parent().submit(function(e) {
$.ajax({
type: "POST",
url: "script.php",
data: $(this).serialize(),
success: function(data){
alert(data);
}
});
e.preventDefault();
});
But why two events? Just send the data on change:
$('.myCssClass').on('change', function() {
$.ajax({
type: "POST",
url: "script.php",
data: $(this).parent().serialize(),
success: function(data){
alert(data);
}
});
});
Try the following:
$('.myCssClass').on('change', function() {
alert("This is executed");
$(".form-with-class").submit();
});
$(".form-with-class").on('submit', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "script.php",
data: $(".form-with-class").serialize(),
success: function(data){
alert(data);
}
});
});
$('.myCssClass').on('change', function() {
alert("This is executed");
$(this).parent('form#id').submit(); // improve performance by reducing the traversal
});
$("#form-with-id").on('submit', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
type: "POST",
url: "script.php",
data: data,
success: function(data){
alert(data);
}
});
});
Hope this works.
when a handler is provided it just registers the handler but it does not perform the actual submit.
You may want to call:
$(this).parent().submit();
after your handler is registered. Furthermore, within your handler, you have to refer to the form just by "$(this)" (not: "$(this).parent()"), since the handler belongs to the form.
But since you'd call the submit explicit, there is no point in registering a handler which you then invoke. You could fire your ajax-request directly:
$('.myCssClass').on('change', function() {
alert("This is executed");
$.ajax({
type: "POST",
url: "script.php",
data: $(this).parent().serialize(),
success: function(data)
{
alert(data);
}
});
});
I am trying to post via link. But I think there is a problem. I am not good at Javascript.
I want to send attribute and show with div.
Here is my Code :
<script type="text/javascript">
$(document).ready(function() {
$("#slidingProduct").click(function() {
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
dataType: "POST",
data: {
"number1": aa
},
success: function(json) {
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
You can do something like this:
$(".slpd").on('click',function(){
var aa = $(this).data('urun_id');
var json={"number1":aa};
$.ajax({
url: "data.php",
type: "POST",
dataType:'JSON',
data: JSON.stringify(json),
success: function(result){
$("#result").html(result.number1);
}
});
});
As ids in DOM should be unique, you can specify similar class name to capture click event in a single go and
some modifications in html - It's good to use data-* property of html5:
A
B
O
$(document).ready(function() {
$("a").on('click', function(e) {
e.preventDefault(); // Stop redirection
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
type: "POST"
dataType: "JSON",
data: {
"number1": aa
},
success: function(response) {
$("#result").html(response.number1); // This depends on how you've sent response from server
}
});
});
});
I have this code in my asp.net webform, I call a webmethod to load data from database:
function Inicializar() {
$("#wait").show();
$.ajax({ type: "POST",
url: "index.aspx/Iniciar",
data: JSON.stringify({}),
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (response) {
$("#wait").hide();
var result = response.d;
cargardatos(result );
}
});
}
I call this function in ready event:
$(document).ready(function () {
Inicializar();
});
the first time it works, the problem is that when I press F5 and reload the page data is not loaded, and if I press back working again.
I do not know if I'm doing something wrong.
Sorry for my English..Xd
Thank you. Greetings!
JavaScript is CaSe SenSitIve. So change your code to:
$(document).ready(function () {
Inicializar();
});
But this way, it doesn't even work on the first time. And do check what is wrong with your output using the Network or Console.
Disable Caching if Needed
$.ajax({ type: "POST",
url : "index.aspx/Iniciar",
cache : false,
datatype : 'json'
})
Turn off caching
function Inicializar() {
$("#wait").show();
$.ajax({ type: "POST",
url : "index.aspx/Iniciar",
cache : false,
datatype : 'json'
}).done(function (response) {
$("#wait").hide();
cargardatos(response.d);
});
}
$(document).ready(function () {
Inicializar();
});
I have many Bootstrap Type-ahead attached to my text-box.
I was using there id to select then and attach typeahead.
Sample
$("#SireTag").typeahead({
source: function (query, process) {
$.ajax({
url: '/Bull/GetSireTag',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
});
}
});
Now i decided to make it more readable and short by using a single java-script code to attach type ahead to all my text-boxes.
<input data-typeahead-url="/Bull/GetSireTag" id="SireTag" name="SireTag" type="text" value="">
New Javascript
$('*[data-typeahead-url]')
.each(function () {
alert(this);
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
But its not working i am not so proficient with java-script anyone now whats wrong.
I tried developers tool ajax request is not made.
$('*[data-autocomplete-url]') doesn't select your elements because you're using data-typeahead-url.
You need to return the ajax result to the source, also don't use alert() to debug, use console.log() instead:
$('input[data-typeahead-url]').each(function () {
$(this).typeahead({
source: function (query, process) {
return $.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: { query: query },
dataType: 'json',
async: true,
success: function (resp) {
console.log(resp);
return process(resp);
}
});
}
});
});
Hope it helps.
$('*[data-typeahead-url]')
.each(function () {
var url = $(this).data("typeahead-url");
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: url,
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
Problem: The code was making ajax request but to the same address.
Diagnose: I tried log($(this).data("typeahead-url");) which gave desired output.
Solution: I created and stored the Url the used it as a parameter in ajax call
var url = $(this).data("typeahead-url");
Hope this help.
I have an ajax call and i need to show one particular div based on the response from the ajax call. here is my ajax call
var cmnumber = document.forms['myform']['cm'].value;
alert(cmnumber)
$.ajax({
type:'get',
url: "/validatecm/"+cmnumber,
cache:false,
async:true,
data:cmnumber,
success: function(data) {
},
error: function(data) {
}
})
});
I need to show on div if the response is success. Default the div is Hidden.
<div class="downtime" id="downtime" style="display: none" >
--------------
</div>
Any help wil be appreciated..
try this
var cmnumber = document.forms['myform']['cm'].value;
alert(cmnumber)
$.ajax({
type:'get',
url: "/validatecm/"+cmnumber,
cache:false,
async:true,
data:cmnumber,
success: function(data) {
if(data == "success")
$('#downtime').show();
else
$('#downtime').hide();
},
error: function(data) {
}
})
I think you can use
$.ajax({
type:'get',
url: "/validatecm/"+cmnumber,
cache:false,
async:true,
data:cmnumber
}).done(function(data){
$('#downtime').show();
})
Add the data into the div and show it.
success: function(data) {
$('#downtime').html(data).show();
},
error: function(data) {
$('#downtime').html().hide();
}
document.getElementById("downtime").style.display = "block";
See https://developer.mozilla.org/en-US/docs/CSS/display
get the value of text box and save it in cmnumber. Make sure you include jquery in your html file
function makeAjaxCall(){
var cmnumber=$("#cm").val();
var url="/validatecm/"+cmnumber;
$.ajax({url:url,success:function(result){
handleResult(result);
}});
}
function handleResult(result){
// if result is what you expect it is then enable the div
if(result=="ok"){
$("#downtime").css('display','block');
}
}
I'm new to AJAX but you have to change one thing to hide/show a the div:
var cmnumber = document.forms['myform']['cm'].value;
alert(cmnumber)
$.ajax({
type:'get',
url: "/validatecm/"+cmnumber,
cache:false,
async:true,
data:cmnumber,
success: function(data) {
if(data.**MESSAGE** == "success")
$('#downtime').show();
else
$('#downtime').hide();
}, error: function(data) { } })