jquery textarea in tooltip, tekst verdwenen na heropenen

[reconf]

Ik gebruik voor een projectje op een aantal input tekstvelden van een form een jquery qtip tooltip met een textarea veld er in om snel een notitie te kunnen plaatsen. De textarea wordt uit een hidden div gehaald die al in de html staat. Echter, als de tooltip na verloop van tijd sluit en weer geopend wordt is de ingevulde tekst in de textarea verdwenen.

Ik vermoed dat het komt doordat de content van de tooltip wordt gevuld met een kopie van de content van de hidden div, maar dat niet de oorspronkelijke originele textarea wordt gevuld.

De code ziet er als volgt uit:

JavaScript:

$('input').qtip({
    content: { text: function(api){ return $(this).next('.uurcomment').html() }, button: 'Close', title:'blablablas'},
    show: { event: 'click', effect: function(){ $(this).fadeTo(200, 1); } },
    hide: { event: 'unfocus', effect: function(){ $(this).fadeTo(200, 0); } },
    style: {
        tip: {
            corner: true,
        width: 20,
        offset: 5
        },

    classes: 'qtip-light qtip-rounded'
}

Hoe zorg ik er nou voor dat de tekst in de textarea nou blijft staan, ook nadat de tooltip weer verdwenen is?

[jeroenk13]

Heb je bijvoorbeeld een reproduceerbaar voorbeeld die je op jsfiddle.net kan zetten ?

[ Voor 17% gewijzigd door jeroenk13 op 23-09-2017 23:54 ]

[orf]

In de hide -> efftect methode zou je de inhoud van de textarea uit de tooltip naar de textarea in de hidden div kunnen kopieren.
Zonder qtip te kennen en de source niet te zien is het wat lastig, maar wellicht dat zoiets volstaat. Misschien is er ook wel een nettere manier om dit te doen door te subscriben op een event o.i.d.

JavaScript:

$('.uurcomment').find('textarea').val( $('qtip-light').find('textarea').val() );

[CH4OS]

reconf schreef op zaterdag 23 september 2017 @ 13:35:
Ik gebruik voor een projectje op een aantal input tekstvelden van een form een jquery qtip tooltip met een textarea veld er in om snel een notitie te kunnen plaatsen. De textarea wordt uit een hidden div gehaald die al in de html staat. Echter, als de tooltip na verloop van tijd sluit en weer geopend wordt is de ingevulde tekst in de textarea verdwenen.

Ik vermoed dat het komt doordat de content van de tooltip wordt gevuld met een kopie van de content van de hidden div, maar dat niet de oorspronkelijke originele textarea wordt gevuld.

De code ziet er als volgt uit:

JavaScript:

$('input').qtip({
    content: { text: function(api){ return $(this).next('.uurcomment').html() }, button: 'Close', title:'blablablas'},
    show: { event: 'click', effect: function(){ $(this).fadeTo(200, 1); } },
    hide: { event: 'unfocus', effect: function(){ $(this).fadeTo(200, 0); } },
    style: {
        tip: {
            corner: true,
        width: 20,
        offset: 5
        },

    classes: 'qtip-light qtip-rounded'
}

Hoe zorg ik er nou voor dat de tekst in de textarea nou blijft staan, ook nadat de tooltip weer verdwenen is?

Zover ik uit de code kan opmaken, wordt inderdaad de HTML van de eerst volgende tag (.next) mét uurcomment als class elke keer opnieuw opgehaald, want dat staat ook zo in de jQuery onder content.

Overigens doe je binnen de anonieme functie in diezelfde regel niets met de variabele api. Dan zou ik hem gewoon weg laten, als je het toch niet gebruikt of nodig hebt.

Wat heb je zelf al geprobeerd om het op te lossen? Je kan bij het hide event de waarde wegschrijven naar de selector die het hidden veld moet ophalen. Je kan het ook ergens anders wellicht opslaan.

Al zou ik hiervoor nooit een tooltip gebruiken, aangezien ze hiervoor gewoonweg niet bedoeld zijn.

[ Voor 109% gewijzigd door CH4OS op 24-09-2017 00:24 ]

[reconf]

Wat zou je hier dan voor gebruiken? wat ik wil repliceren is een mogelijkheid in Excel waar je een opmerking aan een cell kan toevoegen, hier komt ook een soort tooltip tevoorschijn met een tekstveld.

Ik heb even een JSfiddle gemaakt om het te verduidelijken
https://jsfiddle.net/1o8t4wya/
Klik op het inputveld om de tooltip te laten tonen.

[orf]

Ik zou de opmerkingen "opslaan" in een data-attribute van de input waar je de tooltip toont. Zo kun je bij het verbergen van de tooltip de data attribute vullen en na het tonen van de toolltip de textarea weer vullen.

Ik zie dat qTip events heeft waar je dat kan doen:

JavaScript:

events: {

    hide: function(event, api) {
        // aangeroepen voordat de tooltip wordt verborgen. Hier kun je de data "opslaan"
        console.log(this.find('textarea').val());
    },
      
    visible : function(event, api) {
        // aangeroepen na het tonen van de tooltip. Hier kun je de textarea vullen.
    }
        
}

[CH4OS]

reconf schreef op zondag 24 september 2017 @ 11:01:
Wat zou je hier dan voor gebruiken? wat ik wil repliceren is een mogelijkheid in Excel waar je een opmerking aan een cell kan toevoegen, hier komt ook een soort tooltip tevoorschijn met een tekstveld.

Ik heb even een JSfiddle gemaakt om het te verduidelijken
https://jsfiddle.net/1o8t4wya/
Klik op het inputveld om de tooltip te laten tonen.

Ah, de bedoeling is nu wat duidelijker, dan zou ik inderdaad zoals @orf aangeeft de inhoud van de opmerking opslaan in een data-attribuut en daar ook uit ophalen.

[reconf]

orf schreef op zondag 24 september 2017 @ 11:46:
Ik zou de opmerkingen "opslaan" in een data-attribute van de input waar je de tooltip toont. Zo kun je bij het verbergen van de tooltip de data attribute vullen en na het tonen van de toolltip de textarea weer vullen.

Ik zie dat qTip events heeft waar je dat kan doen:

JavaScript:

events: {

    hide: function(event, api) {
        // aangeroepen voordat de tooltip wordt verborgen. Hier kun je de data "opslaan"
        console.log(this.find('textarea').val());
    },
      
    visible : function(event, api) {
        // aangeroepen na het tonen van de tooltip. Hier kun je de textarea vullen.
    }
        
}

Dat helpt een hoop, dank.

Heb het nu zo (redelijk) werkend:
https://jsfiddle.net/bg08mtLa/