Uncaught TypeError: Object function (a, b) {return new e.fn.init (a, b, h)} n'a pas de méthode 'fancybox'

StackOverflow https://stackoverflow.com/questions/8414260

  •  29-10-2019
  •  | 
  •  

Question

Je crée une page de recherche où les résultats du formulaire avec une seule entrée seront affichés dans une Fancybox.Tout fonctionne parfaitement mais si je ferme la Fancybox, elle ne s'ouvrira pas une seconde fois.En utilisant un débogueur, j'ai trouvé l'erreur qui l'empêchait de s'afficher, à savoir:

Uncaught TypeError: Object function (a, b) {return new e.fn.init (a, b, h)} n'a pas de méthode 'fancybox'

Le code que j'utilise pour cela est suivi:

Script d'en-tête / Jquery: 

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="includes/fancybox/jquery.fancybox.pack.js?v=2.0.3"></script>
<script type="text/javascript" src="includes/jquery.form.js"></script> 

<link rel="stylesheet" href="includes/fancybox/jquery.fancybox.css?v=2.0.3" type="text/css" media="screen" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/search.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(document).ready(function() {
        $(".submit").click(function() {
            $('#page_effect').fadeIn(500);
        }); 

        $(".form").ajaxForm( {
            success: function(responseText)
            {
                $.fancybox({
                    content     : responseText,
                    maxWidth    : 545,
                    maxHeight   : 560,
                    fitToView   : false,
                    autoSize    : false,
                    closeClick  : false,
                    openEffect  : 'fade',
                    closeEffect : 'fade'
                });
                $('#page_effect').fadeOut(200);
            }
        });
    });   
</script>

Forme: 

        <form name="input" action="search.php" method="post" class="form">
        <input name="searchterms" class="input" type="text" />
        <input class="submit" type="submit" value="Zoek naar video!" />
    </form>
Était-ce utile?

La solution

J'ai résolu le problème avec la réécriture du code de soumission du formulaire de publication. Voici le correctif de travail pour cela: 

<script type="text/javascript">
    $(document).ready(function() {
        $('.submit').click(function(e){
            var $query = $('.form').formSerialize();
            $('#page_effect').fadeIn(500);
            $.ajax({
                data: $query,
                dataType: 'html',
                type: 'post',
                url: 'includes/functions.php'
            }).done(function(data){
                $.fancybox({
                    content     : data,
                    maxWidth    : 545,
                    maxHeight   : 560,
                    fitToView   : false,
                    autoSize    : false,
                    closeClick  : false,
                    openEffect  : 'fade',
                    closeEffect : 'fade'
                });
                $('#page_effect').fadeOut(200);
            });
            e.preventDefault();
        });    
    });   
</script>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top