Fråga om Javascript Time Picker "Nästan där"

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Fråga om Javascript Time Picker "Nästan där"

Inlägg av SeniorLemuren »

Jag hr en sida med ett antal från en databas bilder upplagda på en sida med bootstrap. När jag klickar på en bild öppnar jag en modal (ett fönster ovanpå bildsidan) där ja kan skriva in text i några input... som finns i en form i modalfönstret.
När jag sedan klicka på save så vill jag köra en javascript för dynamisk uppdatering av databasen. Problemet är att jag inte kan komma till scriptet ifrån modal för jag vet inte hur man gör. (<span id="result"></span>) är till för svar från javascriptet om uppdateringen har lyckats eller ej) Lägger jag in save-knappen någonstans utanför modalfönstret så kommer jag till scriptet men då får jag ju inte med mig inputtarna ifrån <form...> Jag antar att man skall skriva något mer här ".click(function()" för att veta vart klicket kommer ifrån?

Save knappen ligger här här:

Kod: Markera allt

<form....> ........
    <div class="modal-footer"> 
    <button type="button" class="btn btn-secondary"
     data-dismiss="modal">Close</button>
     <button type="button" id="savevideo" class="btn btn-secondary">Save</button>
     </div>
     <span id="result"></span>
 </form>
Javascripet börjar så här:

Kod: Markera allt

