I'm trying to get data from a resource with jquery's ajax and then I try to use this data to populate a bootstrap popover, like this:
$('.myclass').popover({"trigger": "manual", "html":"true"});
$('.myclass').click(get_data_for_popover_and_display);
and the function for retrieving data is:
get_data_for_popover_and_display = function() {
var _data = $(this).attr('alt');
$.ajax({
type: 'GET',
url: '/myresource',
data: _data,
dataType: 'html',
success: function(data) {
$(this).attr('data-content', data);
$(this).popover('show');
}
});
}
What is happening is that the popover is NOT showing when I click, but if I hover the element later it will display the popover, but without the content (the data-content attribute). If I put an alert() inside the success callback it will display returned data.
Any idea why is happening this? Thanks!
In your success callback, this is no longer bound to the same value as in the rest of get_data_for_popover_and_display().
Don't worry! The this keyword is hairy; misinterpreting its value is a common mistake in JavaScript.
You can solve this by keeping a reference to this by assigning it to a variable:
get_data_for_popover_and_display = function() {
var el = $(this);
var _data = el.attr('alt');
$.ajax({
type: 'GET',
url: '/myresource',
data: _data,
dataType: 'html',
success: function(data) {
el.attr('data-content', data);
el.popover('show');
}
});
}
Alternatively you could write var that = this; and use $(that) everywhere. More solutions and background here.
In addition to the answer above, don't forget that according to $.ajax() documentation you can use the context parameter to achieve the same result without the extra variable declaration as such:
get_data_for_popover_and_display = function() {
$.ajax({
type: 'GET',
url: '/myresource',
data: $(this).attr('alt'),
dataType: 'html',
context: this,
success: function(data) {
$(this).attr('data-content', data);
$(this).popover('show');
}
});
}
Related
I'm currently working on a project using Laravel platform.
I'm trying to delete data from a model asynchronously using ajax. And when all is done my data should be removed from the table. My code runs perfectly, data are being removed from my database , yet "tr" elements arent really faded or removed. Here is my code :
ajax sucess not really working.
$(document).on('click', '.btn-remove-interview' , function() {
var id = $(this).attr('data-interview-id');
$.ajax({
url: './manage/interviews/destroy/'+id ,
type: 'post',
dataType: 'json',
data: id,
success: function (data) {
$(this).parents("tr").remove();
}
});
});
Use
$(this).closest('tr').remove();
Instead of
$(this).parents("tr").remove();
The problem is that the success function callback within your ajax request no long refers to the button when you use this. You need to get an explicit variable to the button if you want to use it.
$(document).on('click', '.btn-remove-interview' , function() {
// Get this button as a variable so we can use it later
var el = $(this);
var id = $(this).attr('data-interview-id');
$.ajax({
url: './manage/interviews/destroy/'+id ,
type: 'post',
dataType: 'json',
data: id,
success: function (data) {
$(el).parents("tr").remove();
}
});
});
Solution was by removing dataType json . My function doesnt return any data .
I am having trouble on calling a methode. I can do it with below codes but how to put in js var with my call?
$.ajax({
url: '#Url.Action("surfacepost", "surface", new { text = "ThisSchouldBeAJaVar" })',
method: 'GET',
success: function (data) {
}
});
In fact this mthode is getting a partial as I am going to display. So if there is a better way of dynamic load a partial using js, please also let me know.
Thanks
The problem is that the '#Url.Action()' method is executed by .NET, before the page is send to the browser, it is not aware of any javascript on the page, and the execution of the method cannot be influenced by javascript that is run after the page has 'left the server'
What you could do is create a placeholder, and replace it in javascript:
var url = '#Url.Action("surfacepost", "surface", new { text = "placeholder" })'
url.replace('placeholder', ThisSchouldBeAJaVar);
$.ajax({
url: url,
method: 'GET',
success: function (data) {
}
});
Or you could just type the url and append the var:
$.ajax({
url: '/surface/surfacepost/?text=' + ThisSchouldBeAJaVar,
method: 'GET',
success: function (data) {
}
});
my problem is when i try to show a value by ajax calling,it shows the value to "generic" class but when i try to show it on the parent row it is not showing anything.
here is my ajax code
$.ajax({
type: 'POST',
url: 'http://localhost/medical/index.php/purchase/test',
data: 'data=' + pid,
success: function() {
$.get('http://localhost/medical/index.php/purchase/test', function(data) {
$(this).parents('tr').find('.generic').html(data); // doesn't show the value
$( ".generic" ).html(); // this show the value but in all table row
});
}});
Thanks in Advance
The problem is called scope. this in context of the anonymous function means something else than it means outside. You can do it like this
var that = this;
$.ajax({
...
success: function() {
$.get(..., function(data) {
$(that).parents('tr').find('.generic').html(data);
});
}
});
This question already has answers here:
$(this) inside of AJAX success not working
(2 answers)
Closed 9 years ago.
I am using JQuery and AJAX to submit and process a form. Once the user submits the form, the html from the processing form (Using a success function) should get appended to the the current input. But what keeps happening, is that the html gets appended to all inputs on the page, not just the one being selected.
My Code:
$(".comment-form").submit(function() {
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
success: function(html) {
$(".comment-input-wrap").append(html); <-- The code in question
}
});
$(this).find('.comment-input').val("");
return false;
});
I Tried to use:
$(this).parent().append(html);
But I think the problem is that I can't use $(this) because it is outside the scope of the function. What can I do?
Thanks!
Simplest approach would be to cache the element before ajax call and access it inside the callback.
You can do this way:
$(".comment-form").submit(function() {
var dataString = $(this).serialize();
var $this = $(this); //Cache it here
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
success: function(html) {
$this.parent().append(html); //access the variable
}
});
$(this).find('.comment-input').val("");
return false;
});
Or use context property of ajax.
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
context: this, //Set the context for callback
success: function(html) {
$(this).parent().append(html); //access it using the context itself.
}
});
or you can also use $.proxy
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
success: $.proxy(function(html) {
$(this).parent().append(html); //access it using the context itself.
}, this); // Set the context
});
or using ecmascript5 function.prototype.bind
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
success: (function(html) {
$(this).parent().append(html); //access it using the context itself.
}).bind(this); // Set the context
});
You could simply store $(this) in a variable:
{
var $this = $(this);
{
$this.append(html);
}
}
I am using this pretty simple jquery function, but it seems to work only on the first keyup..
$('#cmentuser').keyup(function() {
var mess = document.getElementById('cmentuser').value;
var dataString = 'message='+ mess;
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: dataString,
success: function() {
}
});
});
any ideas on how to keep it active?
It works, also in the following form (changed mess into jQuery(this).val() and relied on jQuery when encoding the data string):
$('#cmentuser').keyup(function() {
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: {
'message': jQuery(this).val()
},
success: function() {
// success callback
}
});
});
Proof that it works: jsfiddle.net/xfxPR/
You may be dynamically changing some elements (eg. changing ID or assuming id does not need to be unique), or maybe unbinding the event. Just make sure the event is being attached and stays attached to the element you need.
$(document).on('keyup', '#cmentuser', function(e) {//try to find lower element then doc
var dataString = 'message='+ $(e.target).val();
$.ajax({
type: "POST",
url: "/comentbyuser.php", //no cross domain requests, no need for domain name
data: dataString,
success: function() {}
});
});
try this
$('#cmentuser').live('keyup',function() {
var mess = $(this).val();
var dataString = 'message='+ mess;
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: dataString,
success: function() {
}
});
});