Archive for the 'ajax' Category

April 23
like we need another lightbox
posted by mike at 10:14 am

so I love all the lightbox stuff out there, everyday there seems to be another one popup (pardon the pun) on ajaxian. What I dont like is there dependence on the relation tag, and how complicated they can get. So I made my own SimpleModal.js, basic gist is you call it from js, and you send it what ever content you want in it. This gives me more flexibility say to call some ajax to do a save on lightbox close.

heres the js

PLAIN TEXT
JAVASCRIPT:
  1. function simpleModal(c,s,ci)
  2. {
  3.     this.content = c;
  4.     this.closescript = s;
  5.     this.closeicon =ci;
  6. }
  7. simpleModal.prototype = {
  8.     openWindow:function()
  9.     {
  10.         this.getScroll();
  11.         this.setScroll(0,0);
  12.  
  13.         this.hideSelects(true);
  14.         bod = document.getElementsByTagName('body')[0];
  15.         overlay = document.createElement('div');
  16.         overlay.id  = 'modalOverlay';
  17.         lb  = document.createElement('div');
  18.         lb.id = 'modal';
  19.         lb.innerHTML += '<div style="text-align:right"><a href="javascript:'+this.closescript+';" style="">'+(this.closeicon!=''?'<img src="' + this.closeicon + '" border="0" alt="close" />':'X') + '</a></div>'+this.content;
  20.         
  21.         bod.appendChild(overlay);
  22.         bod.appendChild(lb);
  23.         
  24.         document.getElementById('modal').style.marginLeft=((document.body.clientWidth - document.getElementById('modal').clientWidth)/2)+'px';
  25.         document.getElementById('modal').style.display='block';
  26.       
  27.     }
  28.     ,
  29.     closeWindow:function()
  30.     {
  31.        this.hideSelects(false);
  32.        document.getElementById('modal').style.display='none';
  33.        bod = document.getElementsByTagName('body')[0];
  34.        bod.removeChild(document.getElementById('modalOverlay'));
  35.        bod.removeChild(document.getElementById('modal'));
  36.     }
  37.  
  38.      ,
  39.     // borrowed from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
  40.     /*---------------------------------------------------------------------------------------------*/   
  41.     hideSelects: function(visibility){
  42.         selects = document.getElementsByTagName('select');
  43.         for(i = 0; i <selects.length; i++) {
  44.         try{
  45.             selects[i].style.visibility = visibility;
  46.             }catch(err){}
  47.         }
  48.     },
  49.    
  50.     getScroll: function(){
  51.         if (self.pageYOffset) {
  52.             this.yPos = self.pageYOffset;
  53.         } else if (document.documentElement && document.documentElement.scrollTop){
  54.             this.yPos = document.documentElement.scrollTop;
  55.         } else if (document.body) {
  56.             this.yPos = document.body.scrollTop;
  57.         }
  58.     },
  59.    
  60.     setScroll: function(x, y){
  61.         window.scrollTo(x, y);
  62.     }
  63.    
  64.     /*----------------------------------------------------------------------------------------------*/
  65.    
  66. }

heres the css

PLAIN TEXT
HTML:
  1. #modalOverlay{
  2.     position:absolute;
  3.     top:0;
  4.     left:0;
  5.     width:100%;
  6.     height:100%;
  7.     z-index:5000;
  8.     background-color:#000;
  9.     -moz-opacity: 0.8;
  10.     opacity:.80;
  11.     filter: alpha(opacity=80);
  12. }
  13.  
  14. #modalOverlay[id]{
  15.     position:fixed;
  16. }
  17.  
  18. #modal{
  19.     position: absolute;
  20.     z-index:9999;
  21.     height:inherit;
  22.     border:10px solid #555555;
  23.     background:#FDFCE9;
  24.     text-align:left;
  25.     top: 40px;
  26.     left: 0;
  27.     width: inherit;
  28.     margin: 0 auto;
  29.     disply:none;
  30. }
  31.  
  32. #modal[id]{
  33.     position:fixed;
  34. }

and some implementation code

PLAIN TEXT
JAVASCRIPT:
  1. var uploader = new simpleModal('<iframe src="uploadfile.aspx" width="300" height="200" />','CloseUploadFile()','images/close.gif');
  2.  
  3. function UploadFile()
  4. {
  5.      uploader.openWindow();
  6. }
  7.              
  8. function CloseUploadFile()
  9. {
  10.     uploader.closeWindow();
  11.     <%=this.UpdateJS%>;
  12.     //in my case UpdateJS makes an Asp.Net Ajax postback
  13. }

