jquery mobile asp новая страница в iframe

0

Ну, у меня большая часть проблемы разобралась. Но все еще есть небольшая проблема. <iframe src="", похоже, не ведет себя, он не будет забирать url в моем data-popupurl="product.asp?itemid=[catalogid].

Кто-нибудь знает, почему?

<script>
$( document ).on( "pageinit", "#page1", function() {

    $(".popupInfoLink").on("click", function(){
        var url = $(this).data("popupurl");
        $( "#popupInfo iframe" ).attr("src", url);
    });

});
</script>


<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="product.asp?itemid=[catalogid]"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="320" height="300" alt="pot" border="0" /></a>

<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
    <iframe src="" width="800px" height="800px"></iframe>
</div>

Вы можете увидеть мою проблему здесь: https://www.kitchenova.com/mobile

Просто запустите поиск, чтобы сказать "cookie", затем нажмите на продукт. product.asp?itemid=[catalogid] пустое всплывающее окно, в product.asp?itemid=[catalogid] должен загружаться product.asp?itemid=[catalogid].

  • 0
    <a href="..." target="_blank"> ...
  • 0
    Вы не можете использовать всплывающее окно, чтобы показать страницу, но вы можете использовать диалог для этого.
Показать ещё 1 комментарий
Теги:
jquery-mobile
dialog

3 ответа

1
Лучший ответ

Вы можете использовать виджет jQM popup с iFrame.

Вот ДЕМО

Ссылка вокруг img теперь ссылается на идентификатор popup. Я добавил атрибут пользовательских данных, называемый data-popupurl, который имеет URL-адрес для iFrame, и я добавил класс для обработчика кликов, так как вы, вероятно, будете иметь несколько эскизов на странице (ПРИМЕЧАНИЕ: атрибут данных может просто содержать идентификатор каталога или вы можете использовать другой способ получить URL-адрес):

<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="http://www.houzz.com/photos/6147609/T-Fal-I-Hoffmann-Stock-Pot-8-Qt--contemporary-cookware-and-bakeware-"><img src= "http://st.houzz.com/simgs/a1419d6702561831_3-4003/contemporary-cookware-and-bakeware.jpg" width="320" height="300" alt="pot" border="0" /></a>

<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
    <iframe src="" width="400px" height="400px"></iframe>
</div>

Скрипт просто реагирует на щелчок по ссылке, читая URL-адрес для всплывающего окна, а затем устанавливает iFrame src в этот URL-адрес. В вашем случае url будет product.asp?itemid=[catalogid]

$( document ).on( "pageinit", "#page1", function() {    
    $(".popupInfoLink").on("click", function(){
        var url = $(this).data("popupurl");
        $( "#popupInfo iframe" ).attr("src", url);
    });    
});
Поделиться
  • 0
    На самом деле есть небольшая проблема. Iframe src = "" не принимает java-скрипт "var url". Всплывающее окно появляется пустым. Я попытался добавить «product.asp? Itemid = [catalogid]» в iframe src, но это только заставило работать первый эскиз, остальные миниатюры только открыли первую ссылку.
  • 0
    @ Mr.Vegas перезагрузите iframe после открытия всплывающего окна . var iframe = $ ("# popupInfo"). find ("iframe"). clone (); $ ("# popupInfo"). find ("iframe"). replaceWith (iframe) .attr ("src", url); `что-то вроде этого.
Показать ещё 3 комментария
0

Таким образом, вы не хотите открывать новое окно, вы хотите, чтобы диалоговый кадр отображался поверх другого вашего контента?

Взгляните на PopupControlExtender из Ajax Control Toolkit. Я не знаю, насколько хорошо он будет работать в среде jQuery Mobile, но это стоит посмотреть.

Образец кода.

<asp:Button runat="server" ID="Btn1" Text="Click Here For More Info" />
<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server" TargetControlID="Btn1" PopupControlID="Panel1" Position="Bottom" />
<asp:Panel runat="server" id="Panel1">
Here is some more info!
</asp:Panel>

Или, поскольку вы используете jQuery Mobile, почему бы вам не использовать то, что они уже предоставляют для этого? Посмотрите на панели jQuery Mobile или всплывающие окна jQuery Mobile.

Поделиться
0

Посмотрите на атрибут target тега anchor (a). Вот документация W3 Schools.

<a href="product.asp?itemid=[catalogid]" target="_blank"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="320" height="300" alt="[name]" border="0"></a>

Кстати, я настоятельно призываю вас не делать этого. Людям это не нравится, потому что у них нет способа узнать, что такое поведение, прежде чем они это сделают. Если люди действительно хотят открыть его в новом окне или вкладке, тогда они могут щелкнуть правой кнопкой мыши и сделать это.

Не забудьте оставить один вопрос за столбец, это политика. Но лучший способ учиться - это прыгать и делать уроки. Не задавайте вопросов, пока вы серьезно не застрянете. Часть обучения программе - это научиться самостоятельно разбираться.

Поделиться
  • 0
    Я серьезно застрял, я был в течение 5 или 6 часов подряд. Я посетил несколько форумов JQuery, здесь, и учебники YouTube, но не могу заставить это работать. Возможно, всплывающее окно было неподходящим словом, больше похоже на лайтбокс, в который загружена динамическая информация, и пользователь может кликнуть, чтобы избавиться от него.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню