Ajax refresh in 'ul' en 'li' ? - Softwareontwikkeling

zondag 7 september 2014 22:10

Acties:

Topicstarter

Hoi,

Ik heb dit stukje webpagina:

HTML:

<body>
        <h2>Sensors</h2>
        <ul class="devices">            
            <li>
                <span>Sensor 1</span>
                <div class="sensors"></div>
                <p>
                    <strong>99 %</strong>
                </p>
                <p>
                    Min: 99 %<br/>
                    Max: 99 %
                </p>
            </li>
        </ul>
    </body>

Nu zou ik graag op #8 op de plek van '99' wat gegevens mbv. Ajax jQuery willen verversen elke xx seconden.

Op een andere pagina (zonder 'ul' en 'li' doe ik dat met:

HTML:

1	<div id="sensor1">Data wordt opgehaald, even geduld...</div>

Dat werkt goed. De inhoud van de div 'sensor1' wordt dan netjes door een stukje jQuery bijgewerkt.

Maar in bovenstaande pagina werkt dat niet mooi, de hele layout klopt niet meer. Ik vermoed dat omdat het een div is, er wordt geprobeerd om er opmaakregels op toe te passen. Maar dat hoeft van mij helemaal niet, ik wil gewoon elke xx seconden een nieuwe waarde daar neerzetten. De opmaak regel ik verder wel met die ul en li tags.

[ Voor 37% gewijzigd door ThinkPad op 07-09-2014 22:14 ]

zondag 7 september 2014 22:58

Acties:

rickh18

Het is een beetje lastig om een goed antwoord te geven aangezien de css file en het Jquery script er niet bij zitten.
hoe verwerk je de div in de code? plaats je deze om de strong tags heen? Wat als je deze er binnen plaats? In dat geval zou de opmaak niet moeten veranderen, tenzij in de css file de opmaak met het id van deze div wordt gewijzigd.

maandag 8 september 2014 00:43

Acties:

R4gnax

rickh18 schreef op zondag 07 september 2014 @ 22:58:
Het is een beetje lastig om een goed antwoord te geven aangezien de css file en het Jquery script er niet bij zitten.
hoe verwerk je de div in de code? plaats je deze om de strong tags heen? Wat als je deze er binnen plaats? In dat geval zou de opmaak niet moeten veranderen, tenzij in de css file de opmaak met het id van deze div wordt gewijzigd.

<div> binnen mag überhaupt niet.

maandag 8 september 2014 00:59

Acties:

johnkeates

Query het element en vervang .innerHTML?

maandag 8 september 2014 07:23

Acties:

ThinkPad

Topicstarter

R4gnax schreef op maandag 08 september 2014 @ 00:43:
[...]

<div> binnen mag überhaupt niet.

Precies, daar zit ik dus mee.

johnkeates schreef op maandag 08 september 2014 @ 00:59:
Query het element en vervang .innerHTML?

Volgens mij werkt dat niet omdat Ajax een DIV verwacht.

Het script is als volgt:

HTML:

<script id="source" language="javascript" type="text/javascript">

$(function gemAfgelopenUurElektra() 
{
    //-----------------------------------------------------------------------
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
    //-----------------------------------------------------------------------
    $.ajax({                                      
      url: 'api_energy.php',                  //the script to call to get data          
      data: "utility=elektra&type=gem_uur",                        //you can insert url argumnets here to pass to api_temperature.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var verbruik = data[0];              //get id
        //--------------------------------------------------------------------
        // 3) Update html content
        //--------------------------------------------------------------------
        $('#sensor1').html("Gemiddelde afgelopen uur: "+verbruik+" W"); //Set output element html
        setTimeout(gemAfgelopenUurElektra, 10000); //Elke 5min verversen
      } 
    });
}); 

</script>

En de relevante stukken uit CSS:

Cascading Stylesheet:

ul {
margin: 0;
padding: 0;
position: relative;
z-index: 10;
}

li
{
  display: block;
  float: left;
  height: 197px;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  width: 290px;
}


li, li p a
{
  background-color: transparent;
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 0% 0%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.5) inset, 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
}

[ Voor 11% gewijzigd door ThinkPad op 08-09-2014 07:26 ]

maandag 8 september 2014 07:34

Acties:

Cartman!

ThinkPadd schreef op maandag 08 september 2014 @ 07:23:
[...]

Volgens mij werkt dat niet omdat Ajax een DIV verwacht.

Waar zie je dat dan?

maandag 8 september 2014 07:34

Acties:

Ypho

Allround Nerd

Als je op de plek van de waarde een neerzet met een ID, kun je die vanuit je javascript code aanroepen.

HTML:

<li>
 <span>Sensor 1</span>
  <div class="sensors"></div>
   <p>
    <strong><span id="waarde_regel8">99 %</span></strong>
   </p>
   .....
</li>

In je JS gebruik je dan deze code, op de plaats van XXX gooi je dan je waarde.

JavaScript:

1	$('#waarde_regel8').innerHTML( XXX );

🃏 TCG Codex - Je volledige TCG verzameling in je broekzak ::: 🍏 TCG Codex for iOS ::: 🤖 TCG Codex for Android

maandag 8 september 2014 09:21

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Ypho schreef op maandag 08 september 2014 @ 07:34:
Als je op de plek van de waarde een neerzet met een ID, kun je die vanuit je javascript code aanroepen.

Waarom zou je daar nog een span voor toevoegen?

HTML:

1	<strong id="foo">

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 8 september 2014 09:40

Acties:

itsleon

RobIII schreef op maandag 08 september 2014 @ 09:21:
[...]

Waarom zou je daar nog een span voor toevoegen?
HTML:
1

waarom zou je een ID toevoegen

Cascading Stylesheet:

1	.devices li > p > strong

maandag 8 september 2014 09:46

Acties:

Arie-

Ik zal even de oplossing wat algemener omschrijven. Je ajax code moet iets _unieks_ hebben waar het de waarde kan wegschrijven/aanpassen. Waarom het eerder bij die div wel werkte: die heeft een ID, en een ID moet uniek zijn op een pagina. Zoek dus een structuur waarbij je een geschikt element in je pagina opbouw een ID geeft, of gebruik de methode van itsleon. Pas je pagina binnen dat element aan middels je ajax code.

Edit: In je tweede post, op regel 18,

code:

1	$('#sensor1').html("Gemiddelde afgelopen uur: "+verbruik+" W"); //Set output element html

Daar wordt middels #sensor1, het element, toevallig een div, met id sensor1 gepakt.

[ Voor 21% gewijzigd door Arie- op 08-09-2014 09:48 ]

maandag 8 september 2014 09:53

Acties:

ThinkPad

Topicstarter

Dank allen, ik ga eens klooien met de eerder genoemde tips. Ik dacht dat het alleen met een div kon, omdat alle tutorials op internet hierover uitgaan van een div.

maandag 8 september 2014 12:13

Acties:

R4gnax

ThinkPadd schreef op maandag 08 september 2014 @ 09:53:
Dank allen, ik ga eens klooien met de eerder genoemde tips. Ik dacht dat het alleen met een div kon, omdat alle tutorials op internet hierover uitgaan van een div.

Fair note of warning:
Ik schat dat zo ongeveer 90% van alles wat er op internet aan tutorials over geschreven wordt, complete bagger is. jQuery is wat dat betreft echt het nieuwe PHP.

En even een aandachtspuntje:

JavaScript:

1	$('#sensor1').html("Gemiddelde afgelopen uur: "+verbruik+" W"); //Set output element html

Daar hoor je niet de html functie te gebruiken, maar de text functie.

[ Voor 31% gewijzigd door R4gnax op 08-09-2014 12:25 ]

maandag 8 september 2014 18:18

Acties:

ThinkPad

Topicstarter

Het is gelukt

Dit:

RobIII schreef op maandag 08 september 2014 @ 09:21:
[...]
HTML:
1

Bleek uiteindelijk de oplossing

De functie zoekt idd gewoon naar een unieke ID.

HTML:

1	<h2 id="sensor1">TEST</h2>

werkt ook gewoon idd.

R4gnax schreef op maandag 08 september 2014 @ 12:13:
[...]
En even een aandachtspuntje:
JavaScript:
1
$('#sensor1').html("Gemiddelde afgelopen uur: "+verbruik+" W"); //Set output element html
Daar hoor je niet de html functie te gebruiken, maar de text functie.

Dank

Nu zit ik alleen nog met dit:

HTML:

<p>
Min: 999 %<br/>
Max: 999 %
</p>

Dat wil ik eigenlijk zo:

HTML:

<p>
Min: #ID1<br/>
Max: #ID2
</p>

Maar wat voor tag kan ik daar voor pakken (zonder dat het de opmaak aanpast zoals een tag bijv.)? Een ertussen zorgt voor een lelijke enter...
Beetje ranzige hacks zo, maar ik weet niet goed hoe ik het anders moet aanpakken.. En het is maar een hobbyprojectje, dus als het maar werkt

[ Voor 25% gewijzigd door ThinkPad op 08-09-2014 19:02 ]

maandag 8 september 2014 19:04

Acties:

Cartman!

Misschien kun je proberen of je meerdere keren een -element in 1 pagina mag gebruiken?

dinsdag 9 september 2014 21:35

Acties:

ThinkPad

Topicstarter

Ik wil de data niet in span hebben, maar nu in een element.. Dat lukt wel, maar omdat ik 2 van die elementen onder elkaar zet komt er blijkbaar automatisch een enter tussen.

dinsdag 9 september 2014 22:05

Acties:

CrazyFool

Wat zou de reden zijn om ze niet in een span te zetten dan? Een p in een p is zowiezo niet de juiste manier. Als je ze echt in een p wilt hebben kan je die een css class meegeven met padding:0px en margin:0px. Maar ik denk dat een span beter zou zijn..

dinsdag 9 september 2014 22:51

Acties:

Arie-

Is een span hier niet juist voor bedoeld? Van de w3 site:

quote: http://www.w3.org/wiki/HTML/Elements/span
The element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

en

quote: http://www.w3.org/TR/html5/dom.html#phrasing-content-1
http://www.w3.org/TR/html5/dom.html#phrasing-content-1

.
Natuurlijk zijn er andere oplossingen, maar (onder andere) span is volgens mij juist bedoeld om een kleiner stukje binnen een concreter geheel te pakken.

zondag 14 september 2014 22:47

Acties:

Gomez12

ThinkPadd schreef op dinsdag 09 september 2014 @ 21:35:
Ik wil de data niet in span hebben, maar nu in een element.. Dat lukt wel, maar omdat ik 2 van die elementen onder elkaar zet komt er blijkbaar automatisch een enter tussen.

Het is vrij normaal om tussen 2 paragrafen () een enter te zetten, je kunt deze wel wegstylen met wat css, maar ik zou toch simpelweg een ander element kiezen (bijv )