선택한 데이터를 원래 창으로 다시 보냅니다.

Question

bpSearch라는 파일이 있습니다. bpSearch 내부에는 addNewModal이라는 MODAL 창이 있습니다. addNewModal 내에 partnerName 및 partnerCode라는 2 개의 INPUT 필드가 있습니다. 한 번 클릭 한 버튼이 searchPartnerModal이라는 다른 MODAL 창으로 열립니다.

<form action="bpSearch.php" method="get"> 
    <input type="text" readonly id="partnerName" name="partnerName" /> 
    <input type="text" readonly id="partnerCode" name="partnerCode" /> 
    <a href="#searchPartnerModal" data-toggle="modal" class="btn">Go</a> 
</form> 

사용자 클릭이 이동이 searchPartnerModal 열리면 :

여기 addNewModal 내부 형태의 일부이다.

searchPartnerModal은 사용자가 코드 또는 이름을 입력하는 곳입니다 (둘 다일 필요는 없음). 하지만 SEARCH를 치면 JSON을 반환하는 AJAX 호출을 사용하여 구문 분석 한 후 결국 pNames라는 UL 필드에 반환합니다. 우리는 여전히 searchPartnerModal 안에 있습니다. 사용자가 이름을 입력하면 내가 다음 UL 태그의 데이터를 반환하는 PHP 스크립트로 보내하기 위해 jQuery를 사용

<form action="bpSearch.php" method="get"> 
    <input type="text" id="pNameSearch" name="pNameSearch" /> 
    <input type="text" id="pCodeSearch" name="pCodeSearch" /> 
    <input type="button" class="btn" id="pSearch" name="pSearch" value="search" /> 
</form> 

: 여기

는 searchPartnerModal 내부의 형태이다. 여기

사용자가 이름을 입력하면 검색합니다 JQuery와 있습니다 :

$('#pSearch').on('click', function() 
{ 
    var partnername = $('#pNameSearch').val(); 
    if($.trim(partnername) != '') 
    { 
    $.post('api/pNameSearch.php', {partnername: partnername}, function(data) 
    { 
     var obj = JSON.parse(data); 
     $('#pNames').empty();  
     var htmlToInsert = obj.map(function (item) 
     { 
     return '<li><a id="getPInfo" href="javascript:;" 
     onclick="getPInfo()" data-selname="'+item.FULL_NAME+'" 
     data-selcode="'+item.PARTNER_CODE+'">' 
      + item.FULL_NAME + ' - ' 
      + item.PARTNER_CODE + '</a></li>'; 
     }).join(''); 
     $('#pNames').html(htmlToInsert); 
    }); 
    }; 
}); 

를이 코드로, 나는 유효한 이름에 대한 데이터베이스 테이블을 검색 할 이름을 보낼 수 있어요. 데이터는 JSON을 통해 반환되며 구문 분석되어 LI 태그로 UL 태그 (pNames)에 표시되며 각 태그에는 data-selname 및 data-selcode라는 자체 데이터 속성이있는 A 태그가 있습니다.

이제 사용자가 pNames에서 반환 된 데이터 링크 중 하나를 클릭하면 이전 모달 창인 addNewModal로 다시 보내야합니다.

여기가 내가 붙어 있습니다.

위의 Jquery를 살펴보면 JSON을 구문 분석 한 후 getPInfo()라는 각 반환 된 데이터 조각의 A 태그 안에 또 다른 Javascript 함수가 생성 된 것을 볼 수 있습니다. 여기

내가 기능 getPInfo()에 대한 지금까지 무엇을 가지고 있습니다 :이 시점에서

function getPInfo() 
{ 
    var selname = ($('#getPInfo').attr('data-selname')); 
    var selcode = ($('#getPInfo').attr('data-selcode')); 
} 

, 나는 두 변수 (selname 및 selcode)을 경고하고 그들에게 경고 창에 표시 할 수 있습니다.

내가하고 싶은 것은 partnerName과 partnerCode라고하는 해당 INPUT 필드에서 addNewModal로 두 변수를 다시 보냅니다.

그래서 selname은 partnerName으로 이동하고 selcode는 partnerCode로 이동합니다.

너무 많이 입력하지 않았거나 너무 적지 않기를 바랍니다. 데이터를 반환 한 PHP 스크립트를 표시하지 않았습니다. 나는 그것이이 시점에서 스스로 설명 할 수 있기를 바랍니다.

원래 모달 창으로 데이터를 보내도록 도와주세요.

Answer 1

변경 앵커 ID = getPInfo에 클래스 = getPInfo 여러 앵커을 가지고 있기 때문이다. 그런 다음 앵커의 click 이벤트를 처리하고 데이터 속성을 추출하고 addNewModal 양식에서 해당 양식 요소를 설정하십시오.다음은 지금까지 보았던 마크 업을 기반으로 작동해야합니다.

$(function(){ 
    $('body').on('click', 'a.getPInfo', function (e) { 
     var $a = $(e.srcElement || e.target); 
     $('#partnerName').val($a.attr('data-selname')); 
     $('#partnerCode').val($a.attr('data-selcode')); 
     $('#searchPartnerModal').modal('hide'); //assuming bootstrap modal 
    }); 
});