Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'fancybox'

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

  •  29-10-2019
  •  | 
  •  

Question

I'm making a search page where the results of the form with a single input will be displayed inside a Fancybox. Everything works perfect but if I close the Fancybox then it will not open for a second time. Using a debugger I found the error preventing it from showing up which is:

Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'fancybox'

The code I'm using for this is followed:

Header/Jquery script:

<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>

Form:

        <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>
Was it helpful?

Solution

Got it fixed with rewriting the code for submitting the post form. This is the working fix for this:

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top