Develop Reference

All PHP turns to undefined when i use my navigation bar

When i use my navigation bar and switch page, for some reason all of my php turns undefined. I know that the cause of that is my new no-refresh navigation, basically the site doesnt refresh when im going to another page. So when i use my navigation bar all of the user-based php code turns undefined (things such as username, logo, balance etc).
Heres the new navigation code
$(function(){
$("a[rel='tab']").click(function(e){
pageurl = $(this).attr('href');
$.ajax({url:pageurl+'?rel=tab',success: function(data){
$('#content').html(data);
}});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
$('#content').html(data);
}});
});
And here's a example of php code that turnes undefined
<div class="overview-h1">Welcome back <?php echo $user['name']; ?>!</div>

I dont know if im right here, but i think that the $('#content').html(data); is only saving html when u switch page, thats atleast what i think. Altough im not entirely sure how to solve it

A javascript/jquery function to delete itself after execution

I am sending an ajax request to one of my controller to update the user interaction (which page he visits/likes) for an very insight analytics. I am storing these information in my mongo db.
All I want is, on success of this request, delete this script. But all the alert works, but the script never deletes. The following is my code
<div id="delete_this">
<script>
$(document).ready(function() {
$.ajax({
url: weblink+'user-interactions',
type: 'POST',
dataType: 'html',
data: {
//some post data
},
})
.done(function(html) {
alert("works");
var status = "executed";
alert("works here");
$("#delete_this").remove();
})
.fail(function(html) {
console.log("error");
});
});
</script>
</div>
WHAT I HAVE DONE TILL NOW:
1) tried with adding a div as the parent and pointing to delete that div as shown in script.
2) separated out the .remove() from the script into a new script tag and used something like this.
<script>
$(document).ready(function() {
$("#delete_this").remove();
});
</script>
tried to specify the parentnode and delete the child.
I failed in all three attempts. I am really stuck out here.
Any reasons why it is not working?
I also have another question relating to this.
This link says that the javascript stays in the session till the page is refreshed. So why are'nt we following a standard where we can execute the scripts and delete them
By doing so, we will be able to achieve building a bit more secured webpages. Is'nt it?

You could use plain Javascript to do this (not tested this)
var domNode = document.getElementById('delete_this');
var nodeParent = domNode.parentNode;
nodeParent.removeChild(domNode);
Not sure this is ideal but it should remove it completely from the DOM.

This works :
<button>remove</button>
<script id="test">
$( "button" ).click(function() {
$( "#test" ).remove();
alert("removed " + ($( "#test" ).length == 0));
});
</script>
try it here: http://jsfiddle.net/4ungb/
So either you have a) other errors that prevent that script to complete or b)
your criteria for testing deletion is not correct.

jQuery doesn't like .on and .append?

I have a weird problem.
I'm currently working on loading posts using PHP, AJAX and MySQL. The code structure itself looks like this:
My code structure
--- main.js ---
$(window).load(function(){
initAjax();
});
--- ajax.js ---
function initAjax(){
// Toggles a navigation
$(document).on('click', '.btn.open', function(){
... toggles a window ...
});
// Add new posts
$(document).on('click', '.btn.refresh', function(){
$.ajax({
... ajax stuff ...,
success: function(html){
// Show new posts
$('.post_container').prepend(html);
}
});
});
}
So what is the problem?
When I append new posts they'll show up, but I am not able to click .btn.open anymore - Shouldn't 'on()' fix this? When I go to the Google Chrome console.
Does somebody know a potential way to solve the problem?
Edit:
The appended posts are the same as the default loaded posts!
'.btn.open' exists (div with class="btn open")
I am using jQuery v2.0.3 (so .on should work!, .live and .delegate were replaced by .on!)
Removed an error message that was created by a corrupted Chrome extention = No change.
Created a .gif showing the problem in action: http://d.pr/i/cJB3
FIXED! #cmorrissey found a small solution by replacing $(document) with $('body')
BUT
This fix doesn't seem to be a perfect solution since $(document) normally has to work! Since I want clean code, I am totally going to try out #Potherca's Short, Self Contained, Correct, Example method and probably I'll find the solution this way. Thanks

You need to use 'body' or document.body instead of document.
$('body').on('click', '.btn.refresh', function(){
$.ajax({
... ajax stuff ...,
success: function(html){
// Show new posts
$('.post_container').prepend(html);
}
});
});
Reason: The addition of content to the body doesn't bubble up to the document level (http://bugs.jquery.com/ticket/11621), it looks like you can also use window

IE doesn't apply css styles to a dynamically added div

I have this weird problem on IE8. My application get a div via ajax and append it to the HTML.
$('#formPromocao').submit(function () {
persistPageIndex();
var postData = $(this).serialize();
$.post($(this).attr('action'), postData, function (data) {
$('#lista').empty();
$('#lista').append(data);
prepareNewForm();
});
return false;
});
This works perfectly on all browsers except IE8 the appended HTML is not stylized by the browser and I cant figure out why.
Has anyone here stumbled upon this issue before? Any help would be appreciated.
EDIT:
I have found the problem: The HTML people used HTML5 for the application and on IE8 there's a script that handles HTML5: http://html5shiv.googlecode.com/
I have to find a way to make this script run again when the HTML is updated. Can I safely do this?

Use the shiv function before appending to the document:
html = innerShiv(html, false);
$('something').append(html);

This is usually because you are appending invalid HTML, or there is already invalid HTML in the page.

Here is how I managed to append HTML5 in IE.
I found this amazing script: http://jdbartlett.github.com/innershiv/#download and then all I had to to was to append the result of innerShiv to the HTML:
$('#formPromocao').submit(function () {
persistPageIndex();
var postData = $(this).serialize();
$.post($(this).attr('action'), postData, function (data) {
$('#lista').empty();
$('#lista').append(innerShiv(data));
prepareNewForm();
});
return false;
});

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();
});
});