jQuery UI Widgets Forums Getting Started Installation

Tagged: 

This topic contains 4 replies, has 4 voices, and was last updated by  Peter Stoev 11 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Installation Posts
  • Installation #244

    admin
    Keymaster

    1. Download jQWidgets.

    2. Unzip to a directory of your choice.

    3. Copy the jqwidgets directory to your project.

    4. Use your favorite text editor to create a basic HTML page:

    <html>
    <head>
    <!-- add the jQuery script -->
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <!-- add the jQWidgets framework -->
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <!-- add one or more widgets -->
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <!-- add one of the jQWidgets styles -->
    <link rel="stylesheet" href="jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    </head>
    <body>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#myButton").jqxButton({ width: '120px', height: '35px', theme: 'darkblue'});
    });
    </script>
    <input type="button" value="Click Me" id='myButton'/>
    </body>
    </html>
    Installation #6723

    camichano
    Member

    hi, I try to test any widget of jwidget in MVC4, but the application doesn’t run due to errors of javascript, but when I test in MVC3 everything works fine, my doubt is if the widget’s don’t work in MVC4 or I need to do something else to make the widgets work.
    best regards.

    Installation #6729

    Peter Stoev
    Keymaster

    Our product does not have any dependencies on a specific platform or IDE. We tried to find an issue with MVC4, but without avail. Could you provide additional details about the issues that you experience with MVC4? Which version of jQuery do you use – 1.7.2 or some other version? You can also send us a sample to support@jqwidgets.com. We’ll be glad to take a look at it.

    Here’s more info about my working sample with MVC4.

    – Views/Shared/_Layout.cshtml

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    <link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function () {
    jQuery("#jqxWidget").jqxCalendar({ width: 250, height: 250 });
    });
    </script>
    </head>
    <body>
    <header>
    <div class="content-wrapper">
    <div class="float-left">
    <p class="site-title">@Html.ActionLink("Your logo here", "Index", "Home")</p>
    </div>
    <div class="float-right">
    <section id="login">
    @Html.Partial("_LoginPartial")
    </section>
    <nav>
    <ul id="menu">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
    </nav>
    </div>
    </div>
    </header>
    <div id="body">
    @RenderSection("featured", required: false)
    <section class="content-wrapper main-content clear-fix">
    @RenderBody()
    </section>
    </div>
    <footer>
    <div class="content-wrapper">
    <div class="float-left">
    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
    </div>
    <div class="float-right">
    <ul id="social">
    <li><a href="http://facebook.com" class="facebook">Facebook</a></li>
    <li><a href="http://twitter.com" class="twitter">Twitter</a></li>
    </ul>
    </div>
    </div>
    </footer>
    @RenderSection("scripts", required: false)
    </body>
    </html>

    – Views/Home/Index.cshtml

    @{
    ViewBag.Title = "Home Page";
    }
    @section featured {
    <section class="featured">
    <div class="content-wrapper">
    <div id='jqxWidget'>
    </div>
    <hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
    </hgroup>
    <p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
    http://asp.net/mvc</a>. The page features <mark>videos, tutorials,
    and samples</mark> to help you get the most from ASP.NET MVC. If you have
    any questions about ASP.NET MVC visit <a href="http://forums.asp.net/1146.aspx/1?MVC"
    title="ASP.NET MVC Forum">our forums</a>.
    </p>
    </div>
    </section>
    }
    <h3>
    We suggest the following:</h3>
    <ol class="round">
    <li class="one">
    <h5>
    Getting Started</h5>
    ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
    enables a clean separation of concerns and that gives you full control over markup
    for enjoyable, agile development. ASP.NET MVC includes many features that enable
    fast, TDD-friendly development for creating sophisticated applications that use
    the latest web standards. <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn
    more</a></li>
    <li class="two">
    <h5>
    Add NuGet packages and jump start your coding</h5>
    NuGet makes it easy to install and update free libraries and tools. <a href="http://go.microsoft.com/fwlink/?LinkId=245153">
    Learn more</a></li>
    <li class="three">
    <h5>
    Find Web Hosting</h5>
    You can easily find a web hosting company that offers the right mix of features
    and price for your applications. <a href="http://go.microsoft.com/fwlink/?LinkId=245157">
    Learn more</a></li>
    </ol>

    The jQWidgets package is added to the Scripts folder of the ASP .NET MVC4 project. To create the test project, I clicked File>New >Project. Then I selected Visual C# on the left in VS2010 and then I selected ASP.NET MVC 4 Web Application. In the New ASP.NET MVC 4 Project dialog box, I selected Internet Application and left Razor as the default view engine.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Installation #12388

    omaralfa
    Member

    Can you please check if this would work also on VS2012. It will work only if you choose MVC 3. It will never work if you choose MVC 4. You will always get jqxCalendar undefined exception.

    Installation #12399

    Peter Stoev
    Keymaster

    Hi omaralfa,

    The post from my previous post is for MVC4 and Yes it will work with VS2012 and MVC4.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Installation’ is closed to new replies.