Toggle Divs arbeiten im Web, aber nicht in CRM 2013

Ich arbeite mit Microsoft Dynamics CRM 2013 und versuche, einen Daten-Toggle-Block zu erstellen, der die Werte entsprechend der ausgewählten Kategorie umschaltet. Die Liste hat 7 Divs und sollte nur das ausgewählte div anzeigen (d. H. Div 3), wobei nicht alle anderen div angezeigt werden. Das HTML funktioniert wie ein Zauber in einem Browser, aber nicht in CRM, was bedeutet, dass keine der Kategorien umgeschaltet wird, wenn js, css und html zu CRM 2013 mit einer Web-Ressource hinzugefügt werden. Ich bin kein Entwickler, sondern muss herausfinden, wie es geht. Jede Hilfe wird sehr geschätzt !! Dies ist die gesamte HTML-WebResource in CRM eingegeben Dies wurde in JSfiddle erstellt, aber ich habe massive Probleme.jsfiddle Toggle Divs arbeiten im Web, aber nicht in CRM 2013

<!DOCTYPE html> 
<html><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <style> 
     div:not(#div0) { 
    display: none; 
} 
    </style> 
    <script src="js_files/snippet-javascript-console.js"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; } 
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; } 
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; } 
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; } 
.as-console-row + .as-console-row > * { border: 1px solid #ccc; } 
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; } 
.as-console-error:before { content: 'Error: '; color: #f00; } 
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; } 
.as-console-info:before { content: 'Info: '; color: #00f; } 
.as-console-warning:before { content: 'Warning: '; color: #e90 } 
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style> 
    </head> 
<body> 
    <script src="js_files/jquery.js"></script> 
<a href="#" data-toggle="#div1">div1</a><br> 
    <div id="div1">div1 information</div> 
    <a href="#" data-toggle="#div2">div2</a> 
    <br> 
    <div id="div2">div2 information?</div> 
    <a href="#" data-toggle="#div3">div3</a> 
    <br> 
    <div id="div3">div3 information</div> 
    <a href="#" data-toggle="#div4">div4</a> 
    <br> 
    <div id="div4">div4</div> 
    <a href="#" data-toggle="#div5">div5</a> 
    <br> 
    <div id="div5">div5 information</div> 
    <a href="#" data-toggle="#div6">div6</a> 
    <br> 
    <div id="div6">div6 information</div> 
    <a href="#" data-toggle="#div7">div7</a><br> 
    <div id="div7">div7 information</div> 
    <script type="text/javascript"> 
     $("a[data-toggle]").on("click", function(e) { 
    e.preventDefault(); // prevent navigating 
    var selector = $(this).data("toggle"); // get corresponding element 
    $("div").hide(); 
    $(selector).show(); 
}); 
    </script> 

<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>

Dies ist der Schnipsel aus Stackoverflow.

$("a[data-toggle]").on("click", function(e) { 
 
    e.preventDefault(); // prevent navigating 
 
    var selector = $(this).data("toggle"); // get corresponding element 
 
    $("div").hide(); 
 
    $(selector).show(); 
 
});

div:not(#div0) { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-toggle="#div1">div1</a><br> 
 
    <div id="div1">div1 information</div> 
 
    <a href="#" data-toggle="#div2">div2</a> 
 
    <br> 
 
    <div id="div2">div2 information?</div> 
 
    <a href="#" data-toggle="#div3">div3</a> 
 
    <br> 
 
    <div id="div3">div3 information</div> 
 
    <a href="#" data-toggle="#div4">div4</a> 
 
    <br> 
 
    <div id="div4">div4</div> 
 
    <a href="#" data-toggle="#div5">div5</a> 
 
    <br> 
 
    <div id="div5">div5 information</div> 
 
    <a href="#" data-toggle="#div6">div6</a> 
 
    <br> 
 
    <div id="div6">div6 information</div> 
 
    <a href="#" data-toggle="#div7">div7</a><br> 
 
    <div id="div7">div7 information</div>

Vielen Dank !!!

Quelle

2017-01-14 Deana Jacobus

Wenn Ihr jQuery .toggle()/.show()/.hide() Methoden in Microsoft Dynamics CRM 2013 nicht berufstätig sind, können Sie die div-Tags mit CSS allein wechseln.

Arbeitsbeispiel:

a { 
 
display: block; 
 
line-height: 36px; 
 
cursor: pointer; 
 
} 
 

 
a + div { 
 
display: none; 
 
margin: -48px 0 12px; 
 
padding-top: 48px; 
 
} 
 

 
div:target { 
 
display: block; 
 
}

<a href="#div1">div1</a> 
 
<div id="div1">div1 information</div> 
 

 
<a href="#div2">div2</a> 
 
<div id="div2">div2 information</div> 
 

 
<a href="#div3">div3</a> 
 
<div id="div3">div3 information</div> 
 

 
<a href="#div4">div4</a> 
 
<div id="div4">div4 information</div> 
 

 
<a href="#div5">div5</a> 
 
<div id="div5">div5 information</div> 
 

 
<a href="#div6">div6</a> 
 
<div id="div6">div6 information</div> 
 

 
<a href="#div7">div7</a> 
 
<div id="div7">div7 information</div>

Quelle

2017-01-14 23:00:10 Rounin

Sie, Sir, sind ein Genie !!! Es hat endlich funktioniert! Vielen Dank. Ich wünschte, ich könnte über Ihre ausgezeichnete und sehr schnelle Antwort abstimmen und mich auf mein Dilemma einstellen, aber ich bin leider immer noch ein Neuling. Ich frage mich nur, woher weißt du, dass du keine Jquery benutzen musstest? –

Eines der Probleme, das jQuery zu lösen suchte, als John Resig es erstmals im Januar 2006 veröffentlichte, war es, alltägliche Effekte und Animationen browserübergreifend ohne Hacks und Fixes zu ermöglichen. Aber wir haben in 11 Jahren einen langen, langen Weg hinter uns ... die Idee, dass alle Browser universell interoperable Standards (anstatt proprietärer Innovationen) propagieren sollten, hat sich durchgesetzt, Javascript hat sich entwickelt und entwickelt (basierend auf nicht wenigen Inspirationen von jQuery) und ... CSS hat sich auch wesentlich weiterentwickelt. Effekte und Animationen, die 2007 über jQuery bereitgestellt wurden, werden nun routinemäßig in CSS geschrieben. – Rounin

Hier ist eine Website, die Sie nützlich finden können, während Sie weiter lernen: http://www.youmightnotneedjquery.com/ Die Schlüsselidee hinter der Website ist, dass einfaches JavaScript und Internet Explorer so viel entwickelt haben, dass .js-Code jQuery massiv vereinfacht (als es zuerst eingeführt wurde) kann genauso einfach sein, im Jahr 2017 in einfachen Javascript zu schreiben. – Rounin

Toggle Divs arbeiten im Web, aber nicht in CRM 2013

Antwort

Verwandte Themen