Ändern Sie den angezeigten Text auf der gleichen Seite eines Elements nach einer Aktion

-3

Ich habe nach dieser Antwort gesucht und es scheint, dass es einfach sein sollte, basierend auf DOM.
Was ich tun möchte, ist eine <td id="cte"> oder <input id="cte"> auf einer Seite anzeigen und nach einer Aktion (d. H. Schaltfläche klicken oder ORchange) die getElementById('cte').value="somenewvalue" ändert das oben genannte Element auf der gleichen Seite.Ändern Sie den angezeigten Text auf der gleichen Seite eines Elements nach einer Aktion

Die Technologie (d. H. Javascript, AJAX, DOM) sagt, dass dies machbar ist, aber ich habe diese Frage gefragt zahlreiche Möglichkeiten, wo die gelieferten Antworten scheinen nie zu funktionieren oder die Frage zu erfüllen.

Also meine eigentliche Frage ist: Wie ändere ich den 'angezeigten' element.value auf der gleichen Seite, ohne die gleiche Seite neu zu laden?

Quelle

2017-04-20 MikeT

Zeigen Sie uns, was Sie mit einem snipet versuchen. [MCVE] –

Denkst du, Elemente bestehen aus mehreren Werten/Texten? (Wie eine Tabelle)

// emty das Element zunächst wirklich, wenn das Element mehrere Werte

var forempty = document.getElementById("cte"); 

while(forempty.firstChild){ 
     forempty.removeChild(forempty.firstChild); 
    } 
document.getElementById("cte").value = something; 
//or 
document.getElementById("cte").textContent = something;

besteht

Quelle

2017-04-20 13:47:09 Andras

Sie beantwortet Ihre eigene Frage zumindest in einer Art und Weise: "Die Technologie (dh Javascript, AJAX, DOM) sagt, dass dies machbar ist. Und sicher genug, mit AJAX, es nur eine Frage ist, den DOM-Knoten mit den Daten (Response) von Ajax-Request ....

Hier ist ein sehr einfach zu ersetzen Beispiel: Wir holen eine HTML-Zeichenfolge mit AJAX vom Server an D Dieser Inhalt verwenden, um die ehemaligen Inhalt eines DIV zu ersetzen, die die HTML-< strong>Hello< /strong>

Der erste Teil dieser Demo enthält, ist unser HTML oder PHP-Dokument unserer ersten Markup und diese Datei enthält, würden wir index.html or index.php nennen

INHALT OF index.php | index.html

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Mini AJAX Demo</title> 
    </head> 
    <body> 
    <div class="swappable-content" id="swappable-content"> 
     <strong>Hello!!!</strong> 
    </div> 
    <div class="other-dom-elements"> 
     <Button id="action-trigger" data-ajax-url="/ajax.php">Click Me</Button> 
    </div> 
    <!-- ADD JQUERY LIBRARY & SETUP THE AJAX REQUEST CALLS --> 
    <!-- HERE WE ARE LOADING JQUERY FROM THE CDN.... CHANGE THE src ATTRIBUTE IF YOU HAVE A LOCAL COPY --> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     (function($){ 
      $(document).ready(function(e){ 
       var actionTrigger = $("#action-trigger"); 

       actionTrigger.on("click", function(e){ 
        $.ajax({ 
         url   : $(this).attr('data-ajax-url'), 
         type  : "POST", 
         dataType : "JSON", 
         data  : { 
          // HERE YOU CAN ADD KEY VALUE PAIRS 
          // WHICH WILL BE SENT TO AND PROCESSED BY THE SERVER 
         }, 
         success  : successHandler, 
         error  : errorHandler, 
         complete : completeHandler 

        }); 
       }); 

       function successHandler(data, textStatus, jqXHR){ 
        // IF THERE IS A RESPONSE PAYLOAD FROM THE SERVER 
        // WE JUST REPLACE THE CONTENTS OF THE #swappable-content DIV WITH THE DATA 
        if(data){ 
         if(data.html){ 
          $("#swappable-content").html(data.html); 
         } 
        } 
       } 

       function errorHandler(jqXHR, textStatus, errorThrown){ 
        console.log('The following error occured: ' + textStatus, errorThrown); 
       } 

       function completeHandler(jqXHR, textStatus){ 

       } 
      }); 
     })(jQuery); 
    </script> 
    </body> 

    </html>

INHALT SCRIPT AJAX VERARBEITUNG: ajax.php

<?php 

    // YOU CAN DO PRETTY MUCH ANYTHING WITHIN THIS FILE 
    // HOWEVER FOR THE PURPOSES OF THIS DEMO, 
    // WE WOULD JUST RETURN SOME HTML STRING BUNDLED IN AN ARRAY AND SENT AS JSON DATA 
    $response = array(
     'html' => "<div style='font-weight:900;color:#F00;'>This is the Response Data from Server!</div>", 
    ); 

    die(json_encode($response));

Quelle

2017-04-20 14:10:48 Poiz

Ändern Sie den angezeigten Text auf der gleichen Seite eines Elements nach einer Aktion

Antwort

Verwandte Themen