I want to disable/prevent loading of the page until a JS call has been completed. I understand that the only way to do that is with $.ajax like so:
$.ajax({
url: "/acme/confirm_authentication.html",
async: false,
cache: false,
success: function(data) {
// loaded
}
Currently, I’m loading a partial page with .load() function like so:
var linkUrl = $('.js-dialog--on-load').attr('dialog-href') + ' #lga';
showDialogWindow(linkUrl);
function showDialogWindow(linkUrl) {
$('.container').append($("<div>").load(linkUrl, function(){
}).addClass('js-dialog'));
}
See demo: http://jsfiddle.net/SQDDD/1/
How can I translate this into an $.ajax call?
Remember, the reason I’m using .load() is so that I can load only part of the website (#lga).
asyc: false is (most of the time) evil ;-)
You may try something like :
function showDialogWindow(linkUrl) {
$.ajax({
url: linkUrl,
async: true,
cache: false,
success: function(data) {
$('.container').append($("<div>"+data+"</div>").addClass('js-dialog'));
}
});
}
Be aware that you lose the selector feature available in the load
Take a look at this example :
I have this html :
...
<body>
aaa
<p>bbb</p>
</body>
...
now getting the p element from ajax :
$.ajax(
{
url: 'http://jsbin.com/oFUMOtO/3/quiet',
type: "GET",
dataType: 'html',
success: function (data)
{
alert($("<div>").html(data).find( "p" ).text()); //alerts bbb
}
});
Related
i found 404 error
var endpoint='';
var bookingform=$("#BookingForm").serialize();
jQuery.ajax({
url: endpoint,
type: "POST",
data:{'action':'submitform1','bookingform':bookingform},
processData: false,
contentType: false,
success: function (result) {
$("#propertydata").html(dat.data)
},
error: function(dat1){
alert("error");
}
You are sending ajax to empty URL -> var endpoint='';
You need to send it to wordpress ajax url like this:
<script type="text/javascript">
var endpoint = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
You need to paste the above code in header.php file of your theme.
Secondly, in the success function, you are using the variable that is not defined (dat) you need to use something like this:
jQuery.ajax({
url: endpoint,
type: "POST",
data:{'action':'submitform1','bookingform':bookingform},
success: function (result) {
var dat = JSON.parse(result);
$("#propertydata").html(dat.data)
},
error: function(dat1){
alert("error");
}
});
When I use the code below, paging is not working. Where am I wrong?
var data = '';
$.ajax({ type: "GET",
url: "include/tables/data.php",
async: false,
success: function(data) {
$("#result").html(data);
$('#mytable').DataTable({});
}
});
I'm trying to make typeahead input with ajax but it's not working. I tried everything what I find on web but I just stuck.
This is initialization of typeahead:
$('input[name=type_input]').typeahead({
source: function (query, process) {
$.ajax({
url: 'ajax/data.php',
type: 'GET',
dataType: 'JSON',
success: function(data) {
return (data);
}
});
}
});
// this is ajax return {["Data 1","Data 2","Data 3r"]}
Please let me know the equivalent of below prototype code in Jquery.
var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {
method: 'get',
parameters: pars,
insertion: Insertion.Bottom
});
I want to perform the same action using Jquery.
Thanks in Advance.
In jQuery the Ajax will use as following:
$.ajax({
url: "/billing/add_bill_detail",
type: "get",
dataType: "html",
data: {"pars" : "abc"},
success: function(returnData){
$("#abc").html(returnData);
},
error: function(e){
alert(e);
}
});
Use #abc if abc is the id of the div or use .abc if abc is a class.
You can place the returnData iin your HTML where you want,
There are some ways using ajax like jQuery.ajax({...}) or $.ajax({...}) other than this there are some simplified versions of these too like:
$.get() or jQuery.get()
$.post() or jQuery.post()
$.getJSON() or jQuery.getJSON()
$.getScript() or jQuery.getScript()
$ = jQuery both are same.
As you are using method : 'get', so i recommend you to use $.ajax({...}) or $.get() but remember to include jQuery above this script otherwise ajax function wont work Try to enclose the script in the $(function(){}) doc ready handler.
'abc' if you could explain it
Try adding this with $.ajax():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: "/billing/add_bill_detail",
data: pars,
dataType: 'html'
success: function(data){
$('#abc').html(data); //<---this replaces content.
},
error: function(err){
console.log(err);
}
});
});
</script>
or with $.get():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.get("/billing/add_bill_detail", {data: pars}, function(data) {
$('#abc').html(data); //<---this replaces content.
}, "html");
});
</script>
or more simply use the .load() method:
$('#abc').load('/billing/add_bill_detail');
You can use .load() method
Load data from the server and place the returned HTML into the matched
element.
Read docs: http://api.jquery.com/load/
$(function(){
$.ajax({
type: "GET",
url: "abc/billing/add_bill_detail",
data: data,
success: function(data){
alert(data);
}
});
});
I have been learning AJAX for the best part of 2 hours, trying to get my head around how to get this to work, it seems it is calling the function as if I put an alert in, it all works fine.
I tried using another method and it seemed to call the function on it's own and it would load what the .php page is echoing.
What am I doing wrong in order for it to not work at all?
<script type="text/javascript">
$('a.fire').click(call_ajax);
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
</script>
Edit: I have also just tried
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
Which also does not work.
EDIT: I have now got code that GET's the php file I wanted, but for some reason does it on it's own
<script type="text/javascript">
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$('a.fire').click(call_ajax());
});
});
The issue with this code is that it fires on it's own
EDIT: Now have new code, that is attempting to fire according to Firebug console but I get the alert ERROR: error, so I don't have a clue what is happening in order for it to fail, I have also tried many different URL's with no working solution
$('a.fire').click(function () {
$.ajax({
type: "GET",
url: "/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
},
error:function(xhr, text, error){
alert("Error: " + text);
}
});
});
SOLVED: I have now got it to work! For some reason my anchor had a href of "", which would cause it to reload the page and removing my GET from the page
ajax will only work if it's the same domain. This means that if you execute jQuery from domain x to domain y, it won't work. This is for safety-reasons to prevent websites from loading from another website. Does your jQuery-ajax call work if you remove the 127.0.0.1 from your url?
Furthermore I guess you should add the click-function inside your $(document).ready(); function, like this:
$(document).ready(function(){
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
});
for testing purposes, you can also use the complete function inside your ajax and alert your data. firebug can be helpful too to find your problem :)