[eluser]elaniobro[/eluser]
I have an issue where if I put a php include the jQuery will not work. Below is my code:
Code: <div class="popup-container" id="contact-container">
<?php include('email_view.php');?>
</div>
<!--
<a href="#">
<img id="map" src="<?= base_url();?>img/footer/sitemap_a.png"/>
</a>
-->
<div class="popup-container" id="qr-container">
<div class="watermark">
<?=img(array('src'=>'img/footer/vcard_a.png','alt'=>'contact'));?>
</div>
<div class="close">
<?= anchor('',
img(array(
'src'=>'img/nav/nav_close_a.gif',
'id'=>'qrBack',
'border'=>'0',
'alt'=>'Close'
)
),
array(
'onmouseover'=>'qrBack'.'.src='."'".base_url().'img/nav/nav_close_b.gif'."'".';'.'"',
'onmouseout'=>'qrBack'.'.src='."'".base_url().'img/nav/nav_close_a.gif'."'".';'.'"'
)
);
?>
</div>
<div class="clear"></div>
<div id="contact-qr">
<div class="title">
<?= img(array('src'=>'img/footer/qr/title_qrcode.gif','alt'=>'QR code'));?>
</div>
<p class="qr-content">Use your camera phone to decode, and add my contact info to your address book.</p>
<div id="qr-img">
<?= img(array('src'=>'img/footer/qr/qrcode.png','alt'=>'QR Code'));?>
</div>
<div id="qr-title">
<?= anchor('www.google.com',img(array('src'=>'img/footer/qr/qr_appledl.gif','alt'=>'Download on iTunes','id'=>'qr-apple')),array('target'=>'_blank'));?>
<p>Get your iphone QR code reader now! Click the link to see all available applicaitons in iTunes.</p>
<div class="title">
<?= img(array('src'=>'img/footer/qr/title_whatisqr.gif','alt'=>'What is a QR code'));?>
</div>
<p class="qr-content">A QR Code is a matrix code (or two-dimensional bar code) created by Japanese corporation Denso-Wave in 1994. The "QR" is derived from "Quick Response", as the creator intended the code to allow its contents to be decoded at high speed.</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
[eluser]elaniobro[/eluser]
jQuery:
Code: [removed]
$(document).ready(function()
{
$('#submit').click(function()
{
var contact_data =
{
fullName: $('#fullName').val(),
email: $('#email').val(),
subject: $('#subject').val(),
message: $('#message').val(),
ajax: '1'
};
$.ajax({
url: "<?php echo site_url('email/send');?>",
type: 'POST',
data: contact_data,
success: function(msg){
$('#contact-container').html(msg);
}
});
return false;
});
var $contactLink = $("#contactLink");
var $contactBox = $("#contact-container");
var $qrLink = $("#qrLink");
var $qrBox = $("#qr-container");
var $qrBack = $("#qrBack");
var $contactBack = $("#contactBack");
$contactBox.css("display","none");
$qrBox.css("display","none");
$contactLink.toggle(
function()
{
if($contactBox.css("display","none")){
$contactBox.css("display","inherit");
}
$contactBox.css("display","inherit");
$qrBox.css("display","none");
$contactBox.animate({marginTop:'-=378px'},400);
$("#footer").css("overflow","visible");
$("#contact-form").css("visibility","visible");
},
function()
{
$("#footer").css("overflow","hidden")
$("#contact-form").css("visibility","hidden");
$contactBox.animate({marginTop:'0px'},400);
});
$qrLink.toggle(
function()
{
if($qrBox.css("display","none"))
{
$qrBox.css("display","inherit");
}
$qrBox.css("display","visible");
$contactBox.css("display","none");
$qrBox.animate({marginTop:'-=378px'},400);
$("#footer").css("overflow","visible");
$("#contact-qr").css("visibility","visible");
},
function()
{
$("#footer").css("overflow","hidden")
$("#contact-qr").css("visibility","hidden");
$qrBox.animate({marginTop:'0px'},400);
});
$qrBack.click(
function()
{
$qrBox.animate({marginTop:'0px'},400);
$qrBox.css("display","none");
return false;
});
$contactBack.click(
function()
{
$contactBox.animate({marginTop:'0px'},400);
$contactBox.css("display","none");
return false;
});
});
[removed]
[eluser]elaniobro[/eluser]
and here is the include:
Code: <div class="watermark">
<?=img(array('src'=>'img/footer/contact_a.png','alt'=>'contact'));?>
</div>
<div class="close">
<?= anchor('',
img(array(
'src'=>'img/nav/nav_close_a.gif',
'id'=>'contactBack',
'border'=>'0',
'alt'=>'Close'
)
),
array(
'onmouseover'=>'contactBack'.'.src='."'".base_url().'img/nav/nav_close_b.gif'."'".';'.'"',
'onmouseout'=>'contactBack'.'.src='."'".base_url().'img/nav/nav_close_a.gif'."'".';'.'"'
)
);
?>
</div>
<div class="clear"></div>
<div id="contact-form" style="border:1px solid #f09;">
<div class="title">
<?= img(array('src'=>'img/footer/contact/title_contact.gif','alt'=>'Contact Form'));?>
</div>
<?= form_open('email/send');?>
<div style="float:left">
<p><input><label class="contact-label">email</label>
<span class="contact-error">
<?= form_error('email');?>
</span>
</p>
<p><input><label class="contact-label">full name</label>
<span class="contact-error">
<?= form_error('fullName');?>
</span>
</p>
<p><input><label class="contact-label">subject</label>
<span class="contact-error">
<?= form_error('subject');?>
</span>
</p>
<div class="clear"></div>
<p><textarea>So tell me what is on your mind....</textarea></p>
<?= form_submit('submit','Send','id="submit"');?>
<?= form_close();?>
</div>
[removed]
$('#submit').click(function()
{
var contact_data =
{
fullName: $('#fullName').val(),
email: $('#email').val(),
subject: $('#subject').val(),
message: $('#message').val(),
ajax: '1'
};
$.ajax({
url: "<?php echo site_url('email/send');?>",
type: 'POST',
data: contact_data,
success: function(msg){
$('#contact-container').html(msg);
}
});
return false;
});
[removed]
[eluser]Afro Radio Head[/eluser]
So much code that I have no idea where the problem is.
But i do notice that ur writing <?php include('email_view.php');?>. Is email_view.php in your root directory or your applications folder somewhere?
If its in your application folder you use <?php $this->load->view("email_view.php");?>
Also, is ur jquery in its own file?
[eluser]elaniobro[/eluser]
Thanks, I'll try to load it like you said. And sorry for the length of the post, there is a character limit 
[eluser]elaniobro[/eluser]
No dice. I tried loading the php file like you said, but it is still breaking the jquery.
Let me try to sum up what all the code above is doing.
I have a footer, where there are 2 buttons. one of the buttons loads up an e-mail form. The other just loads up an image.
When I use an include for the e-mail form, the other button (one that loads up the image) does not work. If I disable the php include, the e-mail button does not work, and the button that loads the image does.
Any ideas?
[eluser]evolutionxbox[/eluser]
It sounds like a jquery problem not a php one.
Have you checked to see if you are referencing the same id on both the buttons? They may be trying to override one another.
[eluser]elaniobro[/eluser]
Pretty sure it's not jQuery. I had it working fine when all the code was on the same page. after incorporating ajax and an include that's where the problem started. I will double check to ensure it is not jQuery dom syntax or the like. While I do that, any other suggestions, or anyone else run into a similar problem?
[eluser]vertmonkee[/eluser]
If you're not already then I woul reccomend using Firebug extension for Firefox.
It let's you view the source code easily and any changes to the DOM when they occur.
It also shows Javascript errors and responses.
It's helped me out so much over the years.
[eluser]InsiteFX[/eluser]
You can also try this, should be in the head tags.
Code: <base href="<?php echo base_url();?>" />
<!-- set javascript base_url -->
[removed]
//<![CDATA[
base_url = '<?php echo site_url(); ?>';
//]]>
[removed]
replace removed tags.
Enjoy
InsiteFX
|
