How to show form using onClick/hover combination without hiding it when uploading an image with cakephp
Question
I want a button that shows up when hovering over my image, then when I click the button I want a form to appear, but I do not want it to disappear when I click 'choose file'
<script type="text/javascript">
$("#profile_pic, #edit_pic").hover(
function(){
$('#edit_pic').removeClass('hidden');
}
);
$("#edit_pic").click(function (){
$("#upload_form").removeClass('hidden');
});
</script>
<html>
<div id="profile_pic">
</div>
<div id="edit_pic">
</div>
<div id="upload_form">
//upload image form using cakephp
<?php
echo $this->Form->create('Account', array('enctype' => 'multipart/form-data', 'url' => array('controller' => 'images', 'action' => 'before_crop', 'accounts' , $current_user['id'])));
echo $this->Form->input('image_relpath', array('type' => 'hidden'));
echo $this->Form->input('Account.image', array('type' => 'file', 'label' => false));
echo $this->Form->end('Upload');
?>
</div>
</html>
I cannot tell if my jquery is wrong or if the cakephp is automagically messing things up, butas soon as I click "choose file" (a button created by the form), the whole form disappears.
3 answers
solution1
0 2012-11-19 19:26:26
I can easily spot some issues on your code.
First on HTML, don't forget to open and close quotes in tag's attributes.
Second, on your jQuery selector, when referring to an ID, never forget to use the sharp symbol # .
Try fixing them, and see what happens.
You can also use this example:
<style type="text/css">
#edit_pic, #upload_form {
display: none;
}
</style>
<script type="text/javascript">
$("#profile_pic").mouseenter(function(){
$("#edit_pic").show();
});
$("#edit_pic").click(function(){
$("#upload_form").show();
});
</script>
Be careful, because in this way, the #edit_pic button will never disappear once it's shown.
solution2
0 2012-11-19 19:48:24
There is nothing in your code to indicate why things are disappearing. It's obvious your example is not complete. If you can provide a complete example that would reproduce the errors you're encountering, we can try to find out what's wrong and solve the problem.
solution3
0 2012-11-19 19:49:17
Adding "return false" to my .click function solved this issue.
$("#edit_pic").click(function (){
$("#upload_form").removeClass('hidden')
return false;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.