Hey All - I am having a bit of trouble with a jquery function. I have a nav bar and I want when a user clicks on the nav bar to have the page load into a div (#content)
The code I have works for the first click, but when I try to click on another item it shows the loading image, but does not put the new content in the div (it leaves the old content). Any thoughts?
$(document).ready(function() {
$('.cat').live("click",function() {
var section = $(this).attr("id");
$.ajax({
type: "POST",
url: "../soccer/nav/" + section + ".php",
beforeSend: function() {
$('div#content').hide();
$('div#loading').show();
},
success: function(html){
$('div#loading').hide();
$("div#content").replacewith(html);
}
});
return false;
});
});
Any help would be greatly appreciated!
The problem is the .replacewith() method. You are actually replacing the #content div with the new content. Just use .html() instead.
You don't need $("div#content"). You can just do $("#content")
$("#content") means find the node with the id "content".
Try with:
$.post("../soccer/nav/" + section + ".php", null, function(data)
{
$('#loading').hide();
$("#content").html(data);
});
Try to use jQuery.Load event to make use of ajax and html populating at the same time.
Related
Question Background:
JSFiddle - https://jsfiddle.net/k9K5d/200/embedded/result/
I am using Jasny Bootsrap to develop an 'off-canvas' slide out menu.
The Issue:
The menu slides out fine and also closes fine when the toggle button is pressed. The problem comes when closing the menu with an ajax call through code.
Within the menu I have a button (labeled 'Click') that makes an ajax call to append some data to a div. Within the Success method of the ajax call I am calling a Jasny 'hide' method that should dismiss the menu.
The menu does dismiss BUT often the 'body' of the view is closing before the menu slides, as shown by the red arrow:
The Code:
The Following shows my code for calling the data to be appened to a div, and then to close the off canvas menu:
$('#navBtn').click(function() {
var jsonData = {
"values" : ["Test1", "Test2"]
}
$.ajax({
type: 'POST',
dataType: 'json',
url: '/echo/json/',
data : { json: JSON.stringify( jsonData ) },
success: function(data)
{
var arraySize = data.values.length;
$('#arrayHolder').html(arraySize);
closeMenu();
}
});
});
function closeMenu()
{
$('.navmenu').offcanvas('hide');
}
I have provided a JSFiddle to display this: https://jsfiddle.net/k9K5d/200/
This issue appears on the second click of the ajax call 'Click' button.
Any help working out why the ajax call to the closeing code is causing this style would be great.
try to use .promise().done()
$('#arrayHolder').html(arraySize).promise().done(function(){
closeMenu();
});
Make your function like this. Work fine.
function closeMenu()
{
$('.navbar-toggle').click()
}
I have a div that contains people's names, which is coming dynamically.
I want to show related content of people, when it's clicked. For that, I need to pass name of person to javascript when div is clicked.
How can I achieve this?
Note: I am not using any button.
for example:
$('#parent_block_that_not_insert_dynamicly').on('click', 'div.that_add_dynamycly', function() {
var data = $(this).text(); //get name
$.ajax({
method: "POST",
data: data,
url: "url.php"
})
.done(function(msg) {
alert('saved')
});
});
So I have this little loop which checks the id of the last div on my page and then replaces the div with a rendered updated div using ajax, then loops around and repeats. Now the problem I have is that if it loops and the id of the last div is the same it just adds another updated div so I get two of the same thing. I would only want it to append the data again if the id of the last div has changed (i.e it's a different div), but I don't think Javascript has an onChange method for calling the request only when id has changed. How might I go about this in JS?
Thanks in advance.
$( window ).load(function() {
update_live();
});
function update_live (){
var id = $(".tasktable").last().attr('id');
$.ajax({
type: 'GET',
url: "/ansible_jobs/update_live/",
data: { task_id: id },
dataType: 'html',
success: data_append
});}
function data_append(data){
$('.tasktable').last().empty();
$('.tasktable').last().replaceWith(data);
setTimeout(update_live, 2000);
}
Change update_live() to update_live(previousId), compare it with the current one, and update only if it is different. Pass the id forward.
i have some jquery code that will load the chatbox of my site every second (so if any new posts arrive they become visible)
my code is here
function loadLog(){
$.ajax({
url: "/log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
if($("#chatbox").attr("scrollHeight") + 20 > $("#chatbox").attr("scrollHeight") - 20){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
everything works fine, except it is meant to autoscroll to the bottom of the chatbox so you see the newest posts, instead it just stays at the top.
I am using the most recent version of jQuery
There is no such attribute scrollHeight (it's property). What if you try something like this instead:
$box.animate({scrollTop: $box[0].scrollHeight}, 'normal');
http://jsfiddle.net/dfsq/zBdas/
Another tip: make sure you cache your DOM queries like $box = $("#chatbox"), don't reselect elements again and again.
I am writing a function to dynamically load jQuery UI accordian leaves with content. I know (think) the AJAX part works as I lifted it from another working AJAX loader I have, but the function as a whole does not work.
The code:
function load_leaf(link){
var link = link;
$.ajax({
cache : false,
type : 'POST',
async: false,
url : 'includes/'+ link +'.php?'+ new Date().getTime(),
dataType : 'text',
data: {
owner : '$user_id'
},
success: function(msg){
$("#" + link).html(msg);
console.log('Can\'t see me in Chrome, but ok in firefox !')
},
error: function() {
console.log($.makeArray(arguments));
},
complete: function() {
console.log($.makeArray(arguments));
}
});
};
$(function(){
$('.accordian').click(function(){
var link = this.getAttribute("link");
load_leaf(link);
});
});
For whatever reason this does not work. The break point seems to be this line
$("#" + link).html(msg);
Specifically the selector, as a hard coded selector works perfectly. The link variable is correctly filled i know this as i can alert the value correctly. The link is not the problem as i replaced the whole ajax function with a simple add class and it a still did not work, it also broke at the selector.
EDIT:
This is the div as printed by php:
<h3 class="accordian" id="'.$tab_id.'" link="'.$tab_link.'" >
'.$tab_name.'
</h3>
<div id="'.$tab_link.'"><p>Hi</p></div>
The html for the first one is:
<h3 class="accordian" id="accordian_manage.php" link="accordian_manage.php" >Manage Images</h3><div id="accordian_manage.php"><p>Hi</p></div>
Your ID has a period . in it, which jQuery interprets as a chained class selector.
You can either change your link/IDs, or use this hack:
$("[id='" + link + "']");
Live demo
I guess your problem is with Jquery is not finding the div to load the msg..Post the accordion div so that i could give you the proper selector