Modal werkt niet meer na div refresh

[Amarog]

Ik heb een pagina waarop een Modal staat. In de modal wordt een andere pagina geopend door middel van op een link te klikken. Dat werkt allemaal super en vlot zoals ik het wil.

Nu wil ik dat de er een bepaalde div om de 10 seconden refresht. In de div die gerefresht moet staat echter de link waarop geklikt moet worden om de modal te openen. Na de refresh werkt deze dus niet meer.

Internet biedt mij niet onmiddellijk een oplossing aan, de code die ik gebruik heb ik ook hier en daar van internet samen gesmeten, jquery en Ajax (En javascript) zijn nu niet onmiddellijk mijn dada.

Het script voor de modal te openen:

code:

<script>
    $(document).ready(function(){
        $('.openPopupMemoEdit').on('click',function(){
            var dataURL = $(this).attr('data-href');
            $('.modal-body').load(dataURL,function(){
                $('#Modal1').modal({show:true});
            });
        }); 
    });
</script>

De link om deze modal te openen

code:

<a href="javascript:void(0);" data-href="EditMemo.php" class="openPopupMemoEdit">Edit memo</a>

Het script om de DIV te refreshen:

code:

<script>
    $(document).ready(function() {
        var refreshId = setInterval(function() {
            $(".MemoRefresh").load("nieuwepagina.php");
        }, 10000);
    });
</script>

De code van de modal:

code:

<div class="modal" id="Modal1">
    <div class="modal-body">
    
    </div>
</div>

De te refreshen DIV:

code:

<div class="MemoRefresh">
<a href="javascript:void(0);" data-href="EditMemo.php" class="openPopupMemoEdit">Edit memo</a> 
Random tekst. 
</div>

De reden dat ik wil dat enkel de DIV refresht en niet de volledige pagina is vrij simpel. Als er een modal openstaat dan refresht de enkel de DIV. Indien de pagina refresht dan wordt de modal ook gerefresht, en deze dient om input te geven. Indien er dan net een page refresh is gebeurd dan kan ik opnieuw beginnen met m'n input... Nu refresht m'n DIV netjes als de Modal ook open staat zonder dat de modal verdwijnt.

Alle hulp is welkom, een duwtje in de juiste richting of een klare oplossing, het maakt me niet uit. Ik weet echter niet hoe dit op te lossen.

[ Voor 10% gewijzigd door Amarog op 27-03-2019 09:41 ]

[Ed Vertijsment]

Wat bedoel je exact met een "div" refreshen. Een div is een flow content, block level element, geen browsing context. Een browsing context"pagina" kun je refreshen. Een element kan je muteren (bijvoorbeeld door async een pagina te laden).

Volgens mij wil je een formulier tonen in een modal om iets aan te passen. Ik zou dat doen door iets van een form te renderen en dat netjes met een REST api af te handelen. Iets meer werk om op te zetten maar veel netter.

Mocht je niet al te veel zin hebben om dit op te tuigen is het wellicht een optie om een een simpele iframe op te zetten in je modal die een pagina laad. Een iframe is wel een (nested) browsing context en kan je wel los refreshen.

[ Voor 25% gewijzigd door Ed Vertijsment op 27-03-2019 10:40 ]

[Tsjilp]

Je listener wordt 1x gezet, na de refresh raakt hij de reference naar het element kwijt (die wordt immers vervangen met een nieuw element), dus werkt de klik niet meer.
Je kunt 2 dingen doen:
1. De listener voor de refresh verwijderen en na de refresh opnieuw zetten.
2. Een listener op een element buiten de div zetten, en dan middels $event.currentTarget checken of op het juiste element geklikt is.

[m-designz]

Je zet de listener inderdaad op de link die dus verdwijnt. De "on" functie in jquery is hier the way to go zoals je zelf ook al gevonden had zo te zien, deze kun je echter 3 parameters voeren i.p.v. 2 zie hiervoor:

http://api.jquery.com/on/

in jouw geval zou je dus zoiets kunnen doen:

code:

$('parent element dat niet refresht').on('click', '.openPopupMemoEdit', function(){

});

[Amarog]

@m-designz Dat doet het inderdaad werken! De div refresht netjes en de link kan aangeklikt worden om de modal te openen die op de hoofdpagina staat.

Echter sluit de modal als de div weer wordt gerefresht. En dat wil ik vermijden.

In m'n oude code blijft de Modal openstaan en wordt de div wel gerefresht zonder de modal te sluiten.
Is er een mogelijkheid dat de div refresh stopt indien de modal openstaat?

[DJMaze]

Amarog schreef op woensdag 27 maart 2019 @ 09:38:
Ik heb een pagina waarop een Modal staat.

Waarom is je modal een <div> en geen <dialog>?

https://webdesign.tutsplu...dialog-element--cms-23876

[Amarog]

DJMaze schreef op woensdag 27 maart 2019 @ 20:54:
[...]

Waarom is je modal een <div> en geen <dialog>?

https://webdesign.tutsplu...dialog-element--cms-23876

Omdat ik nog van de "oude" stempel ben en m'n kennis van vroeger nog steeds gebruik in wat ik nu nodig heb. Ik zwier nog zelden een site ineen. En als ik dat dan toch al doe dan is dat meestal voor mezelf. Dus zolang het werkt werkt het...

Ik heb de code voor de modal ook op internet gevonden en deze getweaked naar mijn zin. En bijna alle modals die ik tegen kwam waren gemaakt in een <div>. Die <dialog>, dat is de eerste keer dat ik daar van hoor.

Verder, zou dat m'n probleem oplossen misschien?

[Amarog]

Misschien moet ik het wat gemakkelijker voor mezelf maken.

Ik weet hoe ik een pagina iedere x-seconden moet refreshen.
Is het nu mogelijk om te zorgen indien de modal open is dat de page refresh stopt maar wanneer de modal weer sluit zou de page refresh weer moeten lopen.

Is dat mogelijk?

[Merethil]

DJMaze schreef op woensdag 27 maart 2019 @ 20:54:
[...]

Waarom is je modal een <div> en geen <dialog>?

https://webdesign.tutsplu...dialog-element--cms-23876

Heb je wel eens naar de browsersupport gekeken voor zo'n dialog? FF, Safari en Edge doen er iig niets mee...

[Ramon]

Merethil schreef op vrijdag 29 maart 2019 @ 08:30:
[...]


Heb je wel eens naar de browsersupport gekeken voor zo'n dialog? FF, Safari en Edge doen er iig niets mee...

"Maakt niet uit, zolang Chrome het maar ondersteunt." - de halve wereld



edit: ontopic, de modal bevind zich niet in de div die "gerefreshed" wordt toch? Want dat zou nogal vreemd gedrag opleveren waarschijnlijk.

[ Voor 20% gewijzigd door Ramon op 29-03-2019 08:38 ]

[Amarog]

De modal bevindt zich idd niet in de DIV die gerefreshed wordt.