2012-06-08 3 views
3

У меня с помощью сообщества SO написана javascript и php-страница, которая позволяет мне передать значение со всплывающей страницы на родительскую страницу.Javascript popup selector + PHP

Это работает на интернет-проводнике на 100%, но не в Google Chrome или на моем планшете ipad/galaxt.

Любая идея о том, как это можно исправить? Любая помощь оценивалась как всегда.

Ниже представлены части моего кода с родительской страницы (newsale.php) и всплывающей страницы (sku.php). Я знаю, что другие методы рекомендуются с использованием всплывающего окна, но мне нужно заставить это решение работать со всплывающей страницей по причинам применения.

newsale.php Parent Page (Фрагменты кода, а не вся страница)

<script type="text/javascript"> 
function selectValue(id) 
{ 
    // open popup window and pass field id 
    window.open('sku.php?id=' + encodeURIComponent(id),'popuppage', 
     'width=1000,toolbar=1,resizable=1,scrollbars=yes,height=200,top=100,left=100'); 
} 

function updateValue(id, value) 
{ 
    // this gets called from the popup window and updates the field with a new value 
    document.getElementById(id).value = value; 
} 

</script> 

<table> 
<tr id="r1"> 
<input size=10 type=number id=sku1 name=sku1 onchange="showUser(1, this.value)" <? if($rows>0){echo "value=".mysql_result($resultorder,0,1);} ?>><img src=q.png name="choice" onClick="selectValue('sku1')" value="?"> 
</td> 
</tr> 
<tr id="r2"> 
<td> 
<input size=10 type=number id=sku2 name=sku2 onchange="showUser(2, this.value)" <? if($rows>1){echo "value=".mysql_result($resultorder,1,1);} ?> ><img src=q.png name="choice" onClick="selectValue('sku2')" value="?"> 
</td> 
</tr> 
</table> 

sku.php Popup Page (вся страница)

<? 

    $con = mysql_connect('localhost', 'username', 'password'); 
if (!$con) 
    { 
    die('Could not connect to server: ' . mysql_error()); 
    } 
    $db=mysql_select_db("DBName", $con); 

    if (!$db) 
    { 
    die('Could not connect to DB: ' . mysql_error()); 
    } 


$sql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode"; 
$result=mysql_query($sql); 

?> 

<script type="text/javascript"> 

    function AjaxFunction(cat_id) { 
    var httpxml; 
    try { 
     // Firefox, Opera 8.0+, Safari 
     httpxml = new XMLHttpRequest(); 
    } catch (e) { 
     // Internet Explorer 
     try { 
     httpxml = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
     try { 
      httpxml = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e) { 
      alert("Your browser does not support AJAX!"); 
      return false; 
     } 
     } 
    } 
    function stateck() { 
     if (httpxml.readyState == 4) { 
     var myarray = eval(httpxml.responseText); 
     // Before adding new we must remove previously loaded elements 
     for (j = document.testform.subcat.options.length - 1; j >= 0; j--) { 
      document.testform.subcat.remove(j); 
     } 
     for (i = 0; i < myarray.length; i++) { 
      var optn = document.createElement("OPTION"); 
      optn.text = myarray[i]; 
      optn.value = myarray[i]; 
      document.testform.subcat.options.add(optn); 
     } 
     } 
    } 
    var url="dd.php"; 
    url = url+"?cat_id="+cat_id; 
    url = url+"&sid="+Math.random(); 
    httpxml.onreadystatechange = stateck; 
    httpxml.open("GET",url,true); 
    httpxml.send(null); 
    } 

</script> 


<script type="text/javascript"> 
function sendValue(value) 
{ 
var e = document.getElementById("subcat"); 
value = e.options[e.selectedIndex].value; 
var parentId = <?php echo json_encode($_GET['id']); ?>; 
window.opener.updateValue(parentId, value); 
window.close(); 
} 
</script> 


