Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Dodanie fragmentu kodu do strony po wykonanej akcji
Forum PHP.pl > Forum > Przedszkole
casperii
Witam, mam następujący kod:
KOD poniżej.

Chciałbym żeby po wykonanej akcji do istniejącego DIV doszedł kolejny fragment kodu:


Ale coś nie działa tak jakbym tego sobie życzył. Fragment JS jest w warunku, z góry mówię, że działa ten warunek i pokazuje mi alerta z poprawną wartością.

Oczywiście chcę wstawić fragment kodu DIVA education_table w DIV o class educationTab
Comandeer
parent zwraca rodzica danego elementu. Ja tam nie widzę, żeby jakiś formularz był w .educationTab
Comandeer
Ok… ale do czego odnosi się this w Twoim kodzie? Co to za element?
Comandeer
No to skoro $(this) to niby formularz (co jakoś średnio z tego kodu wynika… pokazałbyś całość, a nie bawisz się tak w kotka i myszkę), to $(this).parent('.educationTab') zakłada, że zachodzi zależność .educationTab > form. Tymczasem w kodzie jest wręcz odwrotnie - form > .educationTab
casperii
Cytat(Comandeer @ 20.05.2015, 21:29:56 ) *
No to skoro $(this) to niby formularz (co jakoś średnio z tego kodu wynika… pokazałbyś całość, a nie bawisz się tak w kotka i myszkę), to $(this).parent('.educationTab') zakłada, że zachodzi zależność .educationTab > form. Tymczasem w kodzie jest wręcz odwrotnie - form > .educationTab



  1. $(document).ready(function(){
  2. $('#UpdateEducation).submit(function(){
  3. var form = $(this),
  4. formData = form.serialize(),
  5. formUrl = form.attr('action'),
  6. formMethod = form.attr('method'),
  7. responseMsg = $('#info_upd_data');
  8. responseMsg.hide()
  9. .addClass('response-waiting')
  10. .text('proszę czekać...')
  11. .fadeIn(200);
  12.  
  13. $.ajax({
  14. type: "POST",
  15. url: "/ajax.php",
  16. data: formData,
  17. processData: false,
  18.  
  19. success: function(data){
  20. var responseData = jQuery.parseJSON(data),
  21. klass = '';
  22. switch(responseData.status){
  23. case 'error':
  24. klass = 'response-error';
  25. break;
  26. case 'success':
  27. klass = 'response-success';
  28.  
  29. if(form.attr('id') === 'UpdateEducation'){
  30. var nazwa_szkoly = $('input[name="nazwa_szkoly"]').val();
  31.  
  32. //tu działamy
  33. var that = $(this);
  34. that.hide(10, function () {
  35. that.prev().show();
  36. });
  37. that.parent().prev('.educationTab').append('<div>Nazwa szkoły:' + nazwa_szkoly + '</div>');
  38. //tu kończymy działanie
  39.  
  40. }
  41.  
  42. break;
  43. }
  44.  
  45.  
  46. responseMsg.fadeOut(200,function(){
  47. $(this).removeClass('response-waiting')
  48. .addClass(klass)
  49. .text(responseData.message)
  50. .fadeIn(200,function(){
  51. setTimeout(function(){
  52. responseMsg.fadeOut(200,function(){
  53. $(this).removeClass(klass);
  54. });
  55. },3000);
  56. });
  57. });
  58. console.log(data)//
  59. }
  60. });
  61. return false;
  62. });
  63. });
  64.  
  65.  
  66. <form id="UpdateEducation" action="/profil.html" method="POST">
  67. <input type="hidden" name="id_user" value="<?=$row['id_user'];?>">
  68. <div class="educationTab">
  69. <?php
  70. $sqlEducation = "SELECT * FROM `education` WHERE `id_user` = '$id_user' ORDER BY `school_to` DESC LIMIT 10";
  71. $resultEducation = mysql_query($sqlEducation);
  72. while( $row = mysql_fetch_array( $resultEducation ) ){
  73. $row['title'] = htmlspecialchars($row['title']);
  74. $list[ ] = $row;
  75.  
  76. ?>
  77. <div class="education_table">
  78. <div style="padding:15px;" class="cos">
  79. <div style="float:left; width:500px;"><?=$row['name_school'];?></div>
  80. <div style="float:left; width:90px;">1999 - 2001</div>
  81. <div style="float:left; width:30px; opacity:0.5;"><img src="/images/profile/ico_trash.png" alt="Usuń" onclick="$(this).delete_school(<?=$row['id'];?>); return false;"></div>
  82. </div>
  83. </div>
  84. <?php
  85. }
  86. ?>
  87. </div>
  88.  
  89. <div>
  90. <input type="text" name="nazwa_szkoly" value="">
  91. </div>
  92. </form>
