[Løst] jQuery "external" popup

[Rigo]

Hei, jeg kan så å si ingenting om jQuery og har derfor ikke noe kode å vise fram, men skal prøve å forklare hva jeg ser etter.

 

Jeg er noe lei av å ha "popups" kun gjemt, så de er synlige i kildekoden og blir lastet ved sidelasting. Det jeg ønsker er at man har noe som koden nedenfor, også åpner den filen som er linket til som en popup.

<a href="fil.html">Link</a>

Har sett at det er mulig å gjøre det på en måte ved å bruke en data attributt, men jeg har ingen idé om hvordan dette gjøres selv.

 

Er det noen som har noe jeg kan basere dette på/kan noe lignende det her? Blir litt mye å ha 20 gjemte popups per side, ettersom dette tar tid å laste inn for å bli usynlig uansett.

 

Takk for all hjelp!

Endret 18. september 2012 av Rigo

[Wedvich]

Litt usikker på hva du mener, men for å åpne en fil i et nytt vindu/ny fane kan du bruke target attributten i HTML:

 

<a href="fil.html" target="_blank">Link</a>

[Rigo]

Tenkte på når du for eksempel trykker på "Logg inn" knappen her på Diskusjon, så popper det opp en boks midt på siden, uten at den refresher siden.

 

Takk for svar!

[Crowly]

Mulig jQuery UI Dialog + ajax er det du er på jakt etter: http://jqueryui.com/demos/dialog/

 

F.eks noe ala dette

Javascript:

function popup() {
$.post('popup.php', function(data) {
 $('#popup').html(data).dialog();
});
}

 

Html

<div id="popup" style="display: none"></div>
<a href="javascript: popup()">Klikk</a>

[Rigo]

Da er vi tilbake til at den blir liggende synlig i kildekoden og blir lastet ved sidelasting. Er noe lignende den løsningen der jeg har brukt før, men når jeg da skal ha 20 "popups" på en side, så vil det gå utover hvor raskt siden kommer til å laste.

 

Det jeg tenkte meg er at popupen ikke blir lastet før man trykker på selve linken. Har sett at dette er mulig, men vet ikke annet enn at han hadde en link lignende den nedenfor.

 

<a href="fil.html" data="fil.html">Link</a>

Endret 20. september 2012 av Rigo

[Crowly]

Metoden jeg beskriver vil ikke åpne noen popup før du klikker på linken, og først da blir innholdet til popup'en hentet fra serveren.

[Rigo]

Er ikke det jeg sier heller. Det jeg sier er at popupen ligger skjult i kildekoden. Den blir lastet ved sidelastning, og blir deretter skjult. Den er altså med på siden, bare at den er skjult. Metoden jeg ønsker er at den IKKE lastes før man trykker på linken.

[Wedvich]

Metoden til Crowly gjør ikke at popupen ligger skjult i kildekoden. Det eneste "ekstra" som ligger i kildekoden, og som lastes når siden vises, er én linje med tekst på ~40 byte:

 

<div id="popup" style="display: none"></div>

 

Du må ha ganske mange sånne linjer for at det i det hele tatt får en målbar effekt på hvor lang tid siden bruker på å laste inn. Innholdet i popupen (struktur, tekst, bilder, whatever) lastes ikke før man faktisk trykker på linken, og blir dermed ikke hentet inn mens selve siden lastes.

 

Men hvis du får svartedøden av å ha den linjen i HTML'en, kan du også bare ha linken slik og gjøre alt inni skriptet:

 

<a href="fil.html" id="linktilfil">Link</a>

 

$(function () {
$('#linktilfil').click(function (event) {
	event.preventDefault();
	$.post($(this).attr('href'), function (data) {
		$(data).dialog();
	});
});
});

 

I og for seg funksjonelt, men ikke noen god måte å gjøre det på. Bør ha en container et sted på siden som dialogen kan lastes inn i, slik som i eksempelet til Crowly.

 

Hvis dette fremdeles ikke er det du ser etter, har du noen link eller kildekode til eksempelet du sikter til? Hadde vært litt lettere å forklare fremgangsmåten om vi kunne se løsningen som er valgt der.

[Rigo]

Har fått tilgang til jQuery skriptet til han jeg så gjøre dette, men som sagt så kan jeg ikke jQuery, og forstår dermed veldig lite av det. Uten at jeg skal poste hele skriptet, så er det her en bit som ser relativt viktig ut.

$("a[rel=ord]").live('click', function(a){
var src = $(this).attr('data');
$.get(src, function(data){
 overlay(true, data);
});
a.preventDefault();
});

 

Til tross for at jeg har en link som ser sånn her ut, så funker det altså ikke av en eller annen rar grunn.

<a href="#" rel="ord" data="fil.html">Link</a>

Så senest i sta at dette funket, så rart at det ikke funker for meg..

 

Jeg har ikke noe problem med å ha det liggende skjult, bare at når jeg skal ha 20 popups på en side og alle skal ha en form i seg hver med 5 tekstbokser++ så blir det mye som lastes.

[Crowly]

Da bør du nok lære litt mer om jQuery først, f.eks fra http://w3schools.com...ry/default.asp. Den siden ga meg en grei innføring når jeg begynte å se på jQuery, men kommer sikkert litt an på hvor mye kan fra før av om hvor god den er.

 

Har du lagt til jQuery? En linje tilnærmet dette: <script type="text/javascript" src="path/til/jquery.js"></script>

Det lille eksemplet fungerte bra for meg.

Endret 21. september 2012 av Crowly

[Rigo]

Har det her i <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jqueryfilen.js"></script>

[Crowly]

Da bør det fungere fint. Du kan legge til noen alerts eller console.log for å se hva som skjer

 

$("a[rel=ord]").live('click', function(a){
var src = $(this).attr('data');
alert(src); // alternativt console.log(src);
$.get(src, function(data){
 alert(data); // alternativt console.log(src);
 overlay(true, data);
});
a.preventDefault();
});

[Rigo]

Funker ikke for meg. Har testet ut andre jQuery ting, som å lage en alert, noe som funker fint. Kan ihvertfall konkludere med at jQuery er på plass. Hvorfor det funker for deg, og ikke meg er ikke godt å si..

 

Edit: Får opp en alert som sier fil.html når jeg trykker på linken, men dette er ikke akkurat det jeg så for meg. Tenkte mer på en løsning der den hentet innholdet i fil.html og viste dette som en "popup"

Endret 21. september 2012 av Rigo

[Crowly]

Alert'en (som er ren javascript og ikke jQuery) er kun for debugging, for å sjekke at jQuery henter frem riktig verdi og for å se hva som blir returnert fra fil.html. Det fungerer fint, det som ikke ser ut til å fungere er overlay funksjonen.

 

Har modifisert det litt, så det blir mer tilsvarende mitt forrige eksempel:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$("a[rel=ord]").live('click', function(a){
var src = $(this).attr('data');
$.get(src, function(data){
 $('#popup').html(data).dialog({
title: 'Popup'
 });
});
a.preventDefault();
});
</script>
</head>
<body>
<a href="#" rel="ord" data="temp.php">Link</a>
<div id="popup" style="display: none;"></div>
</body>
</html>

 

Du må evt endre temp.php til en eksisterende fil, eller opprette temp.php og legge til noe innhold.

Kan testes her: http://crowly.kicks-ass.net/test.php

 

Og det ser ut til at du må lære deg javascript og slikt.

Endret 22. september 2012 av Crowly

[Rigo]

Takk for all hjelp! Får leke litt rundt med det

 

Får forresten ikke "skriptet" du ga meg til å funke i det hele tatt. Ingenting skjer når jeg trykker på linken

Endret 22. september 2012 av Rigo

[Crowly]

Da må du sjekke nettleseren din, om javascript er aktivert, om du har noe som blokkerer javascript osv osv eller om det er noe annet galt hos deg.

Sjekk bl.a. error console (shift+ctrl+o i Opera, shift+ctrl+j i Chrome og FF).

 

Jeg har testet den enkle siden i Opera, Chrome og FF, det fungerer i alle 3.

 

Edit: Hvis du skal modifisere ett større skript/ferdig system, så må du vite hva du driver med. Eksemplet mitt er kun for å vise hvordan en popup kan fungere, ikke for å erstatte noe i ett ferdig oppsett.

Endret 22. september 2012 av Crowly

[Rigo]

Ingenting er blokkert. Har ingen planer om å modifisere ett større skript med det første. Det er derfor jeg spør her fordi da lager jeg det "selv" og har det rimelig enkelt.

 

Sitter på en mac, så får ikke åpnet error reporting med shortcutten du nevner, men mener jeg fant fram til riktig "consoll" for errors og den er helt tom bortsett fra et ">" tegn.

Endret 22. september 2012 av Rigo

[Crowly]

Hvilken nettleser bruker du? Eller har du testet med flere for å utelukke ett nettleser problem?

[Rigo]

Tenkte jeg ikke på.. Sitter på en mac og bruker i hovedsak Chrome, så det er i den det ikke funker. Funker fint i Safari da.. Rart

 

Fikk det skriptet jeg fikk av han som har fått til det her til å funke! Lasta det opp på en webserver og det gjorde tydeligvis susen. Virker som om den ikke fikk tak i filen, fordi jeg prøvde et annet skript lokalt og den fikk heller ikke henta opp den filen da.

 

Igjen, takk for all hjelp!

Endret 23. september 2012 av Rigo