Let me start off by saying I know this is probably not the correct way to do this, but I am sure someone will point me in the right direction 🙂
Project Background
What I am trying to achieve is this; I have an index page on my root and four php pages – about, contact, location, and faq’s – that reside in a folder called external. When the index page loads it will display four check boxes – about, contact, location, and faq’s. When one of the check boxes get checked a div will slide down and show the contents of the corresponding php page via load(). The user will now have the option to add or remove elements of the php page to customize and taylor to their needs. Once the user completes the editing they simply click the done button and php spits out another php file with the changes so the user can download the file.
Stay with me here :), so basically the idea here is to have a barebones file that the user can change to fit their needs and will be able to download for their use once editting is complete.
Problem
When the external php page is loaded the css works fine, but the JQuery does not work on the external page. I suspect it is due to the fact I am using one JQuery file that is called in my index file and there is some type of scope issue when I try to use it with elements in the external file. An example would be, when I try to access a link within the contact.php the query function will not work. Keep in mind the contact.php page is called in via load().
Files
Note: I understand I need to be more descriptive with my naming convention in regards to my divs, the css files is what I was told to use and I was not to make a different one 🙁
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CR8Я</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="library/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="library/style.css" />
</head>
<body>
<div id="w">
<div id="mh"><p>CR8Я</p></div>
<div id="mc">
<div id="pc">
<div id="h"><p>STEP 1 : Select pages to build</p><a href="#">UNCHECK ALL</a></div>
<div id="cb-c">
<div id="cb-c-r1">
<form name="f">
<ul>
<li><input type="checkbox" id="cb" name="index" value="index"/><label>Index Page: </label></li>
<li><input type="checkbox" id="cb" name="index" value="contact"/><label>Contact Page: </label></li>
<li><input type="checkbox" id="cb" name="index" value="about"/><label>About Page: </label></li>
<li><input type="checkbox" id="cb" name="index" value="calender"/><label>Calender Page: </label></li>
<li><input type="checkbox" id="cb" name="index" value="news"/><label>News Page: </label></li>
</ul>
</form>
</div>
<div id="cb-c-r2">
<form>
<ul>
<li><input type="checkbox" id="cb" name="index" value="image"/><label>Image Gallery: </label></li>
<li><input type="checkbox" id="cb" name="index" value="testimonials"/><label>Testimonials Page: </label></li>
<li><input type="checkbox" id="cb" name="index" value="faqs"/><label>Faq's Page: </label></li>
<li><input type="checkbox" id="cb" name="index" value="links"/><label>Links Page: </label></li>
<li><input type="checkbox" id="cb" name="index" value="products"/><label>Products Page: </label></li>
</ul>
</form>
</div>
</div>
</div>
<div id="pc">
<div id="h"><p>Step 2 : Page options</p></div>
<div id="output-container"></div>
jquery.js
$(function()
{
$('#h a').click(function()
{
$('input:checkbox').removeAttr('checked');
$('#output-container img').remove();
$('#output-container').children().slideUp(function()
{
$(this).remove();
});
});
$('input:checkbox').click(function()
{
var cb = $(this).attr('value');
var active = false;
$('#test-link').live('click',function()
{
alert('It Worked :)');
});
if($(this).is(':checked'))
{
$('#output-container').append('<div id="'+cb+'-container" class="container"><div id="container-header-'+cb+'" class="container-header"><p>'+cb+'</p></div></div>');
$('#output-container div:first-child').css('border-top','none');
$('#'+cb+'-container').hide().slideToggle('slow',function()
{
$('#container-header-'+cb).append($('<img>',{src:'graphics/add_item.png',id:'expand-'+cb}));
});
}
else
{
$('#expand-'+cb).remove();
$('#'+cb+'-container').slideToggle(function()
{
$(this).remove();
});
}
$('#container-header-'+cb).click(function()
{
if(!active)
{
$('#'+cb+'-container').append('<div id="option-pane-'+cb+'" class="option-pane"></div>');
$('#option-pane-'+cb).load('external/'+cb+'.php', function()
{
$('#option-pane-'+cb).hide().slideToggle('slow',function()
{
$('#container-header-'+cb+' img').attr("src","graphics/remove_item.png");
});
});
active = true;
}
else
{
$('#option-pane-'+cb).slideToggle('slow',function()
{
$(this).is(':visible')?$('#container-header-'+cb+' img').attr("src","graphics/remove_item.png"):$('#container-header-'+cb+' img').attr("src","graphics/add_item.png");
});
}
});
});
});
contact.php (I am grabbed one file to demonstrate)
<div class="emc">
<?php
//print('testing');
?>
<label>Select Amount of Text Sections</label><br />
<select>
<option>Select ...</option>
<option value="1">1 Section</option>
<option value="2">2 Sections</option>
<option value="3">3 Sections</option>
<option value="4">4 Sections</option>
</select><br /><br />
<p>Once the user selects the amount of text sections and desired contact fields, jquery will populate the amount of required header and text area sections for the user to fill-in desired text. Once complete the user will click submit jquery will post all information to a controller.php and a front-end, back-end, and MySQL file will be created.</p><br /><br />
<a href="#" id="test-link">Test Link</a>
</div>
If I need to clarify anything or I am just completely losing people, let me know and I will try to better my question. Thanks in advance for any feedback 🙂
The reason its not working is that click function won’t work on dom elements added after the page load. You need to use the live function. Please check out the answer here: JQuery access dynamically created objects