PHP와 jquery, PHP 변수를 자바 스크립트로 전달하는 데 도움이됩니다.

Question

내 웹 사이트 사용자가 이미지를 업로드하도록 허용하고 이미지를 다시 선택하면 업로드가 정상적으로 작동하지만 내 컨트롤러에 문제가 있습니다. 또는, 내가 나를 도울 수있는 그 어떤 감사하겠습니다, 내가 생각하는 볼

보기 :

<div id="background-select"> 
<?php 
$count = 0; 
    if(isset($special)) { 
     foreach ($special as $row) { 
      print '<div class="select">'; 
       print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>"; 
      print '</div>'; 

       $background = $row['background_name']; 
       echo $background; 

     } 
    } 
    if(isset($generic)) { 
     foreach ($generic as $row) {  
      print '<div class="select">'; 
       print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>"; 
      print '</div>'; 
       $background = $row['background_name']; 
       echo $background; 

      } 

     } 

    if(isset($user_background)) { 
     foreach ($user_background as $row) { 
      print '<div class="select">'; 
       print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>"; 
      print '</div>'; 
       $background = $row['background_name']; 
       echo $background; 
      } 

     } 
?> 
</div> 
<script type="text/javascript"> 
$("a.background_btn").click(function(ev){ 
ev.preventDefault(); 
alert("hello"); 
var url = $(this).attr("href"); 
alert(url); 
$.ajax ({ 
    url : url, 
    type: "POST", 
    success : function (html) { 
     alert("<?php echo $background; ?>") 
     $('#wrapper').css('background', 'url(/media/uploads/backgrounds/<?php echo $background; ?>)'); 
    } 
}) 
}); 
</script> 
<div id="wrapper"> 

CONTROLLER :

public function set_background() { 
     $this->load->model('image_model'); 
     if($query = $this->image_model->get_background_by_id($this->uri->segments[3])) { 
      //die(var_dump($query)); 
      foreach ($query as $row) { 
       $data['background'] = $row['background_name']; 
      } 
     } 
     $this->load->view('template/background-select', $data); 
    } 

문제는 내가 단지 전나무에 배경을 설정할 수 있다는 것입니다 첫 번째 루프가 $ background to = red.png를 반환하면 예를 들어 st가 리턴 값을받습니다. 그런 다음 red.png를로드 할 수는 없습니다.

솔루션을 제안 할 수 있습니까?

Answer 1

AJAX를 사용하여 배경을로드하는 것처럼 보입니다. 그러나 초기 요청에서 $ background 값을 설정하면 AJAX 호출의 'success'메서드는 반환 된 HTML을 사용하지 않습니다. 페이지가 처음로드되었을 때 원래 설정된 배경 만. AJAX 호출이 배경을 반환하는지 확인해야합니다. 그러면 자바 스크립트에서 사용할 수 있습니다. PHP를 사용하여 '성공'방법으로 배경을 설정하지 마십시오.

또한 이것에 대해서는 확실하지 않지만 컨트롤러가 하나의 속성 $ data [ 'background']를 설정하여 배열이나 해시 맵을 만드는 대신 foreach의 모든 반복을 덮어 씁니다.

Answer 2

PHP와 JS를 별도로 유지해야한다고 생각합니다. 업로드 프로세스가 완료되면 업로드 된 이미지 페이지를 리디렉션 (또는 AJAX를 사용하여 동적으로 표시) 할 수 있습니다. 사용자가 업로드 된 이미지를 클릭하면 바로 배경은 아마도 다음과 같은 속성 변경 : 코드 예제는 것 정말 도움이

나는 배경 이미지를로드하는 AJAX를 사용하고 올바른

<div id="back"> 
    <img src="foo.jpg" alt="..." /> 
    <img src="bar.jpg" alt="..." /> 
    ... 
</div> 

$(function(){ 
    $("#back img").bind("click", function(e){ 
     var src = $(this).attr("src"); 
     $("#back").css({"background-image": "url(/images/" + src + ")"}); 
    }); 
});