What is the equivalent of Ajax.updater in Jquery? - ajax

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);
}
});
});

Related

Change .load() to $.ajax jQuery

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
}
});

when ajax post success i want to refresh a particular <div> in page

i want to refresh a particular div on ajax success, im using the below code but the whole page getting refreshed.
<script type="text/javascript">
$('#post_submit').click(function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $('#post_text').val()
};
$.ajax({
url: "<?php echo site_url('/post_status'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
return false;
});
return false;
});
</script>
you have an extra return false which is inside the $.ajax block which most probably causes an error so your form isn't submitted via ajax. If you remove that, you shouldn't have any issues.
Use the submit event of the form and remove the return false from the ajax callback:
$('#myFormId').on('submit', function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $('#post_text').val()
};
$.ajax({
url: "<?php echo site_url('/post_status'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
});
return false;
});
Remove the return false from inside your $.ajax function. Its a syntax error. The $.ajax function only expects a json object as an argument. "return false" cannot be part of a json object. You should keep the JavaScript console open during testing at all times - Press Ctrl-Shift-J in Chrome and select console to see any JS errors.
Also suggest you use <input type=button> instead of <input type=submit> or <button></button>

How to get the params of AJAX-query on the server-side in CodeIgniter?

I have the AJAX-code, which calls to controller of CodeIgniter's back-end:
<script>
$(document).ready(function(){
$("#select_bank").change(function(){
selected_bank = $("#select_bank option:selected").text();
$.ajax({
url:'<?=base_url().'atm/select_region/&'+selected_bank; ?>',
success:function(msg){
}
});
});
});
So, I want to get this params in the controller (CodeIgniter), but, because of this is not at the any form, using the
$bank = $this->input->post('')
gives no effect. really, I'd like to clarify this moment
You need to tell the ajax function that you're sending POST data
$.ajax({
type: "POST",
dataType: 'html',
url: <?= base_url ?> + "atm/select_region",
data: {nameofpostvariable:valuethatyousend},
success: function(output){
},
error: function(output){
alert('error');
}
});
On the line data: {nameofpostvariable:valuethatyousend}, you are creating a $_POST['nameofpostvariable']

ASP.NET MVC invoking webservice through AjaxOptions.Url

Say I wanted to invoke the following url that returns Json through an Ajax call:
http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=renderBasicSearchNarrative&q=westminster+abbey"
How does on go about doing this?
I tried using the AjaxOptions.Url like this:
<span id="status">No Status</span>
<div>
#Ajax.ActionLink("Test", null, null,
new AjaxOptions
{
UpdateTargetId = "status",
Url = "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=renderBasicSearchNarrative&q=westminster+abbey"
})
</div>
but the url does not get invoked when i click on "Test" link.
I also tried:
<div>
<button value="get closest POI" onclick="testNominatim()"></button>
</div>
<script type="text/javascript">
function testNominatim() {
alert("called");
$.ajax(
{
type: "GET",
url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=onGetNominator&q=westminster+abbey",
contentType: "application/json; charset=utf-8",
dataType: "json",
failure: function (msg) {
alert(msg);
},
success: function (msg) {
alert(msg);
} });
function onGetNominator(msg) {
alert(msg);
}
</script>
When I click on button, message box shows but webservice does not get invoked.
I am probably missing something trivial but what is it?
TIA.
Edit 1 Changes to reflect actual script.
Using the second form would be my proposed solution. Note that the service requires a parameter named json_callback instead of the standard callback parameter for the callback function. This requires a bit of extra set up in the AJAX call.
Try the following. Note that I've changed the handler to apply it using code rather than in the markup. That's a better practice. I'm also using jQuery 1.7+. JSFiddle can be found at: http://jsfiddle.net/xVBBN/
<div>
<button>get closest POI</button>
</div>
<script type="text/javascript">
$(function() {
$('button').on('click',function() {
alert('called');
$.ajax({
type: 'GET',
url: 'http://open.mapquestapi.com/nominatim/v1/search?format=json&q=windsor+[castle]&addressdetails=1&limit=3&viewbox=-1.99%2C52.02%2C0.78%2C50.94&exclude_place_ids=41697',
dataType: 'jsonp',
jsonp: 'json_callback',
success: function(data) {
alert(data[0].place_id);
}
});
});
});
</script>
Try the following:
<div>
<button onclick="testNominatim()">get closest POI</button>
</div>
<script type="text/javascript">
function testNominatim() {
$.ajax({
type: "GET",
url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=onGetNominator&q=westminster+abbey",
dataType: "jsonp"
});
}
function onGetNominator(msg) {
alert(msg[0].place_id);
}
</script>
Things to notice (compared to your original code):
dataType: "jsonp"
you don't need a success callback because the success callback is your onGetNominator function
you don't need contentType: 'applicatin/json' because you are not sending a JSON request
or if you wanted to use an anonymous success callback:
<div>
<button onclick="testNominatim()">get closest POI</button>
</div>
<script type="text/javascript">
function testNominatim() {
$.ajax({
type: "GET",
url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=?&q=westminster+abbey",
dataType: "jsonp",
success: function (msg) {
alert(msg[0].place_id);
}
});
}
</script>
Things to notice (compared to your original code):
json_callback=? in the query string which will be replaced by jQuery with a random name allowing to invoke the anonymous success callback
you no longer need the onGetNominator function because we use the anonymous success callback
you don't need contentType: 'applicatin/json' because you are not sending a JSON request
And as far as the Ajax.ActionLink helper is concerned, I don't think that it support JSONP.

AJAX on click not calling/loading as it should

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 :)

Resources