jquery ajax sucess data into facebox - javascript

UPDATE: The code if working I has some css issues.
I'm trying to put ajax data into facebox modal box, I have the following code but facebox modal box is not loading. Looking into firebug ajax is returning the correct data but i do not know how to pass that data to facebox.
$('a[rel*=facebox]').live("click", function() {
var ajaxpostID=$(this).parent().attr("id"); //Get entry ID
$.ajax({
url: 'http://www.someurl.com/ajax/facebox-ajax.php',
type: "POST",
data: ({
ajaxpostID: ajaxpostID
}),
success: function(data) {
$.facebox(data);
},
error: function() {
$.facebox('There was an error.');
}
});
});

Something like this worked for me:
//added some id to anchor tag and
$('a[id='some_anchor_id']').live("click", function() {
var ajaxpostID=$(this).parent().attr("id"); //Get entry ID
jQuery.facebox(function() {
var form_data = {
ajaxpostID: ajaxpostID
};
$.ajax({
url: "http://www.someurl.com/ajax/facebox-ajax.php",
type: 'POST',
data: form_data,
success: function(data) {
jQuery.facebox(data);
},
error: function() {
$.facebox('There was an error.');
}
)
});
})
})
Hope it works for you

Related

I am not able to clear me textare value after the ajax is submited successful

