I am trying to load a .php file that comes with a 2Mb image in a specific div.
I can achieve this with ajax but my problem is that I only want the current div html changed to the new one when the image is done loading. My problem right now is that my div becomes empty during the loading process.
function ajaxcallmap(my_url, my_div, my_data) {
$.ajax({
url: my_url,
data: my_data,
type: 'get',
success: function (output) {
var $imgs = $("#worldmap_container").html(output).find("img"), //hide them
imgAmount = $imgs.length,
imgCounter = 0;
$imgs.on("load", function () {
imgCounter++;
if (imgCounter === imgAmount) {
$(my_div).html(output);//show the images when they're loaded
ajaxReady();//Recal jQuery Events
}
});
}
});
}
Use a complete: function instead of a success: function.
Related
I would like to open a lightbox frame with a PDF file inside.
I am already able to do it by using data-lightbox="iframe" and the pdf filename as href tag.
The main problem is that i modify this PDF file on the fly (by FPDF/FPDFI) and i need to pass an array from jQuery to PHP PDF generation page.
When I push the "Generate" button on the page, i populate the array and next i send it by $.ajax POST with the array as data, but i don't know how to show it straight back to lightbox without saving it on the webserver
I don't know the method i should use to solve this problem
$('.generate').on('click', function(e) {
var data = [];
e.preventDefault();
$('input').each(function(el) {
if ($(this).hasClass('bt-switch')) {
tempval = $(this).bootstrapSwitch('state');
} else {
tempval = $(this).val();
}
data.push(tempval);
});
$.ajax({
type: "POST",
url: "function.php?act=gen",
data: {
arr: data
},
success: function(data) {}
});
});
I have two files. One PHP-file, which contains a SQL-Select statement and returns the output as html. The second file is my index file which contains a div with the class "loadMembers" and some jquery code:
$(document).ready(function () {
function startInterval() {
var refreshId = setInterval(function () {
$.ajax({
url: 'sidebars/members.php',
type: 'html',
success: function (resp) {
$("div.loadMembers").html(resp);
}
});
}, 5000);
}
startInterval();
});
I want to refresh the div with database data in a 5 seconds interval. I tried it also with .load()...
The request contains some data but nothing from my database...
Where's the problem?
Thanks for any help :)
your request type can be get or post, not html, it should be dataType
url : 'sidebars/members.php',
type: 'POST', // or GET
dataType : 'html',
$.ajax({
type: 'POST',
url: 'show-photo3.php',
data: 'type='+type+'&count='+count+'&aid='+aid,
dataType: 'html',
success: function(response) {
//alert(response);
$('#vph').html(response);
$('#vph').fadeIn("1000");
newhight=$("#vph").height();
$("#vph_outer").css('height',newhight);
}
});
Its for an ajax based image gallery.when i try to re size the outer div based on
new content's height. its not working properly means take the wrong height.I think ajax contents are not loaded completely when take the height.
var img = new Image();
img.src = img_url;
img.onload = function () {
//img was loaded
}
try calculating height after the animation completes, in the callback function of fadeIn
$('#vph').fadeIn("1000", function(){
newhight=$("#vph").height();
$("#vph_outer").css('height',newhight);
});
If you have images loaded via ajax, try using waitForImages plugin before calculating height.
$('#vph').html(response).waitForImages(function() {
$('#vph').fadeIn("1000"), function(){
newhight=$("#vph").height();
$("#vph_outer").css('height',newhight);
})
});
I have a list in my site, and when I click each of the list items, I want the div next to them to reload with ajax, so as not to reload the whole page.
Here is my javascript
parameters = "category_id="+categoryId;
var result = ajaxFunction("changeCategory.php", parameters);
$("#mydiv").html(result);
The ajaxFunction() function is the regular $.ajax() jQuery function, with "POST". In the "changeCategory.php" I call with include another php file.
The problem is that the whole page is reloaded instead of only the div. I want to use this ajax function I have, cause I want to send data to my php file.
Does anyone know what should I do to reload only the div?
Thanks in advance
Try this
$(document).ready(function(){
var parameters = {category_id:categoryId};
$.ajax({
url:'changeCategory.php',
type:'post',
data:parameters,
dataType:'html',
success:function(result){
$("#mydiv").html(result);
},
error:function(){
alert('Error in loading [itemid]...');
}
});
});
Also verify that when in your click event this line is written or not return false; This is required.
Try using load to load the div with the url contents -
$("#mydiv").load("changeCategory.php", {category_id: "category_id_value"} );
You can pass data to the url.
The POST method is used if data is provided as an object; otherwise, GET is assumed.
you could send a query to that PHP so it "understands" that it needs to output only the div, like this:
in your javascript:
//add the query here
parameters = "category_id="+categoryId + "&type=divonly";
var result = ajaxFunction("changeCategory.php", parameters);
$("#mydiv").html(result);
in your "changeCategory.php":
//add a query check:
$type = "";
if (isset($_POST['type'])) {
$type = $_POST['type'];
}
//then, depending on the type, output only the div:
if($type === "divonly"){
//output the div only;
} else {
//your normal page
}
$(document).ready(function() {
$.ajax({
url: "right.php",
type: "POST",
data: {},
cache: false,
success: function (response) {
$('#right_description').html(response);
}
});
});
The whole page is reloaded that means there may be an error in your javascript code
check it again
or try this one
function name_of_your_function(id)
{
var html = $.ajax({
type: "GET",
url: "ajax_main_sectors.php",
data: "sec="+id,
async: false
}).responseText;
document.getElementById("your div id").innerHTML=html;
}
you can use get method or post method....
I have the following code that i need some help with, i am trying achieve the same thing with jQuery. I have found some solutions that come close but as yet i am still searching for the perfect solution.
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
Right now i am triggering the function with:
<input type = "button" value = "TEST" onclick = "getData('subject_selectAJAX.php?course_id=1', 'ajax')">
I would like to achieve the same thing with jQuery. I think the following function although wrong gets close, my problem is that the url changes depending on where the user is within the course. course_select.php is initially loaded into the #ajax div, which then would be replaced with subject_select.php?course_id="whatever" followed by topic_select.php?subject_id="whatever"
function getData() {
//generate the parameter for the php script
$.ajax({
url: "something.php", //i want this to be passed to the function
type: "GET",
data: data,
cache: false,
success: function (html) {
//add the content retrieved from ajax and put it in the #ajax div
$('#ajax').html(html);
//display the body with fadeIn transition
$('#ajax').fadeIn('slow');
}
});
}
I would love some help with this, i'm currently getting confused pretty sure it is something that would help other Ajax jQuery newbies.
This seems to work although i'm sure it could be much cleaner and i would still like to add some sort of loading graphic for slower connections.
<script type="text/javascript">
function getData( url, id ){
$.ajax({
type: "GET",
url: url,
data: "id=" + id,
cache: false,
success: function(html){
$('#ajax').hide();
//add the content retrieved from ajax and put it in the #content div
$('#ajax').html(html);
//display the body with fadeIn transition
$('#ajax').fadeIn('fast');
})
};
</script>