Jag bloggar numera på http://blog.dileno.com ».

Prenumerera på RSS

Arkiv för JavaScript:

Hur du visar modalt popupfönster vid postback med jQuery och ASP.NET

Jag skrev nyligen om hur du kan använda dig av jQuery och SimpleModal för att smidigt skapa modala popupfönster. Jag visade även hur du skulle integrera SimpleModal med ASP.NET Web Forms. Nu tänkte jag visa dig hur du gör för att visa ett modalt popupfönster vid sidladdning i ASP.NET, vid exempelvis en postback.

Om du vill att ett modalt popupfönster ska visas direkt vid postback så behöver du köra ett script i metoden som anropas vid postback. Det finns flera sätt att göra det på, exempelvis genom att använda dig av ClientScriptManager.RegisterClientScriptBlock eller helt enkelt visa en tidigare dold PlaceHolder med JavaScript i sig.

Det viktiga när du kör scriptet är att du använder dig av jQuerys $(document).ready()-funktion. Om du inte gör det, så kommer du att få ett Operation Aborted-fönster som leder till ett Sidan kan inte visas-meddelande i Internet Explorer.

Så här använder du $(document).ready() för att undvika problem i Internet Explorer:

$(document).ready(function () {
$('.modalwindow').modal({ position: ["15%", "25%"] });
});

Modala popupfönster med SimpleModal och ASP.NET

Jag skrev tidigare om hur man använder SimpleModal och jQuery för att skapa modala popupfönster. Vill du använda dig av SimpleModal-pluginet i en ASP.NET Web Forms-applikation så kan du stöta på problem.

Det SimpleModal gör är att lägga till kod för modalt popupfönster till body, vilket inte fungerar med ASP.NET Web Forms-tänket. Bland annat så slutar postbacks att fungera. Detta har att göra med att det modala popupfönstret helt enkelt ligger utanför <form runat="server">-taggen.

För att lösa detta problem behöver man gå in i källkoden för SimpleModal och ändra så att modala popupfönster läggs till form-taggen i stället för body-taggen.

Jag själv använder den packade varianten av SimpleModal (hittas på nedladdningssidan för pluginet) och det enda jag behövde göra var en sök och ersätt där jag ersatte body med form.

Skapa modala popupfönster med jQuery och SimpleModal

Med modala popupfönster ges möjlighet att fokusera specifikt innehåll för användaren. Detta har gjort att modala popupfönster varit intressant i flera år och fortsätter att vara det.

Exempel SimpleModalMed hjälp av det utmärkta JavaScript-biblioteket jQuery och SimpleModal-pluginet kan man väldigt enkelt skapa sina egna modala popuper, i stället för att skriva egen kod.

Det enda som behövs är att ladda ner senaste versionen av jQuery och SimpleModal, inkludera JavaScript-filerna och sedan köra denna kod i en separat JavaScript-fil:

$(document).ready(function() {
$('a#modalpopup').click(function(e) {
e.preventDefault;
$('div#mypopup').modal({ position: ["15%", "25%"] });
});
});

Koden ovan kräver att du har följande HTML-kod:

<a href="#" id="modalpopup">Öppna popup</a>

<div id="mypopup">...</div>

<div id="simplemodal-overlay"></div>
<div id="simplemodal-container"></div>

De två sista div:arna är till för lagerhanteringen för det modala fönstret och bör egentligen skapas programmatiskt med JavaScript.

 

Skapa en modifierad knapp i TinyMCE

TinyMCE är en texteditor som är enkel att integrera in i webbapplikationer. Det finns mycket goda möjligheter till att anpassa editorn efter eget tycke. I detta inlägg visar jag dig hur du skapar en knapp för att infoga specifik kod för markerad text i TinyMCE.

Jag ville ha möjligheten att markera text i ett formulärfält, trycka på en knapp i TinyMCE-fältet och förändra den markerade texten. I mitt fall ville jag kunna lägga in den markerade texten i <code>.

Använd avancerat tema och setup-alternativet

TinyMCE är väldokumenterat och jag hittade kod för att skapa en modiferad knapp. Det som behövs för att kunna skapa en egen knapp i TinyMCE är att i tinyMCE.init använda sig av avancerat tema och setup-alternativet, så här:

<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "advanced",
theme_advanced_buttons1: "codebtn,|,bold,italic,underline,strikethrough,|,bullist,numlist,undo,redo,link,unlink",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",

setup: function(ed) {
ed.addButton("codebtn", {
title: "Code sample",
image: "js/tiny_mce/themes/advanced/img/code.png",
onclick: function() {
ed.selection.setContent("<code>" + ed.selection.getContent() + "</code>");
}
});
}
});
</script>

Det jag gör i koden ovan är att:

  • skapa en knapp som heter codebtn
  • ge knappen ett antal egenskaper, såsom en titel, en ikon och en onclick-händelse
  • lägga till knappen i fältet theme_advanced_buttons1, så att knappen syns i TinyMCE-fältet

Metoder i TinyMCE och mitt resultat

I onclick-händelsen så fick jag leta i dokumentationen och hittade en sida med alla metoder i TinyMCE. Jag använde mig av metoden getContent för att lägga in markerad text i en <code>-tagg.

Resultatet av min modifierade knapp:

Exempel på en modifierad knapp i TinyMCE

Mer om TinyMCE

Du kan ladda ner och läsa mer om TinyMCE på hemsidan: http://tinymce.moxiecode.com/.

Att fokusera ett formulärfält inuti en container som är dold

Att med JavaScript-kod försöka förändra ett objekt i en container (exempelvis en div) som är dold, är inte helt enkelt. Det fungerar bra i Firefox och flera andra webbläsare - men inte i Internet Explorer (version 6 och 7).

Jag använde följande JavaScript-kod för att fokusera ett formulärfält:

if (objTextfield) objTextfield.focus();

I Internet Explorer fick jag detta felmeddelande:

Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.

För att komma runt problemet kan man använda sig av felhantering med try catch i JavaScript, så här:

try {
	if (objTextfield) objTextfield.focus();
}
catch (err) { }

Till sidhuvudet

Clicky Web Analytics