No Comments || Topcs: General, ajax, .net, javascript

 
March 27
asp.net ajax, its a hack but it works?
posted by mike at 12:23 pm

so when I started fooling around w/ asp.net ajax... back when it was called atlas... I would talk w/ fellow developers and say "well it seems like a hack, but it works". We even talked about starting an asp.net ajax blog... and calling it that... because atlas felt like a total hack when ever you wanted to do something out of their "hey drop it in an update panel" mantra.

well today I found something that reminded me very much of that feeling.... it kind of goes along w/ the key up issue that came up last week. This time I'm making a custom control, to do essentially what the titles on pageflakesdo, allow some one to click on a section of text, edit it, on blur flip it back to text, and fire an ajax postback.... I had done this a while ago... but guess didnt test it so much... because i just found that if you didnt change the text, but just blured it wouldnt fire the event. Essentially what I found was the "ontextchange" event was doing exactly as described, it would only fire when the control was blured, and changed.

so I hacked this.

PLAIN TEXT
C#:
  1. txtEdit.Attributes.Add("onblur","$get('" + txtEdit.ClientID + "').value+=' ';" + this.Page.GetPostBackEventReference(txtEdit));

doh

No Comments || Topcs: General, ajax, asp.net

 
March 21
asp.net ajax postback on keyup
posted by mike at 9:30 pm

so I got a question from some one via the cmap group, for some help with a kind of tricky asp.net ajax problem. So they had been using a pagemethod, to retrieve a list from a web service to update a datalist. Sounds simple enough... but the problem w/ using web services from client code in asp.net ajax is that the page method, which although it exists in the codebehind of a page, and used to be accessable from the instance of the page in atlas, now has to be static... anywho.... so the problem is if you call a webservice in client js, its hard to do things like bind a datalist...

so my solution/kludge was to add the postback js call of a control, to the onkeyup js event of the textbox. Basicly forcing the textbox to do a asp.net postback on a keyup (really this should be only posted back like every 3 key ups...)

heres the aspx

PLAIN TEXT
CODE:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="onkeyuppostback.aspx.cs" Inherits="onkeyuppostback" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>Untitled Page</title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <div>
  12.     <asp:ScriptManager runat="server" ID="smTest" EnablePartialRendering="true"></asp:ScriptManager>
  13.         <asp:TextBox runat="server" ID="txtTest" AutoPostBack="True" OnTextChanged="txtTest_TextChanged"></asp:TextBox>
  14.     <asp:UpdatePanel runat="server" ID="upTest">
  15.         <ContentTemplate>
  16.             &nbsp;
  17.         <asp:DataList runat="server" ID="dlTest" Width="207px">
  18.             <ItemTemplate>
  19.                 <%# Container.DataItem %>
  20.             </ItemTemplate>
  21.         </asp:DataList>     
  22.         </ContentTemplate>
  23.         <Triggers>
  24.             <asp:AsyncPostBackTrigger ControlID="txtTest" />
  25.         </Triggers>
  26.     </asp:UpdatePanel>
  27.     </div>
  28.     </form>
  29. </body>
  30. </html>

and here is the cs

PLAIN TEXT
C#:
  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Collections;
  5. using System.Web;
  6. using System.Web.Security;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;
  9. using System.Web.UI.WebControls.WebParts;
  10. using System.Web.UI.HtmlControls;
  11.  
  12. public partial class onkeyuppostback : System.Web.UI.Page
  13. {
  14.     protected void Page_Load(object sender, EventArgs e)
  15.     {
  16.        txtTest.Attributes.Add("onkeyup", this.GetPostBackClientEvent(this.txtTest,string.Empty));
  17.     }
  18.  
  19.     protected void txtTest_TextChanged(object sender, EventArgs e)
  20.     {
  21.         dlTest.DataSource = System.DateTime.Now.ToString();
  22.         dlTest.DataBind();
  23.     }
  24. }

so yah kind of kludgy, but is an option in general for doing something in js, which will force a asp.net ajax updatepanel postback... for example, add a button somewhere, have it w/ a style display:none;, then on serverside create a js function that calls its postback function.

2 Comments || Topcs: General, geek, c#, ajax, asp.net