Positionselemente dynamisch positionieren basierend auf Ajax

Ich versuche, den Speicherort des Elements der scrollfähigen Liste zu ändern, je nachdem, ob eine Nachricht von einem Benutzer oder einer anderen Partei gesendet wurde. Was ich habe, wird jedoch nicht funktionieren.Positionselemente dynamisch positionieren basierend auf Ajax

Ich habe versucht, .css ('Position', 'rechts') und setzen in Position = "rechts", wenn das div aufgerufen wird.

Was ich so weit gekommen ist, diese so weit wie meine Ajax angeht:

success: function(data) 
    { 
     var messages = data['serverResponse']; 
     //alert(JSON.stringify(threads)); 
     $.each(messages, function(name, value) { 

      if(value.user === "1") 
      { 
       $(".message").append("<div class='" + name + "'>" + value.name + "</div>").css(".sentMes"); 
       $(".message").append("<div class='" + name + "'>" + value.message + "</div>"); 
       $(".message").append("<div class='" + name + "'>" + value.date + "</div>"); 
      } else 
      { 
       $(".message").append("<div class='" + name + "'>" + value.name + "</div>"); 
       $(".message").append("<div class='" + name + "'>" + value.message + "</div>"); 
       $(".message").append("<div class='" + name + "'>" + value.date + "</div>"); 
      } 
    });

Und für die html:

<title>AMessage</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="JavaScript/ThreadsandMessages.js">  </script> 
    <link rel="stylesheet" type="text/css" href="AMessage.css"> 

</head> 
<body> 
    <header>header area</header> 
<nav> 
    <ul role="list"> 
     <li class="thread" role="listitem"></li> 
    </ul> 
    </nav> 

    <nav> 
    <ul role="list"> 
     <li class="message" role="listitem"></li> 
    </ul> 
    </nav> 
</body> 
</html>

Quelle

2016-04-17 Michael Gulik

"rechts" ist kein gültiger Wert für „Position ". Eine Liste der gültigen Werte finden Sie unter here.

Da Sie $(".message").append("..."); verwenden, werden alle Ihre Nachrichtenobjekte zum einzelnen Listenelement hinzugefügt, das Sie mit der Klasse "message" haben. Wenn Sie mehrere Listenelemente mit der Klasse "Nachricht" haben, würden Sie doppelte Ergebnisse erhalten. Ich nehme an, dass Sie beabsichtigen, für jede Nachricht ein neues Listenelement zu erstellen, damit ich das entsprechende Code-Snippet entsprechend geschrieben habe.

Sie möchten die Eigenschaft float verwenden, die das Element nach rechts oder links vom übergeordneten Element verschiebt. In diesem Fall müssen Sie es mit der clear Eigenschaft kombinieren oder die Elemente werden in derselben Zeile angezeigt.

Wenn Sie eine Klasse zu einem Element hinzufügen möchten, sollten Sie statt .css().addClass() verwenden oder andere Klassen überschreiben.

var messages = [{ 
 
    user: "1", 
 
    name: "John", 
 
    message: "Hi there", 
 
    date: "01/01/2016" 
 
}, { 
 
    user: "2", 
 
    name: "Tim", 
 
    message: "Hey what's going on?", 
 
    date: "01/01/2016" 
 
}, { 
 
    user: "1", 
 
    name: "John", 
 
    message: "Not much", 
 
    date: "01/01/2016" 
 
}]; 
 

 
$.each(messages, function(name, value) { 
 
    var message = 
 
    "<li class='message' role='listitem'>" + 
 
     "<div>" + value.name + "</div>" + 
 
     "<div>" + value.message + "</div>" + 
 
     "<div>" + value.date + "</div>" + 
 
    "</li>"; 
 

 
    $("#messages").append($(message).addClass(value.user === "1" ? "sentMes" : "")); 
 
});

#messages { 
 
    list-style: none; 
 
} 
 

 
.message { 
 
    float: right; 
 
    clear: both; 
 
    background-color: #BEBCBC; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
} 
 

 
.message.sentMes { 
 
    float: left; 
 
    background-color: cornflowerblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<header>header area</header> 
 
<nav> 
 
    <ul role="list"> 
 
    <li class="thread" role="listitem"></li> 
 
    </ul> 
 
</nav> 
 

 
<nav> 
 
    <ul role="list" id="messages"> 
 
    </ul> 
 
</nav>

Quelle

2016-04-17 23:39:22 Jaydo

Perfect. Vielen herzlichen Dank! –

Positionselemente dynamisch positionieren basierend auf Ajax

Antwort

Verwandte Themen