Доступ к родительскому элементу управления select2 из iframe и его значение

У меня есть базовый документ, который загружается как http://localhost/index.php?action=test. В этом документе есть кнопка, которая открывает div с iframe, который загружает другой документ из того же домена http://localhost/index.php?action=search. Теперь у меня есть результаты и по щелчку ссылки в iframe, мне нужно получить доступ к полю (которое является элементом управления select2) в родительском и установить значение.Доступ к родительскому элементу управления select2 из iframe и его значение

Сгенерированный HTML выглядит следующим образом:

<tbody> 
<tr> 
    <td class="fldlabel"> 
    <div><label for="header[CTRYID]">Country</label></div> 
    </td> 
    <td> 
    <input tabindex="-1" id="header-CTRYID" data-label="Country" name="header[CTRYID]" class="ajaxselect srchtarget-CTRYID validate select2-offscreen" data-validate="required" value="" data-placeholder="Select Country" type="text"> 
    <span class="hdricon"> 
    <a href="CTRYID-search" data-source="index.php?action=search&amp;source=CTRYID" class="srchbutton"><img class="imgicon" src="/images/icons/search.ico" alt="Search Country"></a> 
    </span> 
    <div class="searchpanel" id="CTRYID-search" style=""> 
    <div class="frametitle">Search Country </div> 
    <div class="srchbody"> 
     <iframe src="index.php?action=search&amp;source=CTRYID" class="srchframe"> 
     #document 
     <!DOCTYPE html> 
     <html> 
     <head></head> 
     <body> 
      <div id="container"> 
      <div id="content" style="overflow: hidden;" tabindex="5000"> 
      <form method="post" action="index.php?action=search&source=CTRYID" name="country"> 
      <div id="searchselect" class="srchrslt"> 
       <div class="frametitle">Search Results</div> 
       <table border="1" style="margin-top: 5px;"> 
       <tbody> 
       <tr class="gridrow searchrow" data-search="IN|India" data-target="CTRYID"> 
        <td>IN</td> 
        <td>India</td> 
        <td>IND</td> 
       </tr> 
       </tbody> 
       </table> 
      </div> 
      </form> 
     </div> 
     </iframe> 
    </div> 
    </div> 
    </div> 
    </td> 
</tr> 
</tbody>

Ниже JQuery код, который я пытался.

$('.searchrow').click(function (e) { 
    alert($('#srchtarget-CTRYID',window.parent.document).attr('id')); 
    e.preventDefault(); 
    var srchdata = $(this).data('search').split("|"); 
    var srchval = JSON.stringify({"id":srchdata[0],"text":srchdata[0]+"|"+srchdata[1]}); 
    var target = "srchtarget-" + $(this).data('target'); 
    $(target,window.document).select2().select2('val',srchval); 
    $(this).parent().find('.searchpanel').hide(); 
    //  $(this).parents().find(target).val(srchval); 
});

Я получаю значения от php, только мой jquery не работает. Я пробовал window.parent, window.parent.document, window.top.document (как вы можете видеть из приведенного выше кода), но ни один из них не работает. Любое свойство, к которому я обращаюсь за пределами iframe, является неопределенным (предупреждение в приведенном выше коде).

UPDATE:

После игры вокруг, я получаю значение с window.parent.document, но я до сих пор не могу получить значение в элементе управления ВЫБ.2. Мой текущий код выглядит следующим образом:

$('.searchrow').click(function (e) { 
    var srchdata = $(this).data('search').split("|"); 
    var srchval = []; 
    srchval.push({"id": srchdata[0], "text": srchdata[0] + "|" + srchdata[1]}); 
    var target = ".srchtarget-" + $(this).data('target'); 
    var parentctrl = window.parent.document; 
    $(target,parentctrl).select2('data',srchval); 
    $(this).closest('.searchpanel').hide(); 
    $('.searchpanel', parentctrl).hide(); 
});

Я проверил (уникальное имя класса в моем случае) родительские целевой элемента правильно заполняются в переменном и значении существует в переменных данных (как объект JSON).

UPDATE 2:

я заменил уникальный класс с идентификатором родительского элемента (так как Выбор2 был тиражирование класса от родителей в управление ВЫБ.2), поэтому я получить реальный уникальный идентификатор для родитель. Однако результат тот же. Я до сих пор не могу заполнить результаты в элементе управления. Моя цель обновляется, как показано ниже, и я получаю моя цель идентификатор правильно заполняется:

var target = "#" + $(this).data('target');

Я искал, читал и пытался все решения, которые пришли в SO и в Интернете, но никто не работал. Может ли кто-нибудь помочь?

источник

2015-01-17 Ravi

Вы понимаете, что что-нибудь внутри '' теги отображается только, если браузер не поддерживает Javascript (или он отключен), не так ли? –

Lol! @Sverri, код, вставленный выше, из источника Firebug, а не из моей html-страницы. Я закрепил как код главной страницы, так и код iframe здесь, чтобы показать полную картину. – Ravi

А, ладно. Продолжать! –

Я обновился до версии v4, и приведенный ниже код «kinda» работает для нажатия значений (но элемент управления select2 дублируется с опцией. Возможно, ошибка в версии 4).

$('.searchrow').click(function (e) { 
    var srchdata = $(this).data('search').split("|"); 
    var target = ".srchtarget-" + $(this).data('target'); 
    var targetoption = target + " option[value='" + srchdata[0] + "']"; 
    var parentctrl = window.parent.document; 
    $(targetoption,parentctrl).attr("selected","selected"); 
    $(target,parentctrl).select2(); 
});

источник

2015-07-09 04:25:22 Ravi

Доступ к родительскому элементу управления select2 из iframe и его значение

ответ

Смежные вопросы