1

閉じたときにshowModalDialogから値をインポートできる動的 Div を作成しています。したがって、モーダルを閉じた後、いくつかの値を取得します。

私がここでやろうとしていることは次のとおりです。

  1. いくつかの動的 div があり、各 div に対して、ウィンドウを開くためのリンクがあります。
  2. ファイルを選択すると、カンマ区切りで親ウィンドウに戻ります。
  3. そのポップアップが開かれた div 内にそれらの値を挿入したいと思います。しかし、このシナリオでは私は問題に直面しています。分割は動的に生成されます

Javascript + Jqueryベースの完全なコードは次のとおりです。次のエラーが表示されます。

TypeError: theDiv.appendChild is not a function
[Break On This Error]   

theDiv.appendChild(newNode);

    <script type="text/javascript" src="JS/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function eliminateDuplicates(arr,divID) 
{   
    var i,       
    len=arr.length,       
    out=[],       
    obj={};    
    for (i=0;i<len;i++) 
    {     
        obj[arr[i]]=0;   
    }   
    for (i in obj) 
    {     
        out.push(i);   
    }   
    return out; 
}
function GetElementsStartingWith(tagName, subString) {
    var elements = document.getElementsByTagName(tagName);
    var result = [];
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element.id && element.id.substr(0, subString.length) == subString) {
            result.push(element);
        }
    }
    return result;
}
Test= function(str,divID) 
{
    var arrID = new Array();
    arrID = str.split(',');                  
    arrID = eliminateDuplicates(arrID);            
    var theDiv = $("#projectsList"+divID).attr('id'); //document.getElementById('projectsList'); 
    alert(theDiv);
    var cmp= $("#projectIDS"+divID).val(); //document.getElementById("projectIDS").value;
    var cnp = $("#countProj"+divID);//document.getElementById("countProj")  
    var cproj;
        if(cnp.val().length == 0)
            cproj=0;
        else
         cproj=parseInt(cnp.val());

    for (var j=0; j<arrID.length; j++)
    {  
        if (parseInt(cproj) + 1 > 50)
        { 
            alert("You cannot add more than 50 Project id's ");
            return;
        }
        if( cmp!="" && cmp.indexOf(arrID[j])!=-1)
        continue;
        var newNode = document.createElement('div');  
        newNode.style.cssText = "background:#CCCCCC;border:1px solid #666666;width:100px;word-wrap:break-word;margin:3px;float:left;color:black;text-decoration:none!important;height:auto;vertical-align:middle;padding-top:2px;";    
        newNode.title = arrID[j]+" ";
        newNode.innerHTML = '<input type=hidden name=Proj_' + j + ' ' + 'value=' + arrID[j] + '>' + arrID[j] + ' <a href="#" title="Remove Project" onclick="removetext($(this).parent());"><b>X</b></a>';   
        theDiv.appendChild(newNode);
        if(cmp.length == 0) 
            {
                //document.getElementById("projectIDS").value=arrID[j]
                $("#projectIDS"+divID).val(arrID[j]);
            }
        else
            {
                //document.getElementById("projectIDS").value = document.getElementById("projectIDS").value+","+arrID[j];
                $("#projectIDS"+divID).val($("#projectIDS"+divID).val()+","+arrID[j]);
            }
            cproj = parseInt(cproj)+1;  
        //document.getElementById("countProj").value =cproj; 
        cnp.value(cproj);
    }  
}
removetext = function(par)
{
    var strremove=par.text();
    var strexist = document.getElementById("projectIDS").value;
    strremove = strremove.replace(" X","");
    tempRemove(strexist, strremove);
    par.remove();
    var cproj;
        if(document.getElementById("countProj").value.length == 0)
            cproj=0;
        else
         {cproj=parseInt(document.getElementById('countProj').value);

        cproj=parseInt(cproj)-1;}                       
        document.getElementById("countProj").value =cproj;   
}

function tempRemove(strexist,strremove)
{
    var b = strexist.indexOf(strremove);
    var after = strexist.indexOf(",",b);
    var newstrexist;
    var before = strexist.lastIndexOf(",",b);
    if(after!=-1)
    {newstrexist=strexist.replace(strremove+',',"");}
    else if(before!=-1)
    {newstrexist=strexist.replace(','+strremove,"");}
    else
    {newstrexist= strexist.replace(strremove,"");}

    document.getElementById("projectIDS").value=newstrexist;
    //remove current friend
}
function openWindow(divID)
{
    var lookUpAlys=window.showModalDialog("files.cfm?d=" + Math.random() + '&fileID=' + divID,window,"center=yes;dialogWidth:895px:dialogHeight:785px;status:no");
    if(lookUpAlys.forename!=undefined)  
    { 
        var temp = lookUpAlys.forename;
        Test(temp,divID);
    }
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="1">
  <tr>
    <td>Choose</td>
    <td>Files</td>
    <td>Action</td>
  </tr>
  <cfloop from="1" to="5" index="i">
  <cfoutput>
  <tr>
    <td><input type="checkbox" name="getFile" id="getFile" value="#i#" /></td>
    <td><div id="projectsList#i#" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="text" name="projectIDS#i#" id="projectIDS#i#" data-id="#i#" value="" /><input type="text" data-id="#i#" name="countProj#i#" id="countProj#i#" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(#i#);">Files</a></td>
  </tr>
  </cfoutput>
  </cfloop>
</table>
</body>
</html>

コードを間違って入力した場合は申し訳ありません。基本的に古典的なJavascriptの方法でやろうとしています

4

2 に答える 2

2

これは、あなたが思っていることをしません：

var theDiv = $("#projectsList"+divID).attr('id'); //document.getElementById('projectsList');

やったほうがいい

var theDiv = $("#projectsList"+divID)[0];

DOM要素を取得します。

または、このシナリオでは、

var theDiv = document.getElementById("projectsList" + divID);

また、生のDOM操作とjQueryでラップされた操作をどこでも混在させている理由がわかりません。そのうちの 1 つに固執し、一貫性を保ちます。

于 2013-06-14T07:41:58.590 に答える
0 
var container = $('.itemsList');
var divSubmit = $(document.createElement('div'));
//assigning id to div
$(divSubmit).attr('id','itemTemplate');
$(divSubmit).css({"font-family":"Gotham, Helvetica Neue, Helvetica, Arial, sans-serif","position":"relative","height": "70px","clear" : "both","background-color":"#FFF","border-bottom": "0.09em solid #EBEBEB"});
//adding class to main container
$(divSubmit).addClass('itemTemplate');
//adding Child's name label and assigning id to it.
var Name = '<label class="lblName" id="lblName" for="Name">'+getName()+'</label>';
$(divSubmit).append(Name);
$(divSubmit).append(container);

これがサンプルコードです。まず最初に、生成された div を含む itemslist というサンプル コンテナーがあります。divSubmit は動的に生成され、コンテナに追加されます。クリックイベントのdivを見つける。子供の名前を取得したいとしましょう。

alert($($(this).find("label.lblName")).val());
于 2015-03-01T20:41:15.513 に答える