2013-09-25 4 views
0

코드가 제출되는 방식에 따라 다른 콘텐츠로로드되는 로그인을 만들고 싶습니다. 이 같은 간단한 :새로운 내용으로 뒤집기

<button type="submit" value="BSend" class="l-button">code</button> 
<input type="text" name="bewerbung" class="l-input"> 

    Example: 
    CODE01 = GET CONTENT 01 
    CODE02 = GET CONTENT 02 
    CODE03 = GET CONTENT 03 
    CODE04 = GET CONTENT 04 

만들기 위해 내가 lib 디렉토리를 사용하려면 더 효과적에서 부하가 그것을 jQuery flip effect with Flippy을했다. 내 코드에서 작동하게하려면 flipbox-container 클래스의 컨테이너 만 있으면됩니다. 이 컨테이너에서는 플립 박스의 내용이 뒤집 힙니다.

나는 이미 내 웹 사이트의 다른 사이트와 그것을 밖으로 시도 :

$(document).on('submit', 'form.ajax', function (e) { 
     e.preventDefault(); 
     var that = $(this), 
     url = that.attr('action'), 
     type = that.attr('method'), 
     data = {}; 
     that.find('[name]').each(function (index, value) { 
     var that = $(this), 
      name = that.attr('name'), 
      value = that.val(); 
     data[name] = value 
     }); 
     $.ajax({ 
     url: url, 
     type: type, 
     data: data, 
     success: function() { 


      $(".flipbox").flippy({ 
       color_target: "", 
       duration: "500", 
       verso: "<article class=\"leftk\"><header><h3>Kontakt</h3></header><form action=\"submit.php\" method=\"post\" title=\"Kontaktformular\" class=\"ajax\"><label for=\"name\">Name</label><input name=\"name\" type=\"text\" title=\"Name\"><label for=\"email\">E-Mail-Adresse</label><input name=\"email\" type=\"text\" title=\"Email\"><label for=\"auswahl\">Präfix</label><label class=\"label\"> <select name=\"auswahl\" class=\"dropdown\"> <option selected value=\"Webdesign\">Anfrage Webdesign</option> <option value=\"Persoenliche\">Anfrage persönlich</option> <option value=\"Andere\">Alles andere</option> <option value=\"Spam\">Spam</option></select></label><textarea name=\"message\" title=\"Nachricht\"></textarea><button value=\"Send\" type=\"submit\" class=\"button\">Absenden</button></form></article><aside id=\"robot\"><ul class=\"social-icons clearfix\"> <li class=\"facebook\"><a href=\"#\">Facebook</a></li> <li class=\"google\"><a href=\"#\">Google</a></li> <li class=\"skype\"><a href=\"#\">Skype</a></li> <li class=\"twitter\"><a href=\"#\">Twitter</a></li> <li class=\"youtube\"><a href=\"#\">YouTube</a></li></ul></aside>", 
       onFinish: function() { 
        $("#no-color").css("background-color", "transparent"); 
       } 
      }); 
     } 
     }); 

을 그래서 당신은이 뒷면 꼬추에 작성해야하는 어떤 이유에 대한 새로운 내용을 볼 수 있습니다.

로그인 코드로 어떻게해야합니까? 나는 js 파일을 열 때 모든 사람이 내용을 볼 수 있기 때문에 새로운 내용을이 글에 쓰고 싶지 않습니다. 이 외에도 그것은 나에게 다소 지저분 해 보입니다.

답변

0

아약스 호출의 결과는 success 콜백에 전달됩니다

$.ajax({ 
    ... 
    success: function(htmlAnswer) { 
     $(".flipbox").flippy({ 
      ... 
      verso: htmlAnswer, 
      ... 
     }); 
    } 
}); 

이 (가) 요청을 제출 보낼 때 서버가 오른쪽에 표시되는 HTML을 반환하지?

그렇지 않으면, 당신은 ... 올바른 콘텐츠를 가져 체인 또 다른 아약스 전화를해야 할 수도 있습니다