jQuery Forum

Hello.

We’re trying to develop a client-side/browser view for our site using jQuery and Twitter Bootstrap.  Using Twitter Bootstrap’s responsive design, fluid grid system, we have a page that has 3 rows.  The first row has 3 columns (i.e., 3 span4 divs).  The second row has 4 columns (i.e., 4 span3 divs).  And, the last row has 2 columns (i.e., 2 span6 divs).  Here’s a snippet of the html:

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4 sortable">
                <div>
                    content1a
                </div>
            </div>
            <div class="span4 sortable">
                <div>
                    content2a
                </div>
            </div>
            <div class="span4 sortable">
                <div>
                    content3a
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span3 sortable">
                <div>
                    content1b
                </div>
            </div>
            <div class="span3 sortable">
                <div>
                    content2b
                </div>
            </div>

            <div class="span3 sortable">
                <div>
                    content3b
                </div>
            </div>

            <div class="span3 sortable">
                <div>
                    content4b
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 sortable">
                <div>
                    content1c
                </div>
            </div>

            <div class="span6 sortable">
                <div>
                    content2c
                </div>
            </div>
        </div>
    </div>

Works good.  However, we’re having troubles implementing the next requirement.  We need to be able to drag, drop, and swap the divs.  That is, using jQuery, we need to be able to grab one of the divs with a class=”spanX”, drag it onto one of the other divs with a class=”spanX”, drop it, and have the two divs swap places (positions with the Bootstrap grid system), including swapping, for example, a span3 to a span4 and a span4 to a span3.

We’ve tried many things with jQuery’s draggables, droppables, sortables, etc., and haven’t come up with an adequate solution, so we thought we’d see if we could get some assistance.  Here’s a snippet of our js code:

            sourcePositionLeft = 0,
            sourcePositionTop = 0,
            targetPositionLeft = 0,
            targetPositionTop = 0,
            handlePortletSortable = function () {
                if (!jQuery().draggable) {
                    return;
                }
                if (!jQuery().droppable) {
                    return;
                }

                $(".sortable").draggable({
                    opacity: 0.9,
                    revert: "invalid",
                    revertDuration: 500,
                    zIndex: 5000,
                    start: function (event, ui) {
                        var startPosition = ui.helper.position();
                        sourcePositionLeft = startPosition.left;
                        sourcePositionTop = startPosition.top;
                    }
                });
                $(".sortable").droppable({
                    accept: ".sortable",
                    tolerance: "intersect",
                    drop: function(event, ui) {
                        var dropPosition = $(this).position();
                        targetPositionLeft = dropPosition.left;
                        targetPositionTop = dropPosition.top;
                        swapTiles(ui.draggable, $(this));
                    }
                });

            },
            swapTiles = function(source, target) {
                moveTile(target, sourcePositionLeft, sourcePositionTop);
                moveTile(source, targetPositionLeft, targetPositionTop);
            },
            moveTile = function(tile, positionLeft, positionTop) {
                tile.animate({
                    left: positionLeft,
                    top: positionTop,
                },
                {
                    easing: 'swing',
                    step: function () { return false; },
                    complete: function () { return false; },
                    always: function () { return false; }
                });
            },

This is not working.  The divs aren’t swapping positions and moving to the correct place, and if you drag a span4 div onto a span3 the two divs aren’t swapping classes so that they still conform to Bootstrap.

Any suggestions on how to program and resolve this situation?

Thanks.

Hello.  We have a single page application with two views (essentially, a list of items and a details page for the selected item).  Both views are in separate html files, and we’re using sammy.js to transition/navigate between the pages.  Everything was working great until we tried to add jQuery Mobile to the mix.  Now, when we navigate to the second page (the details page), jQuery Mobile is not styling the page.

Our working app is not set up as described by jQuery Mobile’s multi-page template (i.e., having all page divs in the same html file and use their navigation system to load linked pages into the DOM via AJAX).  But, is it possible to have separate pages, use something other than jQuery Mobile’s navigation, and still have jQuery Mobile style the second page?  Or, is there a way to force jQuery Mobile to style the second page?