$(document).on('click','#commentsubmitimage',function(e) {
console.log("beni");
e.preventDefault();
var content =$('#commenttext').val();
console.log(content);
var imageid = $('#imagecomid').val();
$.ajax({
type: 'POST',
url: "/user/postcoment/" + imageid,
data:{
contenta:content
},
success: function(data) {
// have try this
document.getElementById(commenttext).innerHTML = '';
// have try this
$('#commenttext').val('');
},
error: function(data) {
console.log(data);
}
});
});
I want to clear my textareaa with id ="commenttext" i have try all the methods and it doesnt happen nothing any suggest ?
if your success call back working correctly then write
success: function(data) {
alert("working");
$("#commenttext").val("");

Display items from json file in an alert (sweetalert) jQuery

I am using sweetalert for alerts and want to display some data from an adjacent .json file in a sweetalert alert with jQuery. The json file has 5 items and in a seperate attempt using getJSON I managed to display the first 2 so I am trying the $ajax method to do more. The current code I have just goes right down to the "always" function and displays "complete" in the alert, it doesn't display the success method. So I would like to know how to alter the code to display the items in the alert.
The code is below.
jQuery(document).ready(function($) {
$(document).on('click', '#json', function(event) {
event.preventDefault();
$.ajax({
url: 'somedata.json',
type: 'GET',
dataType: 'json',
data: {param1: 'value1'}
})
.done(function() {
swal("success");
})
.fail(function() {
swal("error");
})
.always(function() {
swal("complete");
});
});
});
Try somthings like this
jQuery(document).ready(function($) {
$(document).on('click', '#json', function(event) {
event.preventDefault();
$.ajax({
url: 'somedata.json',
type: 'GET',
dataType: 'json',
data: {param1: 'value1'}
})
.done(function(data) {
data.each(el,function(){
setTimeout(function(){
swal(el);
},300);
});
});
});
});
EDIT
from this bug report you have to set time between instances Source

Javascript get JSON value from URL error

im using the function below to get image names. I also use the json code to get data of a different url, but somehow it isnt working at this. (im new to javascript. Just writing php normally.
function getImgname(name) {
$.getJSON("http://url.com/info.php?name="+name, function(json321) {
return json321.js_skininfo;
});
}
Try this:
function getImgname(myName) {
$.ajax({
url: 'http://url.com/info.php',
data: {
name: myName
},
type: 'POST',
dataType: 'json',
success: function(data) {
// do what you want with your data
return data.js_skininfo;
}
});
}
I tried this now:
function getImgname(myName) {
$.ajax({
url: "http://url.com/ninfo.php",
type: 'POST',
dataType: 'json',
success: function (data) {
return data.js_skininfo;
},
error: function () {
}
});
}
This isnt working (undefinied), but if i alert the data.js_skininfo it shows me the correct value.

Checking dynamically generated element in jQuery?

Please consider the following code:
function autoRecursiveLoad(checkingElementId) {
if (checkingElementId.length) {
return;
}
else {
var targetId = $("#targetContent");
var requestUrl = $('#ajaxUrl').val();
$.ajax({
url: requestUrl,
cache: false,
type: "POST",
async:false,
beforeSend: function(){
},
complete: function(){
autoRecursiveLoad(checkingElementId);
},
success: function(data) {
targetId.append(data);
},
error: function(e) {
}
});
}
}
in the code: checkingElementId is the id of the dynamically generated element. I used checkingElementId.length to see if it already exists yet, if not, send ajax request to load the content, create div with the id of checkingElementId and then appends to targetId, then perform recursive call.
The problem is the div with id of checkingElementId is generated successfully but the code to check if it exists (checkingElementId.length) never worked. Hence, the above function will loop forever. Am I doing something wrong?
I dont know if it is the best solution or not, but this works for me, I trigger the DOMNodeInserted event on the fly, so the function is updated as follows:
function autoRecursiveLoad(checkingElementId) {
$(document).on('DOMNodeInserted', checkingElementId, function () {
// do something when the new dynamically generated item (checkingElementId) added to the page
});
if (checkingElementId.length) {
return;
}
else {
var targetId = $("#targetContent");
var requestUrl = $('#ajaxUrl').val();
$.ajax({
url: requestUrl,
cache: false,
type: "POST",
async:false,
beforeSend: function(){
},
complete: function(){
autoRecursiveLoad(checkingElementId);
},
success: function(data) {
targetId.append(data);
},
error: function(e) {
}
});
}
}

Javascript. Run a AJAX flow after current AJAX stops

So I have a simple javascript that loads more comments from a database when the user clicks More.
Now I would like to extend this script so that it first populates the SQL database before it starts letting users view the comments. And I feel that I'm on the right track but I can't get it to work.
First the code that does WORK.
$(function() {
$('.load_more').live("click",function() {
var photoid = document.getElementById('photoid').value;
var lastid = document.getElementById('lastid').value;
if(lastid!='end'){
$.ajax({
type: "POST",
url: "/more_comments_ajax.php",
data: {
photoid : photoid,
lastid : lastid
},
beforeSend: function() {
$('a.load_more').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
success: function(html){//html = the server response html code
$("#more").remove();//Remove the div with id=more
$("div#updates").append(html);//Append the html returned by the server .
}
});
}
return false;
});
});
Now I feel that this should be possible to expand like this.
$(function() {
$.ajax({
type: "POST",
url: "/populate_sql.php",
beforeSend: function() {
$('a.load_more').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
sucess: $('.load_more').live("click",function() {
var photoid = document.getElementById('photoid').value;
var lastid = document.getElementById('lastid').value;
if(lastid!='end'){
$.ajax({
type: "POST",
url: "/more_comments_ajax.php",
data: {
photoid : photoid,
lastid : lastid
},
beforeSend: function() {
$('a.load_more').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
success: function(html){//html = the server response html code
$("#more").remove();//Remove the div with id=more
$("div#updates").append(html);//Append the html returned by the server .
}
});
}
return false;
});
});
});
Where am I loosing it?
You can use this function. I used it before and it works great. after first callback receives then it send second request.
(function($)
{
var ajaxQueue = $({});
$.ajaxQueue = function(ajaxOpts)
{
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next)
{
ajaxOpts.complete = function()
{
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
})(jQuery);
use it like the normal ajax. sample:
$.ajaxQueue({ url: 'x.php', data:{x:x,y:y}, type: 'POST',
success: function(respond)
{
.....
}
});
so you can check if there was a callback from first ajax then send second request.
hope it helps you.
Thanks for the answer. It was not exactly what I needed but it gave me an idea and the solution that works for me was 2 javascripts working together. I'm leaving the code here if someone needs something similar.
<script type="text/javascript">
jQuery(function($){
var pid = '<?php echo $ids['0']; ?>';
$.ajax({
type: "POST",
url: "/prepare_sql.php",
data: "pid="+ pid,
beforeSend: function() {
$('div#updates').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
success: function(html) {
$("div#updates").replaceWith(html);
}
});
});
</script>
<script type="text/javascript">
$('.load_more').live("click",function() {
var photoid = document.getElementById('photoid').value;
var lastid = document.getElementById('lastid').value;
if(lastid!='end'){
$.ajax({
type: "POST",
url: "/more_comments_ajax.php",
data: {
photoid : photoid,
lastid : lastid
},
beforeSend: function() {
$('a.load_more').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
success: function(html){//html = the server response html code
$("#more").remove();//Remove the div with id=more
$("div#updates").append(html);//Append the html returned by the server .
}
});
}
return false;
});
</script>

Categories

Resources