how to stop jquery .load to overwrite information inside the div - javascript

I use the jquery .load function to load a divs(left) from a other page inside a div(page_content) on the current page but when i use the load function to load a other div(right) in page_content it overwrites everyting inside the div(page_content).
And i just want it to be added to the div.
here is my code:
function load(){
$('#page_content').load('test.php .left');}
function load2(){
$('#page_content').load('test2.php .right');
}

You can use the callback function to convert two call to single call and get the .left and right content in the call to assign to your element with id page_content,
$('#page_content').load('test.php', function(result){
leftContent = $(result).find('.left').html();
leftRight = $(result).find('.right').html();
$(this).html($(leftContent + leftRight ).find('')
});

try this instead
function load(){ $('#page_content').load('test.php .left');}
$.ajax({
url: 'test2.php .right',
success: function(data) {
$('#page_content').append(data);
}
});

Related

Run JS function on .load() content

I have a function called timepicker which is usually called by using
$(document).ready(function() {
$('#timepicker').timepicker();
});
But I have been unable to make it work on content that is displayed using jQuery .load().
I have tried several methods including using the below but nothing happens?
$(document).ready(function() {
var $parent = $('#small_container');
var time = $parent.find('#timepicker');
time.timepicker();
});
The #small_container is the ID of the DIV that the content is loaded into and the #timepicker is the id of the input that should call the function when it is clicked on.
Have I added it to the correct place in the callback?
$('.edit_job').on("click", function(){
var week_start = $('input[name=week_start]').val();
var job_id_del= $('input[name=job_id]').val();
var user_id = $('input[name=user_id]').val();
$('#small_container').load('ajax/edit_weekly_job_load.php?job_id='+job_id_del+'&week_start='+week_start+"&user="+user_id);
$('#timepicker').timepicker();
$('#small_container').on("click", '#edit_job_submit', function(){
jQuery.ajax({
type: "POST",
url: "ajax/edit_weekly_job_ajax.php",
dataType: "json",
data: $('#edit_job_form').serialize(),
success: function(response){
if(response.success === 'success'){
window.opener.$("#diary").load("ajax/diary_weekly_load.php?week_start="+week_start+"&user="+user_id);
window.close();
}
},
});//end ajax
});//save_job_edit_submit
});//end edit job
The content is loaded asynchronously to the element #small_container. The timepicker function is gets called before the content is actually loaded. Try to call the function in the callback of load() method:
$('#small_container').load('ajax/edit_weekly_job_load.php?job_id='+job_id_del+'&week_start='+week_start+"&user="+user_id ,function(){
$('#timepicker').timepicker();
} );
Also validate that element #timepicker is actually appended to the element #small_container.

$(document).Ready() loads Flexigrid, but not when called again by other function outside $(document).Ready()

I have a function called "loadTimeTrackersGrid()", which loads a flexigrid.
The setup looks like this :
$(document).ready(function () {
var editTrackerID = 0;
loadTimeTrackersGrid();
)};
The beginning of the function looks like this :
function loadTimeTrackersGrid(caseStatus) {
var url = 'Utilities/DataViewHandlers/ViewTimeTrackers.ashx?CaseFileID=' + $('#hidCaseFile').val();
if ($('#hidTaskID').val() !== "")
url += '&TaskID=' + $('#hidTaskID').val();
if (caseStatus == "NI") {
url += '&NonInvoiced=1';
}
$('#viewTimeTrackersGrid').flexigrid({
url: url,
dataType: 'json',
method: 'get',
As you can see it calls another page which contains a stored procedure which returns a set of rows and a jsonwriter then puts the returned columns into the flexigrid.
But the problem I am having is outside the (document).ready(), when I have a function that calls the "loadTimeTrackersGrid()", it never reloads the flexigrid or makes a call to the file that contains the stored procedure.
My function(that I am trying to get to work) looks like this :
function returnInvoicedItems() {
loadTimeTrackersGrid();
$('.menuBtn img').parent().children('ul').removeClass('menuShow');
}
And this is how I am calling "returnInvoicedItems" function:
<li>Non Invoiced Tracker</li>
I am not sure, but I think I can see the problem. Your second function returnInvoicedItems() that calls loadTimeTrackersGrid(), it does have a jQuery code (in the line $('.menuBtn img').parent().children('ul').removeClass('menuShow');. Now, if you have a jQuery call, don't you have to do make that call inside $(document).ready()?
Try to move returnInvoicedItems() inside $(document).ready() and see what happens.
This works like a gem:
$('#viewTimeTrackersGrid').flexOptions({ url: 'Utilities/DataViewHandlers/ViewTimeTrackers.ashx?' + invoicedUrl + '&NonInvoiced=1' }).flexReload();

Assign dynamic div id from js var

I am having trouble selecting a div with jQuery after assigning the id to a Javascript variable:
$(function() {
$(".do").live("click",function()
{
var id = $(this).attr("id");
$.ajax({
//reload div using js var id
$('id').fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
});
return false;
});
});
When I call a static div it works just fine like this:
$('#staticdiv').fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
How can I select a div from a Javascript variable containing its id?
*EDIT
Here is an example if the divs:
Button to engage reload
click to reload
DIV to reload:
<div id="12">to be refreshed</div>
keep in mind the "12" us dynamic and could be any variable.
You can do that using this:
$("#"+id).fadeOut() // ...
However, I wouldn't recommend doing it that way (it won't work on things without IDs); try this instead (which should work on things without IDs):
$(".do").live("click", function() {
var me = $(this);
$.ajax({
// ...
success: function(data) {
me.fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
}
// ...
});
return false;
});
Additionally, I'm not sure if you really want that .fadeOut().load().fadeIn() chain; the load will not wait for the fadeOut to finish and the fadeIn will not wait for the load to finish (although the fadeIn will wait for the fadeOut to finish). If you have problems with that, you should try this:
me.fadeOut('fast', function() {
me.load('http://www.example.com/get.php', function() {
me.fadeIn('slow');
});
});
Aren't you supposed to use the variable id instead of string 'id'.
As follows:
$('#'+id).fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");

Change css of first div after live click

I want to be able to change the css of a div after I have clicked span.submit-comment.
How would I go about to change the css of that div.
I tried putting the following in the success part of the script:
$('div.news-comment:first').css("background-color", "#000");
But the div just flashes black (as I click) because it's inside the click function. I want the css to persist untill I refresh the page.
Any ideas?
// post news comment
$('span.submit-comment').live('click', function() {
var commentname = $('input#commentname').val();
var commentcontent = $('textarea#commentcontent').val();
var newsid = $('span.view-comments').attr('id');
var datastring = 'commentname=' + commentname + '&commentcontent=' + commentcontent + '&newsid=' + newsid;
$.ajax({
type: "POST",
url: "ajax/post_news_comment.php",
data: datastring,
success: function(){
$('div#news-comments').load('ajax/get_news_comments.php?news_id=' + newsid);
}
});
});
If the comment you are changing the background on is in the #news-comments div you are replacing it with the loaded html from get_news_comments.php in your .ajax callback. No matter where you put your js the element will be replaced.
If so, adding it in a callback for the load in your success function should be ok.
Your css script is ok, but just place it after load function.
Just add a return false at the end of the function for the button click, or pass in the value e and put e.preventDefault(); at the begining or end of the function.
e.g.
$('span.submit-comment').live('click', function(e) {
e.preventDefault();
// your other code.
return false;
});

Jquery each() function loop with Ajax

I wish to replace values in each div class with my ajax result but i cannot seem to append my table result to the individual div class during the loop. I know somehow the $(this).append(table) is placed wrongly because it is not outside of the ajax request. How can i modify this to get the effect i wanted?
my script is as such:
$('.developer_badgesarea').each(function(){
// get the div class value to perform ajax
var player_id = $(this).html();
var table;
// if condition to conduct ajax
if(player_id != 'None'){
$.ajax({
// ajax stuff here
success: function(result){
//table created here
$(this).append(table);
}
});
}
});
Issue is your "this" reference inside the ajax success function. It references the callback function, instead of the dom element you are intending it to be referenced.
$('.developer_badgesarea').each(function(){
// element reference to your div, that you'll access inside your ajax call
var elm = $(this);
// get the div class value to perform ajax
var player_id = elm.html();
var table;
// if condition to conduct ajax
if(player_id != 'None'){
$.ajax({
// ajax stuff here
success: function(result){
//table created here
elm.append(table);
}
});
}
});

Categories