Here’s some code snippets that’ll hopefully help show what we’re doing.  (Note: We’re also using ASP.NET razor views.)

index.cshtml
<body>
    @RenderPage("Views/items.cshtml")
    @RenderPage("Views/item.cshtml")

    @Scripts.Render("~/bundles/jquery")
    <script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
            $.mobile.loader.prototype.options.text = "loading.  please wait...";
            $.mobile.loader.prototype.options.textVisible = true;
        });
    </script>
    @Scripts.Render("~/bundles/jquerymobile", ...)
</body>

items.cshtml (this page gets loaded and rendered correctly)
<section id="items-view" class="view" data-role="page">
    <section data-role="header">
        ....
    </section>

    <section data-role="content">
        (navbars, ULs, LIs, etc. are here, with each LI a link to go to the details page)
    </section>

    <section data-role="footer">
        ....
    </section>
</section>

item.cshtml (this page gets loaded but NOT rendered correctly, there is no jQuery Mobile styling)
<section id="item-view" class="view" data-role="page">
    <section data-role="header">
        ....
    </section>

    <section data-role="content">
        (ULs, LIs, listboxes, textboxes, etc. are here)
    </section>

    <section data-role="footer">
        ....
    </section>
</section>

router.js (used to route between pages)
....
            navigateTo = function (url) {
                sammy.setLocation(url);  // url = #/items or #/item/1234
            },
....

In the js file for the item page, we’ve tried:

                var $page = $("#item-view");
                //$page.trigger("create");
                //$page.listview("refresh");
                //$page.page();  (this one kind of work but doesn’t style every object)
                //$page.page("refresh", true);

but haven’t got any thing to work correctly and completely.

So, again, given our situation, is there a way to have a jQuery Mobile multi-page app with actual separate physical files and have all pages get style correctly?  Or is there a programmatic way to force jQuery Mobile to style all pages correctly?

Thanks.

Hello.  I’m working on a mobile website using jQuery Mobile and knockout.js.  I have a (kind of) complex scenario with jQuery Mobile’s popup and listview and knockout data binding inside the popup div, and I can’t get it working.

I have a nested list of alarms as shown below.  For each day, it creates a list-divider row.  Then inside each day, each alarm has a row.

<ul id="alarmslist" data-bind="foreach: days" data-role="listview">
    <li data-role="list-divider"><span data-bind="text: date"></span></li>
    <!-- ko foreach: alarms1 -->
    <li>
        <a href="#popupBasic" data-rel="popup"><span data-bind="text: alarmName"></span></a>
        <section id="popupBasic" data-role="popup" data-corners="true" data-history="false" data-overlay-theme="a">
            <a href="#" class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="c">Close</a>
            <ul data-role="listview" data-inset="true">
                <li data-role="divider" data-theme="a">Alarm Options</li>
                <li><section class="alarmDetail"><span data-bind="text: alarmID"></span></section></li>
                <li><a href="#">Go to Data</a></li>
                <li><a href="#">Acknowledge</a></li>
            </ul>
        </section>
    </li>
    <!-- /ko -->
</ul>

I’m needing to attach the popup widget to the alarm row such that when the li row is clicked the popup appears with a list of option for that row.  This should be available for each row.  The options for each row will depend on the alarmID key.

This is where the problem occurs.  I’m trying to data bind the alarmID field (which is part of the alarms1 array) so that the next operation knows what to do with the correct alarm.  However, I get a knockout error because it cannot find the alarmID (<span data-bind="text: alarmID"></span>).  I guess jQuery Mobile is creating the popup section at the bottom of the DOM, well below where my view and viewmodel are defined for the knockout piece.

Anyway, does anyone have any ideas how to “fix” this situation?  Or, know of a work-around?  Or, even some other solution?