We Keep Coding

Completely delete all instances of a div with a specific class using javascript/jquery?

I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?

Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.

Browser State - Javascript/JQuery

I am trying to find a way to detect when my browser is loading and show a loading icon.
Also, is this the correct way to go about it or is there a 'standard' practice to accomplish something like that?
Edit: This functionality will be used for one of my sites during database transactions / table building.

I like the JQuery loadmask plugin for this. Apply a mask over the element that is waiting to load some stuff (say via AJAX) on page load:
$('#containerid').mask("<img src='loadinganim.gif'/> Waiting...");
Then when everything is loaded and the user can interact with the element, remove the mask overlay (typically in a callback for an AJAX call after successful completion):
$('#containerid').unmask();

I took a slightly different approach to this problem and this is what I came up with.
Code to reset my loading icon when the page is ready
$(document ).ready(function() {
$('#test').hide();
});
The function that shows the loading icon
$('.loadState').click(function () {
$('#test').show();
});
HTML Code
<div id="test">
<h3> <i class='icon-spinner icon-spin icon-large'></i> Compiling Requested Data </h3>
</div>
And I'm calling the show function my adding this class='loadState' on my submit button.
Edit: Cleaned the mixing between js and jQuery code.

Try an onPage load event listener. Im kind of new to js so I may be off a little.

JQuery Tabs: How to display a 'Loading...' message' on waiting an AJAX HTTP request response?

I am using jQuery UI 1.8.12 and I am implementing Content via AJAX tabs. I would like to show a "Loading..." message in the meantime the content is loaded (then, of course, the content retrieved with the AJAX HTTP request is displayed).
How can I do that?
Maybe I can use the tabTemplate option but I don't know how to accomplish how I can do that.
P.S.: I would like to do not use the solution used in this question but I would like to add dynamically (in the DOM) the "Loading..." message via jQuery.

You could use BlockUI. Then it's just a case of adding this to your script:
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
Every time an AJAX request starts, the UI will be blocked by the loading message, and when it stops, the block will fade out and the UI will be usable again.

Try:
$('#example').tabs({
select: function(event, ui) {
if ($(ui.panel).text() == '')
$(ui.panel).html('Loading...');
return true;
},
});

Resizing A Div/Class With New AJAX Appended Content Height, When Height Of Page Already Set OnLoad

I've spent nearly 24 hours on this issue, so I'm hoping I can rely on someone that has a better handle of javascript and jquery to help.
The situation is this. I have a slideshow-type setup (coda slider 2 by Niall Doherty) that essentially auto-adjusts the height of each panel/page based on the content that is on the page. That works great, except for when I have dynamic data coming in, in this specific case, I am appending a div via jquery POST Ajax so comments can appear without a reload needed. The problem I'm running into is that since the height is already pre-set onload, the new content doesn't appear, or rather appears below the visible content (overflow is hidden), so I need to resize the main div/class to take into account the new info - and all on the press of the "new comment" button.
I think I came up with a solution where I use the jquery height function to measure the height of the container div I am using for the slide and then adjust the height of that div accordingly, but I believe the js is executing as the button is pused, and thus when the new comment is finally appended via the ajax call, it used the old height and not the new height.
Any help would be appreciated in either getting my rough hack to work, or if you have better ideas on how to handle this more gracefully.
THANKS!!!!

I'm shooting blind without some code, but my guess would be that you'll want to execute the solution you came up with after the ajax call completes. So,
$.post("action", {
data
}, function () {
// DO THE CALCULATION HERE
});
That will execute after the AJAX call has completed.

One simple way of doing this would be to call the height adjustment function from a script tag inside loaded html. If the content loaded via ajax is also in your control, that is.

Without seeing the relevant bits of your JavaScript, it's difficult to know what you are aiming to do. However, you can execute a function once the AJAX call has completed successfully by using the "success:" option on the $.ajax() function call. e.g.
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
This callback function is where you should put your resize code.
Sorry, just noticed you were using $.post(). That too has a callback function where you should put your resize code.

Problem with jQuery Colorbox

I have a website that uses ajax jquery and colorbox.
Inside the div "#content" there are some links to other pages that open fine using colorbox.
If I reload the content of that div using ajax jquery , then the links wont popup using colorbox effect anymore.
I tried to create a function that I would call whenever I call the function that changes the contents of div #content , but no luck . I know that I must reinit/reload the colorbox to DOM everytime I load something new to the page that contains rel="colorbox" ,but I cant figure it out how.I call this inside
function showcategory() {
reinit();
...
}
function reinit() {
$('a[rel*=colorbox]').colorbox() ;
}

try to attach your handler using live instead of bind. This survives content-reloads in the divs
the api doc for live is here

You will have to use the live() method or delegate method for dynamic generated content events.