开发者

Multiple Facebox on webpage: Separate events?

I have two facebox in a webpage. But my problem is the submit button in both facebox, whatever the alert i made to my first facebox, it will also going to alert to my second facebox.

The reason here why I am having two facebox, because I have a menu with two forms, then every form uses facebox.

Menu:

configure podcast         Upload Music

When I fire on submit button to configure podcast form. It will fire a message "Podcast Description has been edited". Then when I going to click on the submit button in Upload Music, the message in configure podcast form will also be displayed before displaying my message in upload music form. Please Help,

Heres the code of my two forms:

<br/>
For upload music:
<br/><br/>

<script>
    $(document).ready(function(){
    $('#audioFile').uploadify({
            'uploader'  : 'jquery/js/uploadify/uploadify.swf',  
            'script'    : 'jquery/js/uploadify/uploadify.php',
            'cancelImg' : 'jquery/js/uploadify/cancel.png', 
            'folder'    : 'uploaded/podcastUpload/audio',
            'fileExt'   : '*.mp3',
            'method'    : 'post',
            'fileDesc'  : 'MP3 Files',
            'onComplete'  : function(event, ID, fileObj, response, data) {
                $(".close").click();
                        for (var i=0; i < document.jform.explicit.length; i++)
                        {
                            if (document.jform.explicit[i].checked){
                                var rad_val = document.jform.explicit[i].value;
                            }
                        }
                        var dataString = 'action=PodcastData&jobid=<?=$jobid?>&title=' + $("#title").val() + '&authorName=' + $("#authorName").val() + '&authorEmail=' + $("#authorEmail").val() + '&description=' + $("#description").val() + '&categories=' + $("#categories").val() + '&keywords=' + $("#keywords").val() + '&explicit=' + rad_val + '&fileNameAudio=' + fileObj.name + '&linkAudio=' + fileObj.filePath;
                        $.ajax({
                        cache: 'false',
                        type: "POST",  
                        url: "ajaxfunction.php",  
                        data: dataString,
                        success: function(msg){
                                    $(".close").click();
                                    alert('File Has been uploaded successfully!');
                            }
                        }); 
                    }
            });

    $(".submit").click(function(){
        javascript:$('#audioFile').uploadifyUpload($('.uploadifyQueueItem').last().attr('id').replace('audioFile','')); 
    });
});

<br/><br/><br/><br/><br/><br/><br/>

For configure POdcast:

<br/><br/>
    <script>
        $(document).ready(function(){

        $('#imageFile').uploadify({
            'uploader'  : 'jquery/js/uploadify/uploadify.swf',  
            'script'    : 'jquery/js/uploadify/uploadify.php',
            'cancelImg' : 'jquery/js/uploadify/cancel.png', 
            'folder'    : 'uploaded/podcastUpload/image',
            'fileExt'   : '*.jpg;*.gif;*.jpeg',
            'fileDesc'    开发者_JS百科: 'Image Files',
            'method'    : 'post',
            'onComplete'  : function(event, ID, fileObj, response, data) {
                $(".close").click();
            }
        });
            $(".submit").click(function(){  
                javascript:$('#imageFile').uploadifyUpload($('.uploadifyQueueItem').last().attr('id').replace('imageFile',''));
                for (var i=0; i < document.pDescrForm.pExplicit.length; i++)
                {
                    if (document.pDescrForm.pExplicit[i].checked){
                        var rad_val = document.pDescrForm.pExplicit[i].value;
                    }
                }

                var dataString = 'action=newPodcastDescr&jobid=<?=$jobid?>&pTitle=' + $("#pTitle").val() + '&pAuthorName=' + $("#pAuthorName").val() + '&pAuthorEmail=' + $("#pAuthorEmail").val() + '&pDescr=' + $("#pDescr").val() + '&pSubtitle=' + $("#pSubtitle").val() + '&pCopyright=' + $("#pCopyright").val() + '&pExplicit=' + rad_val;
                $.ajax({
                cache: 'false',
                type: "POST",  
                url: "ajaxfunction.php",  
                data: dataString,
                success: function(msg){
                    $(".close").click();
                    alert('New Podcast description has been added');
                    }
                }); 
            });
        });
</script>


Look at this code in music form code:

$(".submit").click(function(){ ...

And then find the same in podcast form code. Your submit buttons are bound with click event twice. jQuery selectors find all the matching elements, and bind event to all of them. If you bind event second time, jQuery make stack of event callbacks, and run them one after another.

Change the classes of submit button (because you need unique selectors) or if you dont want to destroy css add another (i.e. music and podcast) and use it as follows:

$(".submit.music").click(function(){ ... $(".submit.podcast").click(function(){ ...

This should trigger only one callback.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