$("#savevideo").click(function() {
        
        var id3 = $('#id_nr').val();
        var id = $('#event_start_time').val();
        var id1 = $('#event_stop_time').val();
        var id2 = $('#event_info').val(); {....
problemet är att javascriptet ine öppnar om jag clickar på save. Flyttar jag däremot ut save-knappen och lägger den för sig själv någonstans i början på sidan så funkar den.
Senast redigerad av SeniorLemuren 10 juni 2019, 19:43:18, redigerad totalt 2 gånger.
johano
Inlägg: 1943
Blev medlem: 22 januari 2008, 10:07:45
Ort: Stockholm

Re: Fråga om Javascript

Inlägg av johano »

Problemet är förmodligen att jQuery-bindningen $("#savevideo").click(...) görs *innan* modalen skapats och det
finns således inget #saveVideo-element i dokumentet (ännu)

Testa att istället binda med .on() och skicka med selectorn #savevideo som argument

Kod: Markera allt


$(document).on("click", "#savevideo", function() {
  ...
});

detta gäller jQuery 1.7+, tidigare versioner hette funktionen "live"

/j
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Jag har ju lagt modal inne i den loop som lägger upp bilderna för att få med bildens id så jag kan länka info-filen till bildfilen.

Det verkar vara ett problemet. Jag flyttade modal-fönstret utanför loopen då öppnas scriptet. Problemet är ju då hur jag gör för att få tag i id-numret på den bild jag klickar på för att öppna modal-fönstret. Kan jag det så löser det sig bättre. Det är ju lite dumt att ha modal-fönstrets kod snurrande runt med varje bild. Har man väldigt många bilder så tar det ju en massa tid att visa sidan.

Så en javascript kod som lägger in det klickade fönstrets Id vore fint. Jag kunde detta för 20 år sedan men minnet är inte så långt så det blir liksom att börja från början. Jag har hållit på med detta problem i två dagar nätter 18 timmar om dygnet. :D
När man lägger ut bilderna från databasen i en loop så borde man väl kunna binda bildens rad-id till bilden?
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Så här ser video nummer ut som ligger på bilden. <p id="videoId">Video ID #<?php echo $row['video_id'] ?></p> Det värdet vill jag ha in Arrayen som sparas till databasen.

Kod: Markera allt

$(document).on("click", "#saveTime", function() {
    $.post($("#myForm").attr("action"),
        $("#myForm :input").serializeArray(),
        function(info) {
            $("#result").html(info);
        });
    clearInput();
});

$("#myForm").submit(function() {
    return false;
});

function clearInput() {
    $("#myForm :input").each(function() {
        $(this).val('');
    });
}
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Nu hoppas jag det kommer något bra förslag. Jag har fixat så det funkar med detta script.

Kod: Markera allt

$(document).on("click", "#saveTime", function() {
    $.post($("#myForm").attr("action"),
        $("#myForm :input").serializeArray(),
        function(info) {
            $("#result").html(info);
        });
    clearInput();
});

$("#myForm").submit(function() {
    return false;
});

function clearInput() {
    $("#myForm :input").each(function() {
        $(this).val('');
    });
}
Det enda jag behöver hjälp med är att jag vill inte radera alla inputfälten, jag vill ju att video_id_nr skall stå kvar, alla andra inputfält skall clearas. Frågan är hur man skall ändra i nedanstående funktion för att radera en input i taget. Här raderas ju all input i formen. Säkert någon här som kan tala om det i sömnen. :)

Kod: Markera allt

function clearInput() {
    $("#myForm :input").each(function() {
        $(this).val('');
    });
För att behålla sista video_id_nr som är det sista inputfältet.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Har testat detta

Kod: Markera allt

var input = document.getElementById("event_start_time");
input.value == ""
Men det funkade inte.

"event_start_time" ligger i en form i en modal.

Kod: Markera allt

<form id="myForm" action="insert_timestamp.php" method="POST">
<div class="modal-body">
                                        
     <div class="form-group">
         <label> *Event Start Time</label>
         <input type="text" class="form-control" id="event_start_time"
          name="event_start_time" placeholder="Enter event starttime (HH:MM:SS)">
      </div>
Börjar bli trött i skalle. Har suttit framför burken i 48 timmar sovit 8 timmar. :kortis:
Användarvisningsbild
papabear
Inlägg: 821
Blev medlem: 14 mars 2004, 03:27:12
Ort: Eskilstuna
Kontakt:

Re: Fråga om Javascript

Inlägg av papabear »

Om du aldrig vill rensa video_id_nr med den funktionen kan du väl göra typ så här:

Kod: Markera allt

function clearInput() {
   $("#myForm :input").each(function() {
      if(this.id !== 'video_id_nr') //jag har inte testat att detta funkar - att det finns en property som heter id här osv
         $(this).val('');
   });
}
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Ok det skall testas. Men nu har jag sovit i 5 timmar och blivit liiite klarare. Jag kan då konstatera att jag hade fel då jag påstod att jag fått tag på id-nr. Det står visserligen rätt id-nr i inputfältet i modal på skärmen men det är ju bara i inputrutan på skärmen det finns. :(

Jag skriver ju ut bilderna i en loop och då skrivs ju id-nr ut på respektive input, men id_nr fortsätter ju varvet runt och blir alltid 1 när loopen är klar så det id_nr som visas på skärmen finns ju bara kvar på skärmen. I den verkliga input ligger ju bara en 1 på alla bilderna. id-nr finns alltså ingen annan stans än på skärmen. :doh:

En gång i tiden gjorde jag ett program som laddade in sidor i en hemsnickrad browser som jag byggde i Delphi. Där kunde jag få tag på textsträngen på det innehåll som visades på skärmen. Jag sniffade sedan hela nätet och fångade alla epostadresser jag stötte på och sparade i en databas. Jag fick ihop 600 000 adresser. Testade med att automatiskt skicka ut 30 000 mail med reklam. Blev VÄLDIGT utskälld och avstängd på Telia i en månad. (Programmet hette Snooker). Kanske någon här på EF blev drabbad. :mrgreen:

Ok. så frågan är just nu hur man kan få tag i den textsträngen i t.ex chrome med PHP och med hjälp av den hitta id-nr på just den modal man har öppnat Modaln ligger ju alltid på samma position på skärmen så den är ju lätt att hitta i textsträngen till och söka fram inputrutan med det rätta id-nr. :humm: Får jag bara tag på skärminnehållets textsträng så kan jag nog rota fram gamla Snooker och översätta pascal till PHP. :)

Edit: det finns ju en funktion som heter visa sidkälla. Då får man upp texten på skärmen Den texten vill jag i stället ha in i en variabel i ett php program.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Besvara mig själv. Det sket sig med visa sidkälla. Där får man all information från sidans URL. Vad ja vill ha tag i är den kodtext som visar just den sida man ser på skärmen. Modalfönstret ligger ju ovanpå den scrollbara sidan och där visas just det id_nr jag är ute efter. Sidkällan visar alla modal med sina id_nr men det går inte att se vilket av dem som är öppet för tillfället och det är ju bara det jag är intresserad av. Vetifaan hur det går till.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Gjorde en enkel demo på vad jag ville förklara. Kolla länken. Oavsett vilken modal man öppnar så visar "Visa sidkälla" exakt samma kod förutom texten i modal?

När sidan genereras på skärmen så måste ju koden som genererar sidan vara olika beroende på vilken modal som visas tycker man, men så är det tydligen inte? Det är nu de verkliga eperterna gärna får dyka upp. :)

Kolla själv genom att högerklicka på sidan och "Visa sidkälla". Där finns de båda modal med i "Visa sidkälla" även om endast en eller ingen är öppnad. Spelar ingen roll, koden är den samma.
Länk till modaltest

Edit: Modalfönstret skickas förmodligen upp dynamiskt som en separat HTML med hjälp jawascript när man klickar på visa modal. men hur sjutton får man tag i just den koden. Det borde ju gå genom att klicka på själva modalfönstret och begära "Visa sidkälla" men det funkar inte. Man får fortfarande bara upp samma källkod som om man klickar på sidan bredvid modal.

Återstår tydligen bara att fånga koden i windows fönster på cliensidan och plocka id_nr därifrån och skicka upp det till servern. Låter inte enkelt om man säger så. Men jag kan väl inte vara ensam om att hämta text som visas på skärmen genom att klicka på den och sedan skicka den till serversidan? Vad skall man googla på för att hitta mer info om detta?
Senast redigerad av SeniorLemuren 6 juni 2019, 13:42:08, redigerad totalt 1 gång.
Användarvisningsbild
papabear
Inlägg: 821
Blev medlem: 14 mars 2004, 03:27:12
Ort: Eskilstuna
Kontakt:

Re: Fråga om Javascript

Inlägg av papabear »

Sidkälla är en sak DOM:en en annan. Kolla med F12 och kolla hur det ser ut där.

Jag kan kolla lite ikväll när jag är vid datorn.
johano
Inlägg: 1943
Blev medlem: 22 januari 2008, 10:07:45
Ort: Stockholm

Re: Fråga om Javascript

Inlägg av johano »

"Visa källa" visar htmlkoden som den såg ut när den lämnade servern (eller laddades från disken) och visar inte de ändringar som gjorts via javascript.

Istället kan du högerklicka på ett element, tex inne i din modal, och välja "Inspektera" så kommer du till en "live"- vy över hur htmlkoden ser ut just nu.

Du kan även här ändra och labba runt lite och se ändringarna direkt.

För att återgå till ditt ursprungliga problem så kan man lägga till ett attribut på knappen med en "pekare" till det närmast omslutande elementet "över" de fält du är intresserad av och sedan använt den som context för jQueryselekteringen.

typ såhär

Kod: Markera allt

<div id="modal1">
....
    <input class="value1" />
    <input class="value2" />
</div>

<button class="open -button" data-refer="#modal1">Öppna</button>

<script>
$(document).on("click", ".open-button", function() {

    var ref = $(this).data("refer");
    var value1 = $(".value1", $(ref)).val();

});
</script>
Notera att jag undvikit id:n på inputtarna då det kan bli tråkigt om flera element har samma id. KSla du köra med id:n så måste du indexera dem med en räknare tex för att göra dem unika.

/j
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Ja det var intressant. Där kan jag se vilken modal som just för tillfället är öppen och vilket Id-nummer den
har. (timeInsert12 och modal fade show)
modal.JPG
Denna textinfo är lokal. Popup modal funkar ju på sidan även när kommunikationen till nätet är avstängd. Så jag måste alltså fixa ett litet program som leta efter id_nr på den öppna modalen och sedan skicka upp den till servern antar jag?

Servern vet ju inte vilken modal som är öppen eller stängd. Så då återstår frågan. Hur får jag tag i filen med t.ex pascal eller något annat lämpligt program? Vad skall man googla på? Eller tänker jag fel?
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
johano
Inlägg: 1943
Blev medlem: 22 januari 2008, 10:07:45
Ort: Stockholm

Re: Fråga om Javascript

Inlägg av johano »

Kör med $.post() för att posta data till servern
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Det sade mig absolut ingenting. Posta vad varifrån? Om du kollar länken som jag bifogade tidigare och ock klickar på de 2 knapparna så kan du se att den ena har nummer 1 och den andra har nummer 2 och jag vill ha tag på numret på den som för tillfället är öppen, för att kunna öppna rätt record nummer i en databas.

Det enda stället som jag hittar den informationen om, är att klicka på F12 i chrome. Där finns info om vilket fönster som är öppet och den informationen skall alltså automatiskt upp till servern när någon klickar på någon av knapparna.
Skriv svar