Dialog popup Jquery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Airport Developer / System engineer

De functie Als onze nieuwe Airport Developer / System Engineer is je doel om uit nieuwbouw- en onderhoudsprojecten maximale waarde te creëren voor Schiphol Group en haar stakeholders. Vanuit je visie en expertise, maar ook (technologische) ontwikkelingen, wetgeving en beleid vertaal je klantwensen naar een gedegen programma van eisen. In de planontwikkelingsfase werk je nauw samen met Plan Ontwikkelaars om je kennis in te brengen ten behoeve van de kwaliteit van het investeringsvoorstel. Je overlegt met diverse partijen, stelt de vraag achter de vraag en verbindt zo de belangen van de luchthaven, proceseigenaar en asseteigenaar om tot een gedragen ontwikkelopgave

Bekijk vacature »

Magento2 Developer

Functie Ben jij een ontwikkelaar en wil jij een volgende stap zetten en als teamlead aan de slag? Lees dan snel verder! Voor een gewilde opdrachtgever in omgeving Delft zijn wij op zoek naar een programmeur die als meewerkend voorman aan de slag wilt gaan. Een developer die een team van twee man aan zal sturen. Jouw werkzaamheden zullen er als volgt uitzien; Ontwikkelen en ontwerpen van API's; Maatwerkoplossingen; Databeveiliging; Optimalisatie webshops; Ontwikkelen technische implementaties voor verbetering database; Aanspreekpunt voor de organisatie en verantwoordelijk voor de aansturing van externe developers. Zoek je veel uitdaging en veelzijdigheid in je werk dan

Bekijk vacature »

Traineeship Full Stack .NET Developer

Dit ga je doen Start op 7 augustus 2023 bij de Experis Academy en ontwikkel jezelf tot een gewilde Full Stack .NET Developer. Maar hoe ziet het traineeship eruit en wat kun je verwachten? Periode 1 De eerste 3 maanden volg je fulltime, vanuit huis, een op maat gemaakte training in teamverband. Je leert belangrijke theorie en krijgt kennis van de benodigde vaardigheden en competenties die nodig zijn om de IT-arbeidsmarkt te betreden. Zowel zelfstandig als in teamverband voer je praktijkopdrachten op het gebied van front- en backend development uit. Wat er per week op het programma staat kun je

Bekijk vacature »

Low code Developer

Dit ga je doen Je richt je op het doorontwikkelen van bestaande applicaties en het geheel van scratch af aan opzetten van nieuwe applicaties binnen een low code platform; Je beoordeelt technisch ontwerpen en maakt de vertaalslag naar de technische oplossingen binnen het platform; Je voert testwerkzaamheden uit; Je adviseert de organisatie op jouw vakgebied; Je schakelt met business analisten en de architect om tot mooie oplossingen te komen; Je lost bugs op en denkt mee over een structurele oplossing. Hier ga je werken Het gaat om een bekend internationaal handelsbedrijf met ruim 800 medewerkers, verdeeld over verschillende deelbedrijven. Deze

Bekijk vacature »

.NET Developer

Dit ga je doen Programmeren in .NET, Javascript & C# en ontwikkelen in Web Services, Windows Services en MS SQL Server; Zelfstandig verbanden maken Analyseren, testen, bugs fixen, reviewen en rapporteren; Juiste prioriteiten stellen en verantwoordelijkheid nemen; Op architectuur niveau meedenken; Af en toe klanten bezoeken. Hier ga je werken Voor onze relatie zijn wij opzoek naar een .NET ontwikkelaar met minimaal 3 jaar werkervaring. Je komt te werken in een groeiend bedrijf met betrokken collega's die zorgen voor een familiaire sfeer op de werkvloer. Als .NET ontwikkelaar word jij vanaf de eerste werkdag betrokken bij het gehele ontwikkelproces. De

Bekijk vacature »

Scrum Master

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Scrum master op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je begeleidt twee teams binnen de afdeling Platform Services (PLS). Je helpt mee de devops manier van werken van de teams verder door te ontwikkelen. Je helpt de PO bij het managen van de product backlog; het voorbereiden van

Bekijk vacature »

Front end developer React Sportgames

Functie Als Front end developer ga jij aan de slag bij een gave en bekende organisatie op het gebied van sportgames. Jij gaat aan de slag in een scrumteam met 6 developers die gepassioneerd en actief bezig zijn om spelers kwalitatieve en mooie spelervaringen aan te bieden. Als scrumteam werken ze in drie wekelijkse sprints en begin je iedere ochtend met een stand-up. Als Front end developer werk jij bij deze organisatie voornamelijk met Javascript, html, css en React. Er wordt veel gebruikt gemaakt ook van C#, Docker en Kubernetes. Het team hecht veel waarde aan het leveren van hoogwaardige

Bekijk vacature »

Back-end ontwikkelaar

Functie omschrijving Wil jij meebouwen aan diverse databasesystemen in een klein bedrijf met een platte organisatie? In een team van ruim 10 ontwikkelaars wordt er aan diverse ICT oplossingen gewerkt. Jouw taken hierbij zullen bestaan uit: Het onderhouden en door-ontwikkelen van bestaande databases. Denk hierbij aan schema verbeteringen en performance-tuning. Bij nieuwe ontwikkelingen ga jij ook bezig met het bouwen van het databaseschema. Omdat je in een klein team werkt zal je ook de C# routine verder uitbouwen en ontwikkelen. Ook kan je meedraaien in algemene refactory-, ontwikkel- of testwerkzaamheden. Je zal voornamelijk gebruik maken van de volgende technieken: .NET

Bekijk vacature »

.NET developer

Functie Als ervaren .NET ontwikkelaar start jij in één van onze vier scrumteams. Met 30 ontwikkelaars werk jij aan de doorontwikkeling van ons core product. Ook werkt jouw team aan maatwerkoplossingen op aanvraag van de klant en op projectbasis. Wij vinden het erg belangrijk dat onze ontwikkelaars met plezier naar werk gaan. Een deel hiervan ligt uiteraard bij jezelf, als jij ontwikkelen niet leuk vindt, ben jij bij ons echt aan het verkeerde adres. Jouw team bestaat namelijk uit een groep gepassioneerde vakidioten die dit werk doen omdat dit eerst een hobby was! Daarnaast wordt er intern rekening gehouden met

Bekijk vacature »

C#.NET-developer - JUNIOR

Functie omschrijving Voor een leuke opdrachtgever in omgeving Brielle zijn wij op zoek naar een junior developer. Werk jij graag met de volgende tools & technieken? C#, .NET, ASP.NET, MVC en SQL? Kijk dan snel of dit iets voor jou is! Als programmeur bij een productiebedrijf zal je voornamelijk nieuwe software schrijven maar ook bestaande software verbeteren. Verder werk je veel samen in back end projecten met leuke collega's. Bedrijfsprofiel Met een team van ruim 130 personen staan ze elke dag weer klaar om IT en Business te combineren door het ontwikkelen van producten op maat. Er zijn 3 teams,

Bekijk vacature »

.Net Front-end Ontwikkelaar

Wij zoeken een .Net Front-end Ontwikkelaar! Omschrijving Kun jij snel schakelen en ben je stressbestendig? Dan zoeken wij jou! Als .Net Front-end Ontwikkelaar help je mee aan de webapplicatie die over de hele wereld door allerlei bedrijven wordt gebruikt. Je werkt daarnaast mee aan nieuwe en verbeterde functionaliteiten en helpt met het oplossen van bugs. Over de opdrachtgever Je komt te werken in een ambitieus team dat zich blijft ontwikkelen. Dit is alle informatie die we nu kunnen delen over de werkplek. Als jij de .Net Front-end Ontwikkelaar bent voor deze job, vertellen we je snel nóg meer. Eisen Heb

Bekijk vacature »

PHP developer (Laravel, Docker, Gitlab-CI)

Functie Het IT-team bestaat momenteel uit 4 ontwikkelaars. Ieder onderdeel van de software draait op aparte servers en het bestaat dus echt uit verschillende componenten intern ontwikkeld en je werkt aan alle facetten. Van uitbreiding van de core tot maatwerk voor de klant. Ook liggen er verschillende uitdagingen op servervlak en databases. Je zult de eerste periode veel samenwerken met de lead developer om vervolgens echt je gang te gaan binnen de software. Een groot deel van de systemen is gebouwd met behulp van het Laravel framework en PHP (minimaal 7.2), Docker voor lokaab gebruik en Gitlab-CI voor het deployen

Bekijk vacature »

Ervaren C#.NET programmeur

Functieomschrijving Voor een moderne werkgever in regio Prinsenbeek zijn wij op zoek naar een ervaren C#.NET programmeur die graag de uitdaging aangaat. Je houdt je bezig met het ontwikkelen van maatwerk webapplicaties voor diverse klanten, waarbij complexe processen optimaal worden ondersteund. Verder ziet jouw takenpakket er als volgt uit: Ontwikkelen en onderhouden van C#.NET-applicaties; Schrijven van hoogwaardige, herbruikbare codes; Schrijven van technische documentatie en gebruikershandleidingen; Bijdragen aan het ontwerp en de architectuur van softwaretoepassingen; Troubleshooten en oplossen van bugs in softwaretoepassingen; Werken met databases en dataopslagoplossingen; Implementeren van beveiligingsoplossingen en het waarborgen van de beveiliging van applicaties en gegevens. Bedrijfsprofiel

Bekijk vacature »

Medior Mobile Developer iOS Amsterdam

Functie What will you be doing as Mobile Developer? As an iOS app developer you will work in a multidisciplinary team of app developers, web developers and designers. You will work on world-class apps that will be used by thousands of people. There is a lot of room for self-development on a technical and personal level. Together with the rest of the team you develop in the newest techniques and you go for the best quality. We work with Kotlin Multiplatform Mobile to develop hybrid apps and we guarantee quality with peer reviews, unit testing and we use a CI/CD.

Bekijk vacature »

Full stack Javascript ontwikkelaar

Functie Benieuwd hoe jouw dag eruit ziet? Je komt binnen rond een uur of 10 en dat start je met de morning call. Dit doen we vanaf het hoofdkantoor of op het lab, ligt eraan welk project je mee bezig bent. Na de call en het verdelen van de tickets ga je met je team aan de slag. Rond een uur of 12 is er een goede lunch en ga je smiddags weer lekker door met je werk. De ene keer maak jij een game voor een groot merk om de interactie tussen product en eindgebruiker te vergroten. De andere

Bekijk vacature »
Johnny Cash

Johnny Cash

11/11/2014 18:19:43
Quote Anchor link
Goedenavond,

Op twee eerdere posts heb ik helaas geen reactie ontvangen. Ik hoop dat iemand wel kan helpen met dit probleem voor mij. Mijn kennis van javascript/jquery is helaas nog niet goed genoeg dergelijke simpele issues op te lossen.

Ik heb verschillende links waarop geklikt kan worden.
Wanneer erop geklikt wordt moet er het bekende Dialog popup venstertje aangeroepen worden.
De links hebben een unique nummer. Dit nummer moet via jquery meegestuurd worden naar test.php zodat ik daarmee een juist bericht kan ophalen.

Mijn links:
<a id='clicker' href='#' class='22'>Titel van bericht 22</a>
<a id='clicker' href='#' class='23'>Titel van bericht 23</a>
<a id='clicker' href='#' class='24'>Titel van bericht 24</a>

Het dialog venster wordt met onderstaande code het venster direct geopend, en dat moet dus pas na een click event op de a href.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
    $(function ()    {
        $('<div>').dialog({
            modal: true,
            open: function ()
            {
                $(this).load('test.php');
            },        
            height: 400,
            width: 400,
            title: 'Titel van het bericht'
        });
    });
 
PHP hulp

PHP hulp

06/05/2024 15:31:38
 
Peter K

Peter K

11/11/2014 18:47:01
Quote Anchor link
Een voorbeeld van de jQuery UI:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
 
<div id="dialog" title="Basic dialog">
  <p>Text in de dialog</p>
</div>


Probeer eerst eens om meerdere dialogs te maken op 1 pagina met behulp van een loop. Zodra je dit onder de knie hebt kun je verder gaan kijken naar b.v. het handmatig openen van een dialog (http://jqueryui.com/dialog/#modal-form dit is een mooi voorbeeld, alles er uit slopen wat je niet nodig hebt en dan eens lezen wat je nog over hebt).
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

12/11/2014 19:29:54
Quote Anchor link
Een paar basics over de JQuery selector:

Selecteren van element op tag:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
$('div').html('PHP Hulp'); // dus geen $('<div>')

Selecteren van element op tag met een bepaalde class:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
$('div.phphulp').html('PHP Hulp');

Let op dat hiermee meerdere divs mee beïnvloed kunnen worden

Selecteren van element op id:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
$('#phphulp').html('PHP Hulp'); // dus geen $('<div>')


Let op dat er een verschil bestaat tussen DOM objecten en JQuery objecten:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
el = document.createElement('div');
el.html('PHP Hulp verkleed als ...');
$("#content").append(el); // --> gaat niet werken

el = $(document.createElement('div'));
el.html('PHP Hulp verkleed als ...');
$("#content").append(el); // --> wel


Terug naar je vraag zou ik het als volgt doen:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- html -->
<
a href="#" class="show" data-id="1">Bericht 1</a>
<
a href="#" class="show" data-id="2">Bericht 2</a>
<
div id="dialog" class="dialog">
    <
div id="message">
    </
div>
</
div>

<!--
script -->
<
script type="text/javascript">
    $("a.show").on("click", function(e) {
        e.preventDefault;
        $.ajax({
            url: 'test.php',
            type: 'get',
            data: {id: $(this).data('id')},
            dataType: 'html'
        })
        .
done(function(d) {
            $("#message").html(d);
            $("#dialog").dialog();
        })
        .
fail(function(){
            alert('Oops');
        });
// let op method chaining!!
        
        return false;
    });
</
script>
Gewijzigd op 12/11/2014 19:34:01 door Ger van Steenderen
 
Johnny Cash

Johnny Cash

12/11/2014 21:16:40
Quote Anchor link
Bedankt Ger voor je heldere uitleg!!

Het werkt zoals je hebt geschetst. Ik heb er even met geëxperimenteerd.
Op die test.php pagina die ingeladen wordt wil ik nu ook een eenvoudig nieuwsbrief formulier plaatsen waarbij de afhandeling van het formulier dan weer via Ajax gebeurd zodat een gebruiker gewoon op de pagina blijft.

In welke functie zet ik dan deze post request naar het afhandelingsscript?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

13/11/2014 17:14:37
Quote Anchor link
Ook in [pre]$.ajax()[/pre], je verandert dan alleen het type en eventueel de url:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
$.ajax({
    url: 'news.php',
    type: 'post',
    dataType: 'html',
    data: $("#news_form).serialize()
})
.
done(function(h) {
    alert(h);
});

Dus een id aan je formulier hangen en dit aan een klik event van een button (met type="button") of een a toekennen.
Gewijzigd op 13/11/2014 17:15:22 door Ger van Steenderen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.