<script type="text/javascript"> 
function updateinput(){ 
var e = document.getElementById("subcat"); 
var catSelected = e.options[e.selectedIndex].value; 


document.getElementById("copycat").value=catSelected; 
} 
</script> 


<form name="testform"> 
Category: &nbsp; <select name=cat id=cat onchange="AjaxFunction(this.value);" style="width=300"> <br> 
<option value='' style="width=300">Select One</option> 
<br> 
<? 

    require "config.php";// connection to database 
    $q=mysql_query("select * from categories"); 
    while($n=mysql_fetch_array($q)){ 
    echo "<option value=$n[cat_id]>$n[category]</option>"; 
    } 

?> 
</select> 
<br><br> 
Pack Code: 
<select name=subcat onchange="updateinput();" > 
<br><br> 
</select> 
<br><br> 
<input type=hidden name=copycat id=copycat > 
<td><input type=button value="Select" onClick="sendValue(document.getElementById(copycat))" /></td> 
</form> 

dd.php (для динамического выпадающего списка)

<? 

    $cat_id=$_GET['cat_id']; 
    require "config.php"; 
    $q=mysql_query("select concat(packcode,', ',description) as details from skudata where cat_id='$cat_id'"); 
    echo mysql_error(); 
    $myarray=array(); 
    $str=""; 
    while($nt=mysql_fetch_array($q)){ 
    $str=$str . "\"$nt[details]\"".","; 
    } 
    $str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string 
    echo "new Array($str)"; 

?> 

Я не думаю, что dd.php оказывает какое-либо влияние на функциональные возможности родительских всплывающих окон, но включил его, чтобы вы могли следить за кодом.

Как уже упоминалось, это работает на интернет-проводнике на 100%, но не в Google Chrome или моем ipad.

+0

Поскольку Google Chrome поддерживает (тот же домен 'postMessage') [http://html5demos.com/postmessage], почему бы не использовать это, чтобы добавить поддержку для него. Это устраняет необходимость вмешательства сервера. Все делается клиентами. –

+0

Спасибо PhpMyCoder, хорошо выглядит, но я не могу заставить этот пример работать. У вас есть основной пример обеих страниц, которые я могу использовать в качестве отправной точки? Спасибо, Ryan – Smudger

+0

Почему бы не создать источник просмотра на этой странице и iFrame. JS довольно чист. Просто будь осторожен. Реми использует какую-то библиотеку, которая абстрагирует событие, прикрепляется к пользовательской функции. Вы хотите использовать '.addEventListener' для Chrome. –

ответ

3

При использовании

document.getElementById("subcat"); 

, то вы должны также иметь элемент с таким идентификатором. Ваш

<select name=subcat onchange="updateinput();" > 

не будет делать с браузерами, как Chrome, Firefox, Konqueror и, вероятно, много других. Использовать

<select id="subcat" onchange="updateinput();" > 

вместо этого.

+0

Он должен установить оба 'id' и 'name', иначе значение поля выбора не будет доступно после GET/POST. –

+0

В этом случае «имя» не требуется, поскольку значение select сохраняется на javascript window.opener.updateValue(), но не отправляется. Не больно иметь оба, хотя ... – Themroc

1

К сожалению, я не могу получить код для работы, так что я не могу проверить это, но изменение

window.opener.updateValue(parentId, value); 

в

window.opener.contentWindow.updateValue(parentId, value); 

или

window.opener.window.updateValue(parentId, value); 

может решить это.

Если это не так, возможно, вы можете опубликовать ошибки, отображаемые с консоли Chrome, и лучше объяснить , что именно не работает.

0

В нижней функции вы также вызвали субкату.

function sendValue(value) 
    { 
    var e = document.getElementById("subcat"); 
    } 
along with one mentioned by Themroc. 

Вы должны сначала иметь id = "subcat".

Все еще вы получаете некоторую проблему, вывешиваете ошибку.

Спасибо.