Comandeer
Kod
var that = $(this);
                    that.hide(10, function () {
                        that.prev().show();
                    });
                    that.parent().prev('.educationTab').append('<div>Nazwa szkoły:' + nazwa_szkoly + '</div>');

A jak to zamienisz na:
Kod
form.find.('.educationTab').append('<div>Nazwa szkoły:' + nazwa_szkoly + '</div>');

To czy doda poprawnie?
casperii
Cytat(Comandeer @ 20.05.2015, 22:17:56 ) *
Kod
var that = $(this);
                    that.hide(10, function () {
                        that.prev().show();
                    });
                    that.parent().prev('.educationTab').append('<div>Nazwa szkoły:' + nazwa_szkoly + '</div>');

A jak to zamienisz na:
Kod
form.find.('.educationTab').append('<div>Nazwa szkoły:' + nazwa_szkoly + '</div>');

To czy doda poprawnie?


Kod
form.find.('.educationTab').append('<div>Nazwa szkoły:' + nazwa_szkoly + '</div>');


powinno być:
Kod
form.find('.educationTab').append('<div>Nazwa szkoły:' + nazwa_szkoly + '</div>');


Działa :-) Dziękuje.
A napisz mi jeszcze proszę, czy jest możliwość, żeby te dodane nazwy wyświetlić według dat? Piszę tu oczywiście o nie przeładowywaniu strony, bo jak przeładuje to wtedy wyświetlę sobie z pętli while, to wtedy mam ok.
Comandeer
Hm… Pewnie jakoś się da - ale nie sądzę, żeby to było jakoś super przyjemne (np. pobieranie każdego div z .educationTab i sprawdzanie jaką datę ma w środku). Chyba że już nie myślę i jest jakiś mega prosty sposób, którego nie dostrzegam w tej chwili wink.gif
casperii
Cytat(Comandeer @ 20.05.2015, 23:01:21 ) *
Hm… Pewnie jakoś się da - ale nie sądzę, żeby to było jakoś super przyjemne (np. pobieranie każdego div z .educationTab i sprawdzanie jaką datę ma w środku). Chyba że już nie myślę i jest jakiś mega prosty sposób, którego nie dostrzegam w tej chwili wink.gif



Kod
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var myArray = $(".education_table div div");

myArray.sort(function (a, b) {
    
    a = parseInt($(a).attr("datado"));
    b = parseInt($(b).attr("datado"));

    if(a < b) {
        return 1;
    } else if(a > b) {
        return -1;
    } else {
        return 0;
    }
});

$("#results").append(myArray);
});//]]>  

</script>


</head>
<body>

<div class="education_table">
    <div style="padding:15px;">
        <div style="float:left; width:45px;" datado="1998">1998</div>
    </div>
</div>

<div class="education_table">
    <div style="padding:15px;">
        <div style="float:left; width:45px;" datado="1995">1995</div>
    </div>
</div>

<div class="education_table">
    <div style="padding:15px;">
        <div style="float:left; width:45px;" datado="1999">1999</div>
    </div>
</div>

<div id="results"></div>


Znalazłem interesujące mnie rozwiązanie... Z tym, że do results wstawia mi tylko:
<div style="float:left; width:45px;" datado="1999">1999</div> Nie wstawia mi dwóch pozostałych divów nad tym divem.
Natomiast jak zrobię:

  1. var myArray = $(".education_table div div").parent().parent();

To wstawia w result tak jak być pownno tylko już nie sortuje według datado tylko tak jak by na sztywno sobie przekopiowało divy do ID result.
Comandeer
Zamiast jednego append rozbij to na pętlę i dodawaj po jednym rodzicu.
casperii
Cytat(Comandeer @ 21.05.2015, 16:00:18 ) *
Zamiast jednego append rozbij to na pętlę i dodawaj po jednym rodzicu.


Możesz mi wyjaśnić jak to zrobić , słaby jestem w JS.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.