CODEWITHSUNDEEP
javascriptjqueryjquery-mobilerequirejs
Tar
Tar

Reputation: 9015

How use jQuery Mobile with RequireJS?

<script type="text/javascript" src="/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
    console.log(jQuery.mobile !== undefined && 'good'); // prints 'good'!
</script>

<script type="text/javascript" data-main="/comp/pages/Index.js" src="/Scripts/require.js></script>

<script type="text/javascript">
    console.log(jQuery.mobile !== undefined && 'good'); // prints 'good'!
</script>

But in my Index.js, the jQuery.mobile disappears:

require([], function (view) {
    console.log(jQuery.mobile === undefined && 'undefined!'); // prints 'undefined!'
});

How do I bring mobile back to jQuery ? (I obviously don't care about having some mobile in jQuery, but interested in using jQuery Mobile with RequireJS.. just to make it clear..)

Edit 1:

I tried to add require to Index.js:

console.log(jQuery.mobile === undefined && 'undefined!'); // prints 'undefined!'
require(['/Scripts/jquery-1.8.2.min.js', '/Scripts/jquery.mobile-1.2.0.min.js'],
    function (jQuery,jqm, view) {

    console.log(jQuery.mobile === undefined && 'undefined!'); // prints 'undefined!'
});

Upvotes: 2

Views: 5373

Answers (4)

Tar
Tar

Reputation: 9015

This is my workaround, since up to date, I found no solution to it: I save the global jQuery object/function right after including it in the HTML, in a global variable myGlobalObject:

<link rel="stylesheet" href="content/jqm/jquery.mobile-min.css"/>
<script src="content/jqm/jquery.min.js" type="text/javascript"></script>
<script src="content/jqm/jquery.mobile-min.js" type="text/javascript"></script>
<!--jQuery RequireJS issue workaround:-->
<script type="text/javascript"> window.myGlobalObject = { jQuery:jQuery }; </script>

And then I define new file, jq.js, that returns this global object in the form that RequireJS is familiar with:

define(function(){
    return myGlobalObject.jQuery;
});

And whenever I need it, I use this "intermediate" module:

require(['/content/jq.js'], function ($) {
    ...
});

Upvotes: 0

robertp
robertp

Reputation: 3652

Try an older version of jQuery Mobile to start with.

jQuery 1.8.2 won't work with RequireJS, and it can be the case with the latest version of jQuery Mobile as well.

You also have to make sure you require the jQuery and jQuery mobile JS files in your code.

I think you should check out this thread: How do I use requireJS and jQuery together?

Rob

Upvotes: 0

TDR
TDR

Reputation: 21

I'm assuming you've setup RequireJS and jQuery correctly.

In your Index.js file you need to require the jQuery and jQuery mobile files; for example:

require ("/Scripts/jquery");
require ("/Scripts/jquery.mobile");

I will also point out that you should rename your files so that version numbers are not included in the filename - this will allow you to update to newer releases without having to change your code.

Upvotes: 0

Naor
Naor

Reputation: 24093

How did you manage to load index.js?
RequireJS adds .js to a file so instead of /comp/pages/Index.js you should use /comp/pages/Index:

<script type="text/javascript" data-main="/comp/pages/Index" src="/Scripts/require.js></script>

Upvotes: 1

Related Questions