Как передать и получить параметры между двумя страницами в Jquery Mobile?

Question

Я работаю над некоторым демонстрационным приложением, чтобы узнать что-то в Jquery Mobile. Я перепробовал много вариантов, но не смог найти решение по нескольким причинам: -

1. http://jsfiddle.net/sahil20grover1988/zZMXQ/48/ В этом случае, когда я добавляю параметр с Url в Страница индекса она не направляется на Страница поиска
2. Если я не добавлю Params на Индексную страницу , то как мне передать params из Индексная страница в Поиск на странице .
3. Также мне нужна помощь, как получить Параметры на странице поиска ??

Answer 1

Помогает ли это?

• http://jsfiddle.net/phillpafford/VXV3R/

JS

$('#page2').live('pageshow', function(event, ui) {
    alert('Page 2 - CID: ' + getParameterByName('cid'));
});

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Home Page
            </li>
            <li>
                <a href="?cid=1234#page2" rel="external">Page 2</a>
            </li>
        </ul>                
    </div>
</div>
<!-- page 2 -->
<div data-role="page" id="page2">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Page 2
            </li>
            <li>
                <a href="?cid=4321#home">Home Page</a>
            </li>
        </ul>
    </div>
</div>

Answer 2

Я придумал этот простой подход ...

Сначала добавьте пользовательские атрибуты HTML5 к элементам на странице 1 для хранения данных, которые необходимо передать. Мой атрибут называется data-parm

<div data-role="page" id="one">
    <div data-role="content">
        <ul data-role="listview" data-theme="c">
        <li><a data-parm="john" href="#two">one</a></li>
        <li><a data-parm="mary" href="#two">two</a></li>
        <li><a data-parm="sue" href="#two">three</a></li>
        </ul>
    </div>
</div>   

<div data-role="page" id="two">
    <div data-role="content">
        <div id="showParmHere"></div>
    </div>
</div>

В вашем javascript создайте обработчик щелчка (или другой тип обработчика), который выбирает атрибут и присваивает значение переменной, которая будет доступна для вас на странице 2.

Для этого примера я добавил его в HTML-код div, который находится на странице 2.

$("a").on("click", function (event) {

   var parm = $(this).attr("data-parm");
   //do something here with parameter on page 2 (or any page in the dom)
   $("#showParmHere").html(parm);

});

Answer 3

Чтобы передать доблесть с помощью URL в jQuery mobile, вы можете использовать rel = "external" ...

Пример:

<a id="l" href="index.html?id='1234'#dateA" rel="external">

Вы можете увидеть: http://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html

Answer 4

Я создал решение для jQM 1.4+, которое позволяет передавать параметры через URL.Это работает очень хорошо, если вы хотите, чтобы пользователь мог переходить непосредственно на страницу с параметрами (скажем, из электронной почты), или если пользователь обновляет страницу.

Она находится под лицензией MIT, и выможете найти его здесь, на GitHub .

Answer 5

Я наткнулся на этот вопрос, потому что та же проблема, но думаю, что я нашел более легкий путь.По крайней мере, если вы используете событие "pagebeforechange".Вот где я попробовал решение до сих пор.

Вы можете получить строку поиска из второго параметра функции события pageonchange по этому пути объекта: ".options.link.context.search".Я надеюсь, что примера кода достаточно, чтобы объяснить это.

$(document).live("pagebeforechange", function(e, secondparameter) {
  alert(secondparameter.options.link.context.search);
});