This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Making my ajax updated div fade in
I want the content from AJAX call to fadeIn on my page, but when I use this code $('#sub_container').html(content).fadeIn(); it doesn't work, even if I set the animation speed to super slow (slow(5000))
$('.create').click(function(){
loadingimg();
document.title = 'Create Message';
$.ajax({
url: 'create.php',
dataType: 'html',
success: function(content){
$('#sub_container').html(content);
// $('#sub_container').html(content).fadeIn(); <- Fails
}
});
});
The .fadeIn() function essentially makes the element visible, so will appear to do nothing if the element is already visible. You can ensure that's not the case by hiding the element:
$('#sub_container').hide().html(content).fadeIn();
You need to make sure it's hidden to begin with, for example:
$('.create').click(function(){
$('#sub_container').fadeOut(); // fade out the current content
loadingimg();
document.title = 'Create Message';
$.ajax({
url: 'create.php',
dataType: 'html',
success: function(content){
$('#sub_container').html(content).stop().fadeIn(); // fade in the new content
}
});
});
But that can get you jumping content as the element disappears so you have to account for that if necessary.
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I called Ajax on button click, and I got response with link. Now I want to do some action on that link but I cant, why?
here is the ajax call:
$( document ).ready(function() {
jQuery(".rateReset").click(function(){
var data_item = jQuery(this).attr("data-item");
var data_target = jQuery(this).attr("data-target");
var me = this;
jQuery.ajax({
type: "POST",
url: "likevoting.php?data_item="+data_item+"&data_target="+data_target+"&interchange=yes",
success: function(data){
jQuery(me).closest("div.rateWrapper").html(data);
}
});
});
I got response like:
some text link lorem ipsume...
Now I want to add click event on 'link' text, how to do this.
Thanks
replace
jQuery(".rateReset").click(function(){
to
jQuery(document).on("click", ".rateReset", function(){
The idea is to fetch the content from an external PHP file on Page load using jQuery .each() function. The problem is the page freezes or keeps on loading and never ends. What would be the issue?
PHP Page
<div class='caller-div-holder'>
<div class='calling-div' id='calling-div-1'></div>
<div class='calling-div' id='calling-div-2'></div>
<div class='calling-div' id='calling-div-3'></div>
</div>
In the .js file
$('.calling-div').each(function()
{
var fetch_id=$(this).attr('data-id');
$.ajax(
{
type: "POST",
url: "page-url",
data: {var1: fetch_id},
dataType:"html",
success: function(data)
{
$('#calling-div-'+fetch_id).html(data);
}
}); // Ajax
}); // Each function
Note:
Instead of $.ajax() on using document.write I found that the function is called for 3 times correctly with the variable fetch_id getting the data properly.
The external PHP page is checked with sample data just changing the POST to GET and passing the data through GET method. It works.
Edit 1:
Adding async:"false", reduces the problem intensity. But still the page is considerably slow.
The following will solve the issue by adding all the html at once, this will be faster than the other method...it will still lock the DOM at the end when it adds the html variable to the html of the parent element.
var html = '';
$('.calling-div').each(function()
{
var fetch_id=$(this).attr('data-id');
$.ajax(
{
type: "POST",
url: "page-url",
data: {var1: fetch_id},
dataType:"html",
success: function(data)
{
html += "<div class='calling-div' id='calling-div-" + fetch_id + "'>" + data + "</div>"
}
}); // Ajax
}); // Each function
$('.caller-div-holder').html(html);
Special Note I highly recommend using the following to solve this problem:
jQuery append() for multiple elements after for loop without flattening to HTML
http://jsperf.com/fn-append-apply
Hello I am having trouble regarding div reloading when a new record has been added. What I wanted to do is to show first a loading image then after a record has been inserted it will reload the div.
$("a.follow").click(function(event) {
event.preventDefault();
$("#flash").show();
$("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
$.ajax({
//url: $(this).attr("href"),
success: function(msg) {
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index');
}
});
return false;
});
That's what I got to far when I'm trying the code it refreshes a whole physical of page on the div & not the desired div itself. . .
Sorry guys I am poor with jQuery and BTW this is in CodeIgniter.
Your problem is, that codeigniter obviously returns a whole html page. You have two choices:
Either return only a fragment (I don't know how to do this in CI) or use jQuery to parse out the div you want. This can be done with the following code, assuming that the div you want is named <div id="results_div">...</div>
$("a.follow").click(function(event) {
event.preventDefault();
$("#flash").show();
$("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index #results_div', function(){ $('#flash').hide(); });
});
Can you include the HTML with the #results_div div?
This is my best guess without html to work with:
$("a.follow").click(function(event) {
event.preventDefault();
// show the linke
$("#flash").fadeIn(300).html('Loading Result.');
//ajax load the 'mini div' result -- i guessed that this url pulls back the div you want
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index', function(data, text, xhr){
$('#flash').fadeOut("fast");
});
});
Hey Guys,
I am new to jQuery and am not experienced with it at all...
Basically my goal is to have a modal popup with php variables passed to it...
for example - EITHER load a popup php page, view_details.php?id=1
OR
pass the php variables directly to the modal for the specified id.
I hope my question is not too confusing and is understandable, any advice would be recommended. I currently have jqueryUI installed, but am open to using any module.
Greg
Ok so:
$('<div>').load('something.php').dialog();
And voila you have your dialog :-)
You might also want check out json datatype so youcould iterate over list of variables.
$.ajax({
url: 'request.php',
data: {'getParam1': 'foo', 'getParam2': 'bar'},
dataType: 'json',
success: function(response) {
$div = $('#myDiv'); //Id for your div
$.each(response, function(k, v) {
$div.append(v);
});
$div.dialog();
}
});
request.php
<?php
$variables = array(
'variable1',
'variable2',
'variable3',
'param1: '.$_GET['getParam1'],
'param2: '.$_GET['getParam2']
);
echo json_encode($variables);
?>
$('#modalDivID').load('view_details.php?id=1').dialog();
view_details.php
<?php
$id=$_REQUEST['id'];
echo 'This is popup #'.$id;
?>
I'm trying to take values from a dropdown two boxes and send them to a PHP file which will draw an appropriate field from a mySQL database depending on the combination chosen and display it in a div without refreshing the page using AJAX. I have the second part sorted, but I'm stuck on the first part.
Here is the HTML: http://jsfiddle.net/SYrpC/
Here is my Javascript code in the head of the main document:
var mode = $('#mode');
function get() {$.post ('data.php', {name: form.him.value, the_key: #mode.val()},
function(output) {$('#dare').html(output).show();
});
}
My PHP (for testing purposes) is:
$the_key = $_POST['the_key'];
echo $the_key;
After I have it in PHP as a variable I can manipulate it, but I'm having trouble getting it there. Where am I going wrong? Thanks for your replies!
You need a callback function as well to have the server response to the POST.
$.post('ajax/test.html', function(data) {
$('.result').html(data);
});
This snippet will post to ajax/test.html and the anonymous function will be called upon its reply with the parameter data having the response. It then in this anonymous function sets the class with result to have the value of the server response.
Help ? Let me know and we can work through this if you need more information.
Additionally, $.post in jQuery is a short form of
$.ajax({
type: 'POST',
url: url,
data: data,
success: success
dataType: dataType
});
your jquery selectors are wrong:
html:
<select id="mode">
jquery selector:
$("#mode").val();
html:
<select name="player">
jquery selector:
$("select[name=player]").val();
You want to add a callback to your ajax request, its not too hard to do, here ill even give you an example:
$.ajax({
url: "http://stackoverflow.com/users/flair/353790.json", //Location of file
dataType: "josn",//Type of data file holds, text,html,xml,json,jsonp
success : function(json_data) //What to do when the request is complete
{
//use json_data how you wish to.;
},
error : function(_XMLHttpRequest,textStatus, errorThrown)
{
//You fail
},
beforeSend : function(_XMLHttpRequest)
{
//Real custom options here.
}
});
Most of the above callbacks are optional, and in your case i would do the following:
$.ajax({
url: "data.php",
dataType: "text",
data : {name: ('#myform .myinput').val(),the_key: $('#mode').val()},
success : function(value)
{
alert('data.php sent back: ' + value);
}
});
the ones you should always set are url,success and data if needed, please read The Documentation for more information.