What I'm trying to do is auto update a comment count on any prepended div that has been constructed by ajax. So basically replacing the ajaxed response div commentprint
success: function(data) {
$.each(data.posts, function(i, response) {
$("#homestatusid").prepend("<div id='commentprint"+response['streamitem_id']+"'>Comments "+response['num']+"</div>")[
}
});
I have a page called ajaxcommentcount.php. This is where the response would come from and replace commentprint. I just don't have any clue how to do it.
Okay I was able to send the data needed and retrived and updated the ajaxed div.
I added the following to the success
timer = setInterval(function() {
refreshCurrentTab(streamitem_id);
}, 5000); refreshCurrentTab(streamitem_id);
And then called the function in .load() passing the post id over to return and replace the div.
function refreshCurrentTab(streamitem_id)
{
$('#commentprint'+streamitem_id).load('ajaxcommentcount.php?var='+streamitem_id+'');
}
Related
I've got a page with four divs on it that I'm trying to load using jquery. The user shows and hides the divs by clicking on links. Currently, the contents of the divs are populated with PHP include statements, but that leads to ~30-second load times for the page.
I'm trying to replace those include statements with JQuery in order to load the proper contents of each div when the user clicks the link to show or hide it. My problem is that when I click one of the links to switch divs, the div appears but without anything in it. I've used Fiddler to ensure the request is going off (which it is) but the response is coming back as a 404.
However, when I examine the response in Fiddler, the expected HTML is there, just not getting passed into my element properly. I've tried using .load() as well as $.get(), but got the same results. I've also ensured my element names are correct as well. Code is as follows:
$(document).ready(function()
{
$('#allvideos').click(function () {
$.get("/wp-content/themes/Danceamatic/templates/all_videos.php", function(data) {
var $resp = data;
$( "#carrusel_all_videos" ).html($resp);
alert("Load was performed.");
});
$('#current_showcase').hide();
$('#carrusel_new_videos').hide();
$('#carrusel_featured').hide();
$('#carrusel_all_videos').show();
$('#i_mentors').hide();
return false;
});
$('#featuredvideos').click(function () {
$.get("/wp-content/themes/Danceamatic/templates/view_featured.php", function(data) {
var $resp = data;
$( "#carrusel_featured" ).html($resp);
alert("Load was performed.");
});
$('#current_showcase').hide();
$('#carrusel_all_videos').hide();
$('#carrusel_new_videos').hide();
$('#carrusel_featured').show();
$('#i_mentors').hide();
return false;
});
$('#newvideos').click(function () {
$.get( "/wp-content/themes/Danceamatic/templates/new_videos.php", function( data ) {
$( "#carrusel_new_videos" ).html( $.parseHTML(data) );
alert( "Load was performed." );
});
$('#current_showcase').hide();
$('#carrusel_all_videos').hide();
$('#carrusel_featured').hide();
$('#carrusel_new_videos').show();
$('#i_mentors').hide();
return false;
});
$('#currentshowcase').click(function () {
$('#carrusel_all_videos').hide();
$('#carrusel_new_videos').hide();
$('#carrusel_featured').hide();
$('#current_showcase').show();
$('#i_mentors').show();
});
});
I've set breakpoints on the "var $resp = $data" line and have not hit it at all.
Any help is appreciated. Thanks!
The url "/wp-content/themes/Danceamatic/templates/all_videos.php" is not correct. Double check the location of the javascript file that makes this request and also check the location of the php file.
If the location seems correct then maybe it's the structure of the url -- try:
"wp-content/themes/Danceamatic/templates/all_videos.php" or
"./wp-content/themes/Danceamatic/templates/all_videos.php" or
"../wp-content/themes/Danceamatic/templates/all_videos.php".
So I have a datagrid where when a row is clicked a form is loaded, then JSON data is pulled and propagates form fields using JQuery. It works great...sometimes. It is very inconsistent, and I can't figure out why it doesn't work every time. I can click on a row, it loads, then (without refreshing) the next few times it might not, and then (still without refreshing) the next few random number of times it does.
Any help would be appreciated. The first thing the script does is load the corresponding form into the div #dlg, then pull the JSON data, and then parse and populate the fields.
function fw_getFormData(r_id, t_name, r_key){
$('#dlg').dialog('refresh', 'dg_process/dg_edit_form.php?table='+t_name),
jsonURL = 'form_data/dg_forms_data.php?table='+t_name+'&pkey='+r_key+'&id='+r_id;
var jqxhr = $.getJSON( jsonURL, function() {})
//JSON load is complete. Propagate form fields.
.done(function(data) {
$.each(data, function(index, obj) {
$.each(obj, function(key, value) {
//$('#'+key).attr("value", value);
$("#dlg").parents("div").find('input[name='+key.toLowerCase()+']').val(value);
}); //End inner parse of JSON
}); //End outer Parse
}) // End .done
//JSON Did not load
.fail(function() {
alert( "JSON could not load" );
}) // End .fail
});
The JSON it is parsing looks like this:
[{"staffID":"1","fname":"Bill","lname":"Smith","email_address":"bsmith#fakeemail.net","password":"testpw"}]
As a final note, the alert for .fail never fires when it doesn't work.
I have a table in my database. I use a while loop to traverse them. and make a HTML div with that fetched data. I used LIMIT 10 because entries in posts will keep changing as users will keep inserting posts into the table
$get_ids=mysql_query("SELECT * FROM posts ORDER BY id LIMIT 10");
while($row = mysql_fetch_array($get_ids)){
$sm=$row['message'];
echo "<div>".$sm"</div>";
}
What i want to know is how do i use jquery to make this script insert these 10 divs into my DOM every 1 second or so. Help please URGENT!!!!
Try to google for some jquery & php webservice examples. Basically you should do something like this:
//Javascript function which fetches the single data as J.D.Smith suggested
function getHtml()
{
$.get({
'url': 'Address of your php webservice',
'success': function(data) {
$("#content").html($("#content").html() + data); //Append html to your page
}
});
}
//Call the function every 10 sec, place it in $(document).ready() or anything else you use
window.setTimeout(function () {
getHtml();
}, 10000);
This code is more to be illustrative sample than working code
You'd put that code in a separate file (for example: divfill.php) and then use something like this
$.get({
'url': 'divfill.php',
'success': function(data) {
$("#content").html($("#content").html() + data);
}
});
In my case, I have added the following method in my js file,
//call the target function after 250 ms
function async(targetFn, callback) {
setTimeout(function () {
targetFn();
callback();
}, 250);
}
And, I call this function as shown below,
async(BindValuesInLookup, function () {
BuildGrid()
GetInfo();
});
BindValuesInLookup is the target function. It gets fired after 250ms. Once it is done, the callback functons will be executed. So you can use this functionality in the loop and increase the timeout to 1000 (1 sec).
Thanks,
Vim
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");
});
});
Hi everyone I have been working on this particular problem for ages by now,plz help.
I have looked at jQuery: Refresh div after another jquery action?
and it does exactly what I want but only once! I have a table generated from db and when I click on delete it deletes the row and refreshes the div but after which none of my jquery functions will work.
$('#docs td.delete').click(function() {
$("#docs tr.itemDetail").hide();
var i = $(this).parent().attr('id');
$.ajax({
url: "<?php echo site_url('kt_docs/deleteDoc'); ?>",
type: 'POST',
data: 'id=' + i,
success: function(data) {
$("#docs tr.itemDetail").hide();
$("#f1").html(data); // wont work twice
//$("#docs").load(location.href+" #docs>*"); //works once as well
}
});
});
in my body I have
<fieldset class='step' id='f1'>
<?php $this->load->view('profile/docs_table'); ?>
</fieldset>
profile/docs reads data from db. <table id='docs'>....</table>
and my controller:
function deleteDoc() {
$id = $_POST['id'];
$this->load->model('documents_model');
$del = $this->documents_model->deleteDocument($id);
return $this->load->view('docs_table');
}
Thanks in advance!
Are you removing any expressions matching $('#docs td.delete') anywhere? If so, consider using $.live(), which will attach your function to ALL matching elements regardless of current or in the future; e.g.
$('#docs td.delete').live('click', function() {
// Do stuff.
});
http://api.jquery.com/live/
Try using bind() instead of click(). The click() method won't work on dynamically added elements to the DOM, which is probably why it only works the first time and not after you re-populate it with your updated content.
You should just have to replace
$('#docs td.delete').click(function() {
with
$('#docs td.delete').bind('click', function() {
Are you replacing the html elements that have the events on them with the data your getting through ajax? If you end up replacing the td.delete elements, then the new ones won't automatically get the binding.