Probleme mit ADMIN theme INSPINIA

kaiwe · 19 Sep. 2016

Hallo,

ich habe mir ein bootstrap admin template ( INSPINIA ) besorgt, welches auf jquery / Javascript basiert.

Nun habe ich mittels einem jquery Aufruf versucht, die statische Seite mittels PHP Script mit dynamischen Inhalten zu füllen,
was prinzipiel auch funktioniert.

Allerdings gelingt es mir leider nicht, auf diese Weise eine Liniengrafik einzubinden, es wird nur die leere Hülle der Grafik angezeigt.

Trotz tagelanger Suche im Internet komme ich nicht weiter.

SCRIPT 1 ( Diese Seite wird von dem System ( themplate ) aufgerufen )

[src=html4strict]

<script type="text/javascript">

</script>

<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-9">
<h2>Products</h2>
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
AMOZ Reporting
</li>
<li class="active">
<strong>list products</strong>
</li>
</ol>
</div>
</div>

<div class="wrapper wrapper-content" >

<div class="list-item">
<div class="row">
<div class="col-md-5"><B>Produkt</B></div>
<div class="col-md-2">Preis</div>
<div class="col-md-2">Preis</div>
<div class="col-md-2">Preis</div>
<div class="col-md-1">Preis</div>
</div>
</div>

<div class="wrapper wrapper-content" id="content" ng-controller="chartJsCtrl as chart">

// hier stehen dann die Ergebnisse des PHP Scripts drinnen

</div>

</div>

[/src]

SCRIPT 2 ( Diese Seite holt die Inhalte aus einer DB und wird vom Script 1 per jquery eingebunden )

[src=php]

<script>

$(document).ready(function(){
var x = 1;
while (x < 100) {
$('#details'+x).hide();
x = x + 1;
}
});

function inout(id) {
$('#details'+id).toggle('slow');
}

</script>

<?php
include ("/srv/www/vhosts/portal/config.inc.php");
include ("/srv/www/vhosts/portal/DB/InitDB.php");

$count = 0;
$counter = 0;

// Abfrage der Artikelparameter
$sql = "SELECT *
FROM AMAZONALYSE.article
WHERE active = 'Y' AND comment = 'Dummy'
ORDER BY publisher
;
";

$result = mysql_query($sql);
$count = mysql_numrows(sql);
echo mysql_error();
//echo $sql;

while ($row = mysql_fetch_array($result))
{

$dst_img = 'http://portal.XXXXXXX.ads/apps/AMAZONALYSE/pic/ItemQsmal_'.$row['ASIN'].'.jpg';
$counter++;
?>

<div class="list-item" >
<div class="row">
<div class="col-md-5">
<div class="profile-image">
<img src="<?php echo $dst_img ?>" class="img-circle circle-border" alt="profile">
</div>

<a href="#" class="list-title">
<?php echo $row['title'] ?>
</a>

<div class="list-info">
<div class="tooltip-demo">
<a href="https://www.amazon.de/gp/product/<?php echo $row['ASIN'] ?>" target="_blank" tooltip-placement="top" uib-tooltip="Produkt bei AMAZON aufrufen" ><i class="fa fa-external-link"></i></a>
<a href="#" tooltip-placement="top" uib-tooltip="Produkt ansehen" ><i class="fa fa-eye"></i></a>
<a href="#" tooltip-placement="top" uib-tooltip="Produkt editieren" ><i class="fa fa-pencil"></i></a>
<a href="#" tooltip-placement="top" uib-tooltip="AMAZON Link" ><i class="fa fa-anchor"></i></a>
| <?php echo $row['publisher'] ?>
</div>
</div>
</div>
<div class="col-md-2">
<div class=" m-l-md">
<span class="h4 font-bold m-t block">EUR <?php echo $row['price'] ?></span>
<small class="text-muted m-b block">EUR <?php echo $row['price']-2,28 ?> | EUR 2,28</small>
</div>
</div>
<div class="col-md-2">
<div class=" m-l-md">
<span class="h4 font-bold m-t block">3</span>
<small class="text-muted m-b block">EUR 20,97 | EUR 17,28</small>
</div>
</div>
<div class="col-md-2">
<div class=" m-l-md">
<span class="h4 font-bold m-t block">614</span>
<small class="text-muted m-b block">EUR 2.128,56 | EUR 1.947,64</small>
</div>
</div>
<div class="col-md-1">
<div class="list-icon">
<i id="details-inout<?php echo $counter ?>" class="fa fa-area-chart" onclick=inout(<?php echo $counter ?>) ></i>
<i class="fa fa-calculator"> </i>
<i class="fa fa-wifi"> </i>
</div>
</div>
</div>
</div>

<div id="details<?php echo $counter ?>" >

<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Umsätze 12.09.2016 - 19.09.2016
<small></small>
</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div>
<canvas linechart options="chart.lineOptions" data="chart.lineData" height="140" responsive=true ></canvas>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Umsätze 12.09.2016 - 19.09.2016
<small></small>
</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div>
<canvas linechart options="chart.lineOptions" data="chart.lineData" height="140" responsive=true ></canvas>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Umsätze 12.09.2016 - 19.09.2016
<small></small>
</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div>
<canvas linechart options="chart.lineOptions" data="chart.lineData" height="140" responsive=true ></canvas>
</div>
</div>
</div>
</div>
</div>

</div>

<?php

}

?>

[/src]

Ich bin leider nicht tief genug im Javascript Thema drinnen, daher mache ich scheinbar etwas falsch.

Kann mir bitte jemand weiterhelfen.

Vielen Dank schon mal.

virtus · 22 Sep. 2016

In den meisten Fällen, wenn Anfänger mit JavaScript und PHP experimentieren, liegt das Problem darin begraben, dass die Leute nicht wissen, wann welche Scripte ausgeführt werden. PHP wird stets auf dem Server, JavaScript stehts erst beim Client ausgeführt, egal an welcher Stelle im Quellcode es steht.

mysql sollte nicht mehr verwendet werden. mysql ist schon seit Jahren als veraltet gekennzeichnet und wird in aktuellen PHP Versionen glücklicher Weise auch gar nicht mehr unterstützt. Bitte schreibe dein PHP-Script um und verwende künftig mysqli. Wenn du sowieso schon umsteigst, dann kannst du auch gleich auf Prepared Statements umsteigen und dir einen objektorientierten Programmierstil angewöhnen.

Versuche PHP, JavaScript, HTML und CSS zu trennen. HTML hat nichts in Mitten von PHP zu suchen und umgekehrt.
Die Datenbank kannst du zum Beispiel weiterhin mit PHP ansteuern. Dein PHP Script kann die Daten dann im JSON-Format zur Verfügung stellen echo json_encode($stuff); und mit jQuery kannst du die Ergebnisse auswerten. JSON ist einfach zu lesen, man kann gut debuggen und es wird in nahezu allen Programmiersprachen von Haus aus oder zumindest mit Bibliotheken unterstützt! Außerdem erzeugt JSON im Vergleich zu beispielsweise xml nahezu keinen Overhead.

PHP und HTML zu vermischen ist eine ganz nette Eigenschaft für schnelles Prototyping, wenn der Entwickler tatsächlich sicher mit PHP umgehen kann. Leider wird der Code dabei sehr unübersichtlich und Modifikationen erfordern einen äußerst hohen Aufwand. Daher ist eine saubere Trennung empfehlenswert.

saddy · 24 Sep. 2016

Ui paid und dann gleich noch ein Framework (Angular) dabei?
Hätte dir z.b. AdminLTE nicht ausgreicht? Das hat die MIT license und kann damit sogar gewerblich 4free benutzt werden.
Und sieht optisch zumindest auf den ersten Blick fast gleich aus :unknown:

https://almsaeedstudio.com/preview
Würde evtl etwas unnötige Komplexität rausnehmen.

Um deinen Quelltext Lesen und Verstehen zu können ist es bei mir schon zu spät heute,
ist nicht so ganz mein Thema aber mit rummachen musste ich auch schonmal. Aber mit lang nicht mit so viel Freude an der Sache wie ich das als Admin hab und dementsprechend kompetent bin ich da. Nicht.
Aber da findet sich hier bestimmt noch jmd.
Hab bei meinem damaligen Projekt, was eine Übernahme war, Smarty als Template Engine nutzen dürfen/müssen, da war das Design angenehm vom PHP Code getrennt.
Wobei es da auch Stimmen gibt, die meinen dass Smarty Mist und unnötig ist weil PHP ja schon alles von Haus aus könne.
Da wär ich auch gespannt auf Meinungen, interessiert mich zwar schon aber irgendwie nicht so doll als das ich dem selbst auf den Grund gehen würde.

kaiwe · 24 Sep. 2016

Hallo virtus,

danke für Deine Antwort.

Ich bin natürlich ganz grundsätzlich bei Dir, HTML, JavaScript, CSS usw. strikt voneinander zu trennen.

Also hol ich die Daten ( Anzahl der Ergebnisse sowie die jeweiligen Einzelwerte ) mit JSON über ein PHP Scipt.

Nur wie soll ich innerhalb eines HTML Bereichs dann einen DIV Container mit unterschiedlicher ID n-mal
aufrufen und mit diesen Werten füllen, ohne doch wieder HTML mit JavaScript zu mischen.

Der folgende DIV Container müsste entsprechend der Anzahl der Ergebnisse dann n-mal aufgrufen werden,
wobei jeweils dynamische Daten eingebracht werden müssen.

Oder anders gefragt: Wie mache ich eine Schleife in html und übergebe innerhalb der Schleife dann Werte ?

Kannst Du mir hier bitte sagen wie das geht.

Oder baue ich eine Funktion in JavaScript, welche den Container einmal aufbaut und mit den entsprechenden
Parametern versieht und rufe selbige dann n-mal auf ?

Wie würde eine solche Funktion in jquery aussehen, welche HTML Daten mit Parameter ausgeben kann.

Vielen Dank schon mal !

[src=html4strict]
<div class="list-item" >
<div class="row">
<div class="col-md-5">
<div class="profile-image">
<img src="<?php echo $dst_img ?>" class="img-circle circle-border" alt="profile">
</div>

<a href="#" class="list-title">
<?php echo $row['title'] ?>
</a>

<div class="list-info">
<div class="tooltip-demo">
<a href="https://www.amazon.de/gp/product/<?php echo $row['ASIN'] ?>" target="_blank" tooltip-placement="top" uib-tooltip="Produkt bei AMAZON aufrufen" ><i class="fa fa-external-link"></i></a>
<a href="#" tooltip-placement="top" uib-tooltip="Produkt ansehen" ><i class="fa fa-eye"></i></a>
<a href="#" tooltip-placement="top" uib-tooltip="Produkt editieren" ><i class="fa fa-pencil"></i></a>
<a href="#" tooltip-placement="top" uib-tooltip="AMAZON Link" ><i class="fa fa-anchor"></i></a>
| <?php echo $row['publisher'] ?>
</div>
</div>
</div>
<div class="col-md-2">
<div class=" m-l-md">
<span class="h4 font-bold m-t block">EUR <?php echo $row['price'] ?></span>
<small class="text-muted m-b block">EUR <?php echo $row['price']-2,28 ?> | EUR 2,28</small>
</div>
</div>
<div class="col-md-2">
<div class=" m-l-md">
<span class="h4 font-bold m-t block">3</span>
<small class="text-muted m-b block">EUR 20,97 | EUR 17,28</small>
</div>
</div>
<div class="col-md-2">
<div class=" m-l-md">
<span class="h4 font-bold m-t block">614</span>
<small class="text-muted m-b block">EUR 2.128,56 | EUR 1.947,64</small>
</div>
</div>
<div class="col-md-1">
<div class="list-icon">
<i id="details-inout<?php echo $counter ?>" class="fa fa-area-chart" onclick=inout(<?php echo $counter ?>) ></i>
<i class="fa fa-calculator"> </i>
<i class="fa fa-wifi"> </i>
</div>
</div>
</div>
</div>

<div id="details<?php echo $counter ?>" >

<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Umsätze 12.09.2016 - 19.09.2016
<small></small>
</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div>
<canvas linechart options="chart.lineOptions" data="chart.lineData" height="140" responsive=true ></canvas>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Umsätze 12.09.2016 - 19.09.2016
<small></small>
</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div>
<canvas linechart options="chart.lineOptions" data="chart.lineData" height="140" responsive=true ></canvas>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Umsätze 12.09.2016 - 19.09.2016
<small></small>
</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div>
<canvas linechart options="chart.lineOptions" data="chart.lineData" height="140" responsive=true ></canvas>
</div>
</div>
</div>
</div>
</div>

</div>
[/src]

sia · 2 Okt. 2016

HTML mit JS mischen ist doch vollkommen okay.

Lange nichts mit JS gemacht, aber sollte add() das nicht abdecken?

Hier noch weitere Infos zu append() und Co.: https://api.jquery.com/category/manipulation/dom-insertion-inside/

dexter · 2 Okt. 2016

phre4k schrieb:
HTML mit JS mischen ist doch vollkommen okay.

Nein.

sia · 2 Okt. 2016

Also klar, man sollte es in externe JS-Dateien auslagern, aber man kann HTML mit JS verwenden. Ist ja auch so gewollt, oder?

dexter · 2 Okt. 2016

Mal willkürlich aus dem oberen Code:

Code:

<[URL="http://december.com/html/4/element/a.html"]a[/URL] href="#" class="list-title">

zeigt, dass es eben nicht vollkommen ok ist.
Hab ich kein JS, behalte ich mein Geld oder schaffe es zu Amazon.

Probleme mit ADMIN theme INSPINIA

kaiwe

Neu angemeldet

virtus

Gehasst

saddy

Bekannter NGBler

kaiwe

Neu angemeldet

sia

gesperrt

dexter

Cloogshicer®

sia

gesperrt

dexter

Cloogshicer®