jQuery Window plugin gives "$ is not defined" error

Asked

Viewed 247 times

4

I’m having the following problem, I found a plugin, jQuery Window, that opens windows with minimize button, maximize, etc., and opens pages inside this window, only that I’m not able to make it work.

I would like to use in my system the example number 6, method 2, if someone can give me a light how I wheel as in the example found on the site would be great.

Remembering that I include in my HTML all the necessary libraries like jQuery, jQuery UI and Plugin.

Code of the button I left to call the function and open the window when clicked

<input type='button' value='Click Here to Create Window' onclick='createWindowWithRedirectChecking2();'>

My Code - Plugin

function createWindowWithRedirectChecking2(){
    $.window({
        title: "create window with redirect checking",
        url: "http://www.myspace.com",
        iframeRedirectCheckMsg: "the window is going to redirect to {url}!!\r\nPlease     select 'cancel' to stay here."
    });
}

Imports

<script src="libs/JQuery/jquery-1.11.0.min.js"></script>
<script src="libs/Bootstrap/js/bootstrap.min.js"></script>
<script src="libs/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
<script src="libs/jquery-window-5.03/jquery.window.js"></script>

<link href="libs/Bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link id="jquery_ui_theme_loader" type="text/css" href="libs/jquery-ui-1.10.4/css/black-tie/jquery-ui.css" rel="stylesheet" />
<link href="libs/jquery-window-5.03/css/jquery.window.css" rel="stylesheet" media="screen">

Code in the Jsfiddle: Jsfiddler

javascript jquery jquery-ui

  • Very strange, but now that I’m seeing your precedence, try setting Bootstrap as the last on the list. Something else... Why are you using such an old version of jQuery? Suddenly upgrading might be a possible way.

  • @Brunoaugusto I changed the order now as you suggested but continued the same way, just open the empty gray frame when I click the button.

  • This happens to any site you set?

  • @Brunoaugusto access the site of the plugin I posted there above, da para ver que lá funciona, and seems to be simple to implement, but in practice here with me n ta funcionando nenhum dos exemplos exibidos la.

  • @Brunoaugusto yes, I changed the Myspace that was there by Uol and presents the same result, only the frame.

  • @Marcosjunior It would be possible for you to pass your code to that site so we can see the problem closely http://jsfiddle.net

  • In addition to switching to Jsfiddle, still with the tab Network open Chrome, when clicking the button you should see a new entry from Method GET pointing to the URL set and right after N other items referring to each resource that the external site requires. For me www.myspace.com I get a 301 from Permanently moved. If you have some traffic block, which is very unlikely, it may appear different.

  • @Silvioandorinha ta ai http://jsfiddle.net/JSXKQ/

  • But its version is beyond old. @Marcosjunior, in Jsfiddle you don’t use <link> and <script>, you load resources in the left pane.

  • @Brunoaugusto obg for the tip, never used this system before.

  • It also took me a while to learn at first, it’s normal. :)

Show 6 more comments

1 answer

5


In the tests I did here using the code provided on the plugin page, it only works until jQuery 1.8.3. From 1.9.0 it stops working.

Works:

<body>
    <input type="button" onclick="createWindow();" value="Crefate a window"/>
    <!-- jQuery Library -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="js/jquery.window.js"></script>
    <script type="text/javascript">
        function createWindow() {
            $.window({
                showModal: true,
                modalOpacity: 0.5,
                icon: "http://www.google.com/favicon.ico",
                title: "Hello World!",
                content: "<h1>Hello World!</h1>",
                footerContent: "<div style='color:gray;'>this is the footer</div>"
            });
        }
    </script>
</body>

Switching to //code.jquery.com/jquery-1.9.0.min.js no longer works.

To last revision of the plugin is in 2011:

Last Revision: 2011-04-30

I think it’s the case of looking for an alternative or using the jQuery Migrate which allows you to use newer versions:

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.js"></script>

  • I’ll test here on my watch what happens

  • 3

    That’s right, it only works in the older version of Jquery, thank you very much brasofilo, and also to all others who helped solve the problem :)

  • 1

    @Marcosjunior, has how to make an official gambiarra ;) Updated the answer.

  • I’m going to try the gambiarra here, obg ;)

Browser other questions tagged javascript jquery jquery-ui

You are not signed in. Login or sign up in order to post.