D.R.Y. code: jquery

Showing posts with label jquery. Show all posts

Monday, May 18, 2009

jquery ajax load

here is the content page (Load.aspx) ...

    6 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    7     <style>

    8         .otherPage{border:solid 1px black; background:#eee; margin:5px; padding:5px;}

    9     </style>

   10     <script language="javascript">

   11         $(document).ready(function() {

   12             LoadHtml();

   13         });

   15         function LoadHtml() {

   16             $("#feeds").load("feeds.html");

   17         }

   18     </script>

   19 </asp:Content>

   20 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

   21     <span>this is in load.aspx</span>

   22     <div id="feeds" class="otherPage" ></div>

   23 </asp:Content>

here is the feeds.html

    2 <html xmlns="http://www.w3.org/1999/xhtml" >

    3 <head>

    4     <title></title>

    5 </head>

    6 <body>

    7     <div >

    8         <i>this is from feeds.html</i>

    9         <b>45</b> feeds found.

   10     </div>

   11 </body>

   12 </html>

the master page ....

    8     <script src="http://www.google.com/jsapi"></script>

    9     <script type="text/javascript">

   11         // Load jQuery

   12         google.load("jquery", "1.3.2");

   13         google.load("jqueryui", "1.7.1");

   14         google.load("yui", "2.7.0");

   16         google.setOnLoadCallback(function() {

   17             // Your code goes here.

   18         });

   19     </script>

result (Load.aspx) ...

this is in load.aspx

this is from feeds.html
45 feeds found.

Friday, May 15, 2009

jquery output

  184         <div id="output"></div>

  201     <script language="javascript">

  202         $(document).ready(function() {

  203             $('.disclaimer').click(function() {

  204                 $("#output").text($("#output").text() + "******* ");

  205             });

  206         });

  207     </script>

   41 </body>

   42 <script src="http://www.google.com/jsapi"></script>

   43 <script type="text/javascript">

   44     // Load jQuery

   45     google.load("jquery", "1.3.2");

   46     //google.load("jqueryui", "1.7.1");

   47     //google.load("yui", "2.7.0");

   48     google.setOnLoadCallback(function() {

   49         // Your code goes here.

   50     });

   51 </script>

   52 <asp:ContentPlaceHolder ID="javascript" runat="server">

   53 </asp:ContentPlaceHolder>

   54 </html>

Tuesday, May 12, 2009

jquery validation

  127 <asp:Content ID="Content3" ContentPlaceHolderID="javascript" runat="server">

  128     <script type="text/javascript">

  129         $.validator.addMethod("lettersonly", function(value, element) {

  130             return this.optional(element)  /^[a-z]+$/i.test(value);

  131         }, "Letters only please");

  133         $(document).ready(function() {

  134             $('form').validate({

  135                 errorLabelContainer: "#errorMessageBox"

  136                 , wrapper: "li"

  137                 , errorClass: "invalid"

  138                 //, submitHandler: function() { alert("Submitted!") }

  139             })

  140             $('#<%=FirstName.ClientID %>').rules("add", {

  141                 minlength: 2

  142                 , required: true

  143                 , lettersonly : true

  144                 , messages: {

  145                     minlength: jQuery.format("At least {0} characters are required for the first name")

  146                     , required: "First name is required"

  147                 }

  148             });

  149             $('#<%=LastName.ClientID %>').rules("add", {

  150                 minlength: 2

  151                 , required: true

  152                 , lettersonly: true

  153                 , messages: {

  154                     minlength: jQuery.format("At least {0} characters are required for the last name")

  155                     , required: "last name is required"

  156                 }

  157             });

  158         });

  159     </script>

  160 </asp:Content>

   19                 <div>

   20                     <ul id="errorMessageBox"></ul>

   21                 </div>

   22                 <div class="clear"></div>

   23                 <label>

   24                     <asp:Label ID="lblFirstName" runat="server"

   25                         Text="<%$ Resources:Resource,LabelFirstName%>"></asp:Label>

   26                 </label>

   27                 <asp:TextBox ID="FirstName" runat="server" class="normal" MaxLength="50"></asp:TextBox><br />

   28                 <label>

   29                     <asp:Label ID="lblLastName" runat="server"

   30                         Text="<%$ Resources:Resource,LabelLastName%>"></asp:Label>

   31                 </label>

   32                 <asp:TextBox ID="LastName" runat="server" class="normal" MaxLength="50"></asp:TextBox><br />

here is the css ...

   95 /*validation part*/

   96 label.invalid { float: none; text-align: left; width: 100%; color:#ee3333; font-weight:normal; padding: 3px 0px; }

   97 input.invalid { background-color:#FFeeee; color:#ee3333; }

   98 select.invalid { background-color:#FFeeee; border:3px double #ff9999; color:#ee3333; }

   99 #errorMessageBox { margin-bottom: 15px;  }

  100 #errorMessageBox li { margin: 0px 40px 0px 40px; padding: 5px 20px; color:#ee3333; background: #FFeeee;
  101 text-transform: none; list-style-type: disc; list-style-position: inside;}

  102 #errorMessageBox label { text-transform: none; }

Monday, May 11, 2009

using jquery tips

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
 
tip #1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>



http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.js

http://code.google.com/apis/ajaxlibs/documentation/index.html#jqueryUI

google.load("jquery", "1.3.2");
 google.load("jqueryui", "1.7.1");
 google.load("prototype", "1.6.0.3");
 google.load("scriptaculous", "1.8.2");
 google.load("mootools", "1.2.2");
 google.load("dojo", "1.3.1");
 google.load("swfobject", "2.1");
 google.load("yui", "2.7.0");

Tuesday, May 5, 2009

popup and print

the javascript

  136 <script language="javascript">

  137     $(document).ready(function() {

  138         $('#<%=Submit.ClientID %>').click( function() {

  139             popitup('../Public/PrintRegister.aspx');

  140             return true;

  141         });

  142     });

  143     function popitup(url) {

  144         newwindow = window.open(url, 'name', 'height=600,width=750');

  145         if (window.focus) { newwindow.focus() }

  146         return false;

  147     }

  148 </script>

the button

  110 <asp:ImageButton ID="Submit" runat="server"

  111  ImageUrl="<%$ Resources:Resource,ImageSubmitPrint %>"

  112  AlternateText="<%$ Resources:Resource,ImageSubmitPrintAltText%>"

  113  OnClick="Submit_Click" />

PrintRegister.aspx

    9 <body class="" onLoad="self.print()">

   10     <form id="form1" runat="server">

   11     <div>

   12       Print stuff here

   13     </div>

   14     </form>

   15 </body>

Monday, March 2, 2009

RadioButtonList jQuery get and set

    8     <script src="http://www.google.com/jsapi"></script>

    9     <script type="text/javascript">

   11         // Load jQuery

   12         google.load("jquery", "1.3.2");

   13         google.load("jqueryui", "1.7.1");

   14         google.load("yui", "2.7.0");

   16         google.setOnLoadCallback(function() {

   17             // Your code goes here.

   18         });

   19     </script>

here is the page aspx

  
    4 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
    5     <script language="javascript">
    6         $(document).ready(function() {
    7             $('#rblDiv input').click(function() {
    8                 var selected = $("#rblDiv input:radio:checked").val();
    9                 $("#output").text(selected);
   10             });
   11             $("#btnChangeValue").click(function() {
   12                 $('#<%=RadioButtonList1.ClientID %>').find("input[value='Three']").attr("checked", "checked");
   13                 $('#rblDiv input:radio:checked').trigger('click');
   14             });
   15
   16         });  
   17     </script> 
   18 </asp:Content>
   19 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
   20     <div id="rblDiv">
   21         <asp:RadioButtonList ID="RadioButtonList1" runat="server">
   22             <asp:ListItem Value="One">1</asp:ListItem>
   23             <asp:ListItem Value="Two">2</asp:ListItem>
   24             <asp:ListItem Value="Three">3</asp:ListItem>
   25         </asp:RadioButtonList>
   26     </div>
   27     <input id="btnChangeValue" type="button" value="Change to Three" />
   28     <div id="output"></div>
   29 </asp:Content>

for the checkboxlist check out this and this post

Sunday, February 22, 2009

jquery in Asp.net

there are 2 dropdowns for the leagues and you can only select one team so when something other than select is selected on one dropdown we disable the other drop down

  226         <asp:Label ID="lblAmericanLeague" runat="server" Text="American League"></asp:Label>

  227         <asp:DropDownList ID="AmericanLeague" runat="server">

  228             <asp:ListItem Text="-Select-" Value="-1" ></asp:ListItem>

  229             <asp:ListItem Text="Chicago White Sox" Value="ChicagoWhiteSox" ></asp:ListItem>

  230             <asp:ListItem Text="Baltimore Orioles" Value="BaltimoreOrioles" ></asp:ListItem>

  231             <asp:ListItem Text="Boston Red Sox" Value="BostonRedSox" ></asp:ListItem>

  232             <asp:ListItem Text="New York Yankees" Value="NewYorkYankees" ></asp:ListItem>

  243         </asp:DropDownList><br />

  245         <asp:Label ID="lblNationalLeague" runat="server" Text="National League"></asp:Label>

  246         <asp:DropDownList ID="NationalLeague" runat="server">

  247             <asp:ListItem Text="-Select-" Value="-1" ></asp:ListItem>

  248             <asp:ListItem Text="ChicagoCubs" Value="ChicagoCubs" ></asp:ListItem>

  249             <asp:ListItem Text="AtlantaBraves" Value="AtlantaBraves" ></asp:ListItem>

  250             <asp:ListItem Text="FloridaMarlins" Value="FloridaMarlins" ></asp:ListItem>

  264         </asp:DropDownList><br />

and the jquery looks like this ...

  303 <script type="text/javascript" >

  304     $(document).ready(function() {

  305         $('#<%=NationalLeague.ClientID %>').click(function() {

  306             var SelectedVal = $('#<%=NationalLeague.ClientID %>').val();

  307             if (SelectedVal == "-1") {

  308                 $('#<%=AmericanLeague.ClientID %>').removeAttr("disabled");

  309             }

  310             else {

  311                 $('#<%=AmericanLeague.ClientID %>').val("-1");

  312                 $('#<%=AmericanLeague.ClientID %>').attr("disabled", true);

  313             }

  314         });

  315         $('#<%=AmericanLeague.ClientID %>').click(function() {

  316             var SelectedVal = $('#<%=AmericanLeague.ClientID %>').val();

  317             if (SelectedVal == "-1") {

  318                 $('#<%=NationalLeague.ClientID %>').removeAttr("disabled");

  319             }

  320             else {

  321                 $('#<%=NationalLeague.ClientID %>').val("-1");

  322                 $('#<%=NationalLeague.ClientID %>').attr("disabled", true);

  323             }

  324         });

  325     });

  327 </script>

Friday, January 30, 2009

Better menu control

sitemap.xml

    1 <?xml version="1.0" encoding="utf-8" ?>

    2 <siteMap>

    3   <siteMapNode title="Welcome" url="~/Login/Login.aspx" />

    4   <siteMapNode title="Talent" url="~/Admin/TalentPage2.aspx" />

    5   <siteMapNode title="Profile" url="~/User/Profile.aspx" />

    6   <siteMapNode title="Events" url="~/Admin/Events2.aspx" />

    7   <siteMapNode title="Contact" url="~/Login/Contact.aspx" />

    8   <siteMapNode title="Download" url="~/User/Downloads.aspx" />

    9   <siteMapNode title="Responses" url="~/SuperAdmin/ResponseView.aspx" />

   10 </siteMap>

Main.Master

  110 <div id="navigation" class="right rclear">

  111     <div id="menu-container" class="right">

  112         <ul id="menu">

  113             <asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">

  114                 <ItemTemplate>

  115                     <li runat="server" id="item" class="item"

  116                         visible='<%# this.CanNavigate(Eval("url"))  %>'>

  117                         <asp:HyperLink ID="hl" runat="server"

  118                             NavigateUrl='<%# Eval("url") %>'

  119                             Text='<%# Eval("title") %>' />

  120                     </li>

  121                 </ItemTemplate>

  122             </asp:Repeater>

  123         </ul>

  124     </div>

  125 </div>

...

  138 <asp:XmlDataSource ID="XmlDataSource1" runat="server"

  139     DataFile="~/Master/siteMap.xml" ></asp:XmlDataSource>

Main.Master.cs

   21 protected bool CanNavigate(object o)

   22 {

   23     string url = o.ToString();

   24     IPrincipal p = HttpContext.Current.User;

   25     bool bReturn = UrlAuthorizationModule.CheckUrlAccessForPrincipal(url, p, "get");

   26     if (Talent.IsAdminOrBetter(p) && url.EndsWith("Profile.aspx"))

   27     {

   28         bReturn = false;

   29     }

   30     if (p.Identity.IsAuthenticated && url.EndsWith("Login.aspx"))

   31     {

   32         bReturn = false;

   33     }

   34     return bReturn;

   35 }

credit to this stackoverflow post for the jquery script that will set the 'active' menu item class

Main.Master

   59 <script type="text/javascript">

   60     $(document).ready(function() {

   61         markActiveLink()

   62     });

   63     function markActiveLink() {

   64         //Look through all the links in the menu

   65        $("li.item a").filter(function() {

   66           //Take the current URL and split it into chunks at each slash

   67           var currentURL = window.location.toString().split("/");

   68           //return true if the bit after the last slash is the current page name

   69           return $(this).attr("href") == currentURL[currentURL.length-1];

   70         //when the filter function is done, you're left with the links that match.

   71         }).addClass("active");

   72         //Afterwards, look back through the links. If none of them were marked,

   73         //mark your default one.

   74         if ($("li.item a").hasClass("active") == false) {

   75             $("li.item:nth-child(1) a").addClass("active");

   76         }

   77     }

   78 </script>

looks like this in then end when logged in as an admin

Tuesday, December 2, 2008

jQuery Hello Goodbye

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

    $(".notice").fadeOut("slow");

    $("button").click(function () {

        $(".notice").fadeIn("slow");

        $(".notice").fadeOut("slow");

});

});

</script>

<style>

html { height: 100%; margin-bottom: 1px; }

.basic, .notice { padding: .8em; margin-bottom: 1em; border: 2px solid #dddddd; }

.notice { background: #FFF6BF; color: #817134; border-color: #FFD324; }

</style>

<div id="main">

    <button>Click Me!</button>

    <div class="basic" style="position:relative; width:550px;height:150px;" >

      <div class="notice" style="position:absolute; top:10px;left:10px;width:450px;">

          <p>Hello</p>

          <p>Goodbye</p>

      </div>

    </div>

end

</div>

click here to see it in action.

Monday, November 17, 2008

jQuery UI datepicker

jQuery UI is pretty sweet. The datepicker alone is worth using.
you can demo it here.

Monday, November 3, 2008

jQuery in ASP.NET on Alt.NET

Alt.Net podcast is now on my regular playlist. This one episode gives a pretty good insight on how microsoft is changing with the times. Listen here.

Sunday, October 26, 2008

get value in JQuery

you can see it in action here
you can download the code here

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript" src="scripts/jquery.js"><script>

        <script type="text/javascript">

            $(function() {

                $("#display").click(function() {

                    var o = $("#input");

                    var s = o[0].value;

                    //alert(s);

                    var o2 = $("#output")

                    o2.val(s);

});

});

        <script>

    <head>

    <body>

        <input id="input" type="text" value="" />

        <button id="display">display<button>

        <input id="output" type="text" value="" />

    <body>

<html>

Search

D.R.Y. code