Develop Reference

jQuery script works after refreshing page

I use this code to change the text of an element, but it only works I refreshing the page how could i make it work without refreshing.?
jQuery(document).ready(function($) {
$(".qodef-pl-filter-holder ul li.qodef-pl-current span").text(function() {
return $(this).text().replace("Show all", "OLA");
});
});
Any ideas? Thanks!

Completely removing loaded forms with jQuery -

So I'm using .load() to load a view into an element - and when I'm done with it I do an .innerHTML = '' to get rid of it.
But if I do it more than once (i.e. close and open the element) - the form is definitely gone in between and reloaded, but when I submit it submits duplicates.
Here is the code:
$('a.comments').click(function(e){
e.preventDefault();
// $('.overlaybackground').addClass('open');
Component.Overlay.toggleOverlay();
$('#commentcontainer').load($(this).attr('href'), function(){
Component.Forms.init(page, {});
});
});
$('.overlaybackground').click(function(e){
if(e.target.className == 'overlaybackground open'){
e.preventDefault();
Component.Overlay.toggleOverlay();
// $('.overlaybackground').remove('*:not(#commentcontainer)');
document.getElementById('commentcontainer').innerHTML = '';
}
});

Not sure of the specific scenario. But if you only want to toggle the visual, simply toggle the CSS property display of the form instead of removing it from the DOM:
display:none<--> display:block

Try the following:
$('#commentcontainer').empty()

content not showing when clicking nav

I'm trying to figure out why my jquery isn't working correctly. I click on my navbar link and the content space shows for .0923202 of a second and goes back to be hidden. Thank you.
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
});
});
http://jsfiddle.net/NHgpg/

While anchor tags are meant to send users to another page, you're using it to show new content on the page. You will want to return false to override the default behavior of the anchor tag
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
return false;
});
});

How to .load() just a specific div from a page into a a target div, not the whole page

I have the following script that loads a page into a div and not just the targeted div. This is most evident when going back to my index and my header and footer are jammed into the <div id="contentspace"></div>.
I read on here somewhere that the div needs to be placed in it's own page prior to being displayed. Not sure which method would do that. Is this possible without hashtags Thanks for your help
<script type="text/javascript">
$(function() {
$('#header a').click(function() {
$('#contentspace').empty();
$("#contentspace").load(this.href, function(response){
console.log($('#content', response).html())
event.preventDefault();
});
});
});
</script>

The method .load() can load page fragment, simply by specifying a valid jquery selector next to the url.
$('myelement').load('page.html #content', function() {
...
});
Note that when loading page fragments, jquery will remove any SCRIPT element it might contain.
In you example, you would do:
$("#contentspace").load(this.href + ' #content', function(response){
...
});

Did you read the documentation at all? Take a look at the section titled Loading page fragments in the jQuery API for .load(). Essentially you just pass a selector along with the URL of the page to load as the first argument of the method.

prettyPhoto and Ajax-loaded content

I'm currently working on a little product display page that loads prettyPhoto-enabled galleries through ajax. The problem is, prettyPhoto doesn't work on the images added after the page loads initially. I understand that I need to re-initialize prettyPhoto after the new content loads, but how? I've tried adding prettyPhoto.init(); to the code that is returned to the page - that doesn't work.
Page I'm working on is here: http://turningpointpro.com/page.php?id=10

I ended up finding two solutions. The first and best was to put this whole bit:
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
into the ajax callback, not the prettyPhoto.init(); function I was calling before.
I also had some luck with using the API instead of re-loading prettyPhoto again.
Hope this helps someone.

If you are using ASP.NET with Ajax, the scriptmanager will allow you to use a function called pageLoad() that is called every time the page posts back (async or otherwise).
your code:
function pageLoad()
{
$("a[rel^='prettyPhoto']").prettyPhoto();
}

$(function() {
$('#navigation a.button').click(function(e) {
$.get( $(this).attr('href'), function(data) {
$('#portfolio').quicksand( $(data).find('li'), { adjustHeight: 'dynamic' }, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); } );
});
e.preventDefault();
});
});