So zeigen Sie eine Div bei Verwendung der Anzeige: keine

Ich habe eine <div> basierend auf einer Antwort von einer Ajax-Methode mit display: none versteckt. Was passiert, wenn ich bei einem anderen Aufruf der AJAX-Methode dieselbe <div> anzeigen möchte?So zeigen Sie eine Div bei Verwendung der Anzeige: keine

Ich wundere mich, wenn display: none tatsächlich das Element aus dem DOM entfernt, weil die Verwendung display: block die <div> nicht wieder sichtbar macht. Wie zeige und verstecke ich das gleiche div mit dem Attribut display. Hier ist der Code, den ich für den Ajax-Aufruf bin mit:

$.ajax({ 
    type: "POST", 
    url: "Request.aspx/FireEvents", 
    data: JSON.stringify({ controlValues: pageControlNamesAndValues }), 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (response) { 
    var controlVals = response.d; 
    $.each(controlVals, function (index, currentControl) { 
     var targetDropDown = document.getElementById(ctrlName); 
     console.log('Targetdropdown is ' + targetDropDown); 
     if (targetDropDown != null) { 
     if (targetDropDown instanceof HTMLDivElement) { 
      if (currentControl.ControlName == "LogicChecks") { 
      if (currentControl.ControlValue = "hidden") { 
       targetDropDown.style.display = 'none'; 
      } else { 
       targetDropDown.style.display = 'block'; 
      } 
      } 
     } 
     } 
    }); 
    } 
});

Die letzte Zeile (...style.display ='block';) nicht die <div> nicht zeigen, sobald es versteckt wurde.

Quelle

2017-07-17 Programmerzzz

Können Sie bestätigen, dass die Funktion 'success' aufgerufen wird? Können Sie bestätigen, dass das Element gefunden wurde?Sie können die JavaScript-Debugging-Konsole (in jedem gängigen Browser) verwenden, um Codezeilen zu testen und festzustellen, ob sie Auswirkungen auf das DOM haben. 'display: none' entfernt keine Elemente aus dem DOM. –

Verwenden Sie jQuery, jetzt haben Sie es. '$ (" # "+ ctrlName) .show()' oder '$ (" # "+ ctrlName) .hide()' vorausgesetzt, Sie haben ctrlName irgendwo (ich kann es nicht sehen) – mplungjan

Ja, Die Erfolgsmethode wird immer ausgeführt. Ja, das Element wird beim ersten Laden der Seite gefunden. aber dann basierend auf dieser Ajax-Antwort müssen wir einige divs verstecken und zeigen – Programmerzzz

Verwenden jQuery zu zeigen und sich zu verstecken:

$("#"+ ctrlName).show() 
$("#"+ ctrlName).hide()

Auch == verwenden für die Gleichstellung zu prüfen; = ist Zuordnung Diese Aussage nicht für versteckte testet aber

if(currentControl.ControlValue="hidden")

Schließlich

var targetDropDown = document.getElementById(ctrlName); 
if (targetDropDown == null) { targetDropDown = 
    document.getElementById(ctrlName); }

logischen Sinn macht nicht

Vielleicht ist dies, was Sie meinen

function ProcessEventsActions(pageControlNamesAndValues) { 
    $.ajax({ 
     type: "POST", 
     url: "Request.aspx/FireEvents", 
     data: JSON.stringify({ 
     controlValues: pageControlNamesAndValues 
     }), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(response) { 
     var controlVals = response.d; 
     $.each(controlVals, function(index, currentControl) { 
      if (currentControl.ControlName == "LogicChecks") { 
      targetDropDown = $("#" + currentControl.controlDiv); // or whatever the name is 
      targetDropdown.toggle(currentControl.ControlValue != "hidden"); // show if not hidden 
      } 
     }); 
     }); 
    }); 
}

versteckt Zuweisens

Quelle

2017-07-17 18:12:57 mplungjan

Hier ist ein Beispiel dafür. Stellen Sie sicher, dass Sie korrekt auf das Element zugreifen.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myDIV { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: lightblue; 
 
    display:none; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Click the "Try it" button to set the display property of the DIV element to "block":</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<div id="myDIV"> 
 
This is my DIV element. 
 
</div> 
 

 
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> 
 

 
<script> 
 
function myFunction() { 
 
    document.getElementById("myDIV").style.display = "block"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

Quelle

2017-07-17 18:06:44 Matt

Ist das eine Antwort auf die obige Frage überhaupt? – mplungjan

Das zeigt eigentlich das div. aber ich muss es zurückbekommen, sobald es auch versteckt ist – Programmerzzz

Wie in den Kommentaren diskutiert und in Matts Antwort demonstriert, ist das Verfahren zum Ein-/Ausblenden Elemente korrekt, das heißt

element.style.display = "block";

benimmt sich, als man erwarten würde, auch nachdem sie durch die Anwendung display: none versteckt wurde. Hier ist ein Beispiel mit jQuery statt (da dieser ist eine jQuery Frage):

$("#click1").click(function() { $("#el").hide(); }); 
 
$("#click2").click(function() { $("#el").show(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="el">Visible</div> 
 
<button id="click1">Click to hide</button> 
 
<button id="click2">Click to show</button>

Das Problem ist auf jeden Fall mit dem Rest des Codes. Eine wahrscheinliche Verdächtige ist diese Zeile:

if (currentControl.ControlValue = "hidden") {

Wenn Sie tatsächlich Ihr Code direkt kopiert, und das ist kein Tippfehler, wird dieser Zustand immer true/a truthy Wert bewerten! Und das würde die Probleme verursachen, die Sie beschreiben, da der Code das Element immer verbergen würde, es nie wieder zeigen würde. Um das Problem zu beheben, ersetzen Sie die Zeile einfach mit:

if (currentControl.ControlValue == "hidden") {

Quelle

2017-07-17 18:18:08

OP hat es schwer, jQuery in seinem eigenen Code zu verstehen. Und er benutzt jQuery also .show, hide, toggle ist meiner Meinung nach nützlicher als ES6, die nicht einmal ohne Babel kompatibel ist. – mplungjan

@mplungjan Die Demo ist nur für demonstrative Zwecke gedacht, aber ja, ich werde sie wahrscheinlich in jQuery umwandeln Verwechslung. –

Ich habe bereits geschrieben, wie es in jQuery :) – mplungjan

So zeigen Sie eine Div bei Verwendung der Anzeige: keine

Antwort

Verwandte Themen