Advertisements
RSS

Tag Archives: AJAX

Updating Select Options using JQuery


So you implemented a webservice that return an ArrayList to update the Select Option.


Public Shared Function UpDateSelectList(ByVal sThemeID As String) As ArrayList


You can use the jQuery $.ajax to call the webservice


$.ajax({
type: "POST",
url: swebserviceURL,
data: oData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: jsGetArrayListSucess,
failure: function (response)
{
alert("An error was encountered");
}
});


In the callback function you need go through the array list to create an option item and add it to the Select Options


function jsGetArrayListSucess(response)
{
try
{
var DictionaryItems = response.d;
if (DictionaryItems == null || typeof (DictionaryItems) != "object") {
return;

}

var myDropDownList = $get('SelectList');
myDropDownList.options.length = 0;
myDropDownList.options[0] = new Option("Select ", 0);
for (var i = 0; i < DictionaryItems.length; ++i)
{
myDropDownList.options[myDropDownList.options.length] = new Option(DictionaryItems[i].Text, DictionaryItems[i].Value);
}

}
catch (err)
{

}
finally
{

}
}

Advertisements
 
Leave a comment

Posted by on March 3, 2011 in Programming

 

Tags: , , , , ,

C#: Bind a DropDownList to IDictionary using AjaxPro

Implement an AjaxMethod to return IDictionary object

 

[AjaxPro.AjaxMethod]

public IDictionary AjaxGetIDictionary()

{

//Prepare the IDictionary object

}

– Use JavaScript to request the AjaxMethod AjaxGetIDictionary

MyAjaxClass. AjaxGetIDictionary (jsAjaxGetIDictionary_Callback);

– In the JavaScript function jsAjaxGetIDictionary_Callback add the IDictionary items to the DopDownList

function jsAjaxGetIDictionary (response)

{

     try

    {

         var DictionaryItems= response.value;

         if (DictionaryItems == null || typeof(DictionaryItems) != “object”)

        {

               return;

         }

         var myDropDownList = document.getElementById(“myDropDownList”);

         myDropDownList.options.length = 0;

         for (var i = 0; i < response.value.length; ++i)

         {

             myDropDownList.options[myDropDownList.options.length] = new Option(response.value[i].Value,response.value[i].Key);

           }

    }

    catch(e)

   {

   }

}

 
Leave a comment

Posted by on May 1, 2009 in Programming

 

Tags: , , , , , , , , ,

Firefox 2.0 – InnerHTML issue

Sorry about the long time between posts. Hope to start posting again soon

 

Anyhow,

 

I was working on a web application that is updating the details of a <map> HTML element using the innerHTML, the new innerHTML value is being processed in the server side using AJAX function

 

I was using the following JavaScript function to do that

 

function jvUpdateImageMap(ImageMapHTML) 

{

    try

    {

          document.getElementById(“MyImageMap”).innerHTML= ImageMapHTML;

           

     }

catch(err)

          {

          }

          finally

          {

          }

}

 

That was working fine for all the browser including Firefox 3.0 but not for Firefox 2.0

 

After debugging this I found that for FireFox 3.0 the result of updating the InnerHTML is this

 

  <map id=”MyImageMap” >

          <area SHAPE=”rect” id=”0_30″ usemap=”MyImageMap” Border=”0″ href=”#” COORDS=”538,420,550,408″ />

 </map>

 

 

This is the correct expected result

 

But for FIreFox 2.0 the result was this

 

<map id=”MyImageMap” >

<map id=”MyImageMap” >

          <area SHAPE=”rect” id=”0_30″ usemap=”MyImageMap” Border=”0″ href=”#” COORDS=”538,420,550,408″ />

</map>

</map>

 

 

So to fix this I had to add those lines to the server side function that generate the new <map> HTML code  

If Context.Request.Browser.Browser = “Firefox” Then

       If Context.Request.Browser.MajorVersion = “2” Then

               ImageMapHTML = ImageMapHTML.Replace(“<map id=””MyImageMap”” >”, “”)

                ImageMapHTML = ImageMapHTML.Replace(“</map>”, “”)

        End If

End If

 

 
Leave a comment

Posted by on December 4, 2008 in General, Photography

 

Tags: , , , , , , , , , , , , , , , , ,

Using PageMethods/WebMethods to update Sessions variable

I created functions for updateing/reading sessions variables using PageMthods and WebMethods, I am using VS2005 (VB.NET):

 

Import the web.services library

  Imports System.Web.Services 

 

This is the VB.NET function for setting the session variables

           <WebMethod()> _

Public Shared Function AjaxSetSession(ByVal SessionValue As String)

                    Try

                             HttpContext.Current.Session(“SessionKey”) = SessionValue

                   Catch ex As Exception

 

                   End Try

          End Function

 To access the session we need to use HttpContext.Current.Session

 

This is the VB.NET function for getting the session variables

       <WebMethod()> _

          Public Shared Function AjaxGetSession() As String

                    Try

                             AjaxGetSession = HttpContext.Current.Session(“SessionKey”)

                    Catch ex As Exception

                             AjaxGetSession = “Error”

                    End Try

    End Function

 

This is the JavaScript Code to set the session variable

 

PageMethods.AjaxSetSession(“PageMethods”,”WebMethods”)

This the JavaScript Code to read the Session Variables

 

PageMethods.AjaxGetSession(JSGetSessionSucess,JSGetSessionFaild);

 

JSGetSessionSucess is a JavaScript function that would be executed if the AjaxGetSession succeeded

 

       function JSGetSessionSucess(value, methodName)

      {

               try

              {

                        alert(value);

                }

catch(err)

               {

               }

               finally

               {

              }

      }

 

JSGetSessionFaild is a JavaScript function that would be executed if the AjaxGetSession failed

        function JSGetSessionFaild (ex, methodName)

      {

               try

              {

                        alert(ex.get_exceptionType());

                }

catch(err)

               {

               }

               finally

               {

              }

      }

 

 
Leave a comment

Posted by on October 8, 2008 in General, Photography

 

Tags: , , , , , , , , , , , , , ,

Using AJAX Pro (step by step):

This is a simple guide for using the AJAX Pro in VS2003

 

1-     Add the AJAXPro.dll to your bin folder

 

         Right click on the bin folder and select “Add Reference… ”

 

 

 

         Select the browse tab and browse for the AjaxPro.dll folder to select it and click ok

 

 

2-     Add the following to your web.config file

 

<httpHandlers>

          <add verb=POST,GET path=ajaxpro/*.ashx type=AjaxPro.AjaxHandlerFactory, AjaxPro.2/>

</httpHandlers>

 

3-     Create a Class to write your Ajax functions

         Right Click on the App_Code folder and select “Add New Item…”

 

 

         Select “Class” from the templates; enter a name for your class and click Add

 

 

4-     In your class imports the AjaxPro Library and create your function as the following:

 

       <AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)> _

Public Function AjaxFunction(ByVal strVariable As String) As String

 

5-     In the ASP Page that need to use the Ajax Function:

 

         Import your Ajax Class library

         Add a function to the body onload event

<body   onload=”BodyOnLoad()”

         In the BodyOnLoad assign a variable to your class

 

function BodyOnLoad()

                    {

                       LPMyAjax = IMGSLB.MyAjax;

     }

 

 

6-     Now you can call the ajax function from JavaScript

 

    function jsCallAjax(strValue)

    {

        try

        {

           

            LPMyAjax.AjaxFunction(strValue,jsCallAjaxCallback);

        }

        catch(err)

              {

            alert(err.message)

              }

              finally

              {

                    

              }

    }

 
1 Comment

Posted by on July 16, 2008 in General, Photography

 

Tags: , , , , , , , , ,

AjaxControlToolkit’s TabContainer: Navigation Buttons With Scroll Header

I used the code from Matt Berseth to create navigation buttons to change the selected tabs, but as I was using the tabs in a Left frame in the Web application; I did not have enough space to display all the tabs headers, the navigation buttons was working fine but the headers was invisible, so I changed the code to add a horizontal scrolling for the Header. I am creating dynamic tabs so I do not know the required value of the scroll as I do not know the width of the headers, and so I am using (_header.offsetWidth) for the active tab as a scroll value

 

HTML code:

 

 

<cc2:TabContainer  AutoPostBack=”false” style=”Z-INDEX: 102; LEFT: 0px; POSITION: absolute; TOP: 18px”  ID=”TabContainer1″ runat=”server” Width=”100%”>

</cc2:TabContainer>

          

<asp:ImageButton  ImageUrl=”images/scrollnext.gif”  id=”tabNext” ToolTip=”Next tab”   OnClientClick=”onNavigate(true); return false;”  style=”Z-INDEX: 102;  POSITION: absolute; TOP: 0px;  left:20px      runat=”server” />

<asp:ImageButton ImageUrl=”images/scrollpre.gif” id=”tabPrev” ToolTip=”Previous tab” OnClientClick=”onNavigate(false); return false;”  style=”Z-INDEX: 102;  POSITION: absolute; TOP: 0px; “  runat=”server” />

 

JavaScript functions:

 

    function onNavigate(isMoveNext)

    {

        //  find the behavior for the tab control

        var tabs = $find(‘TabContainer1’);

        //  figure out what the total number of tabs are

        var totalNumOfTabs = tabs.get_tabs().length;

        //  if we don’t have any tabs, just return

        if(totalNumOfTabs > 0)

        {

            var newTabIndex;

            var currentTabIndex = tabs.get_activeTabIndex();

            if(isMoveNext)

            {

                //  wrap around to the begining

                if(currentTabIndex + 1 == totalNumOfTabs)

                {

                    newTabIndex = 0;

                }

                else

                {

                    newTabIndex = currentTabIndex + 1;

                }

            }

            else

            {

                //  wrap around to the end

                if(currentTabIndex – 1 < 0)

                {

                    newTabIndex = totalNumOfTabs – 1;

                }

                else

                {

                    newTabIndex = currentTabIndex – 1

                }

            }

            tabs.set_activeTabIndex(newTabIndex);

            var aTab  = tabs.get_activeTab()

            if(isMoveNext)

            {

                if (newTabIndex == 0)

                {

                    document.getElementById(“TabContainer1_header”).scrollLeft=0;}

                else

                {

                    scrollDivLeft(“TabContainer1_header”,aTab._header.offsetWidth);}

                }

            else

            {

                if (newTabIndex == totalNumOfTabs – 1)

                {

                    document.getElementById(“TabContainer1_header”).scrollLeft=totalNumOfTabs*aTab._header.offsetWidth;

                }

                else

                {

                    scrollDivRight(“TabContainer1_header”,aTab._header.offsetWidth);

                }

            }

        }

    }                                                             

                            

          function scrollDivLeft(id,scrollStep)

          {

        document.getElementById(id).scrollLeft+=scrollStep

    }

 

    function scrollDivRight(id,scrollStep)

    {

        document.getElementById(id).scrollLeft-=scrollStep

    }

 

 

And this how the header looks like

 

 

 
5 Comments

Posted by on June 26, 2008 in General, Photography

 

Tags: , , , , , , , , ,

Using the wheel mouse button with AjaxControlToolkit slider

 I wanted to use the wheel mouse button to slide the slider up or down to use it in a Mapping application for Zoom In/Out, I used a java script function to detect the wheel mouse on the Map, I wanted the Zoom function to start when the user release the wheel mouse so I added a timer to detect that the user stopped using the wheel button 

 

   var hTimer = null;

 

   function wheelZoom(e)

    {

        try

        {

            e = e ? e : window.event;

            var raw = e.detail ? e.detail : e.wheelDelta;

            var normal = e.detail ? e.detail * -1 : e.wheelDelta / 40;

            if (normal > 0)

            {

                var slider = $find(“Slider2”);

                if (slider != null)

                {

                    slider.set_Value(slider.get_Value()-1);

                }

                else

                {

                }

            }

            else if(normal < 0)

            {

                var slider = $find(“Slider2”);

                if (slider != null)

                {

                    slider.set_Value(slider.get_Value()+1);

                }

                else

                {

                }

            }

            if (hTimer != null)

            {

                window.clearTimeout(hTimer)

            }

            else   

            {

           

            }

            hTimer = window.setTimeout(doZoomWheel, 500)

            cancelEvent(e);

        }

        catch(err)

          {

            alert(err.message)

          }

          finally

          {

                  

          }

    }

 

In the above code the slider will response to the wheel mouse but the Zoom function will be called only when the user stop using the wheel button

 

 

function doZoomWheel()

    {

        if (hTimer)

        {

            hTimer = null;

            Zoom();

        }

    }

 

 

 

 
Leave a comment

Posted by on June 10, 2008 in General, Photography

 

Tags: , , , , , , , , , , ,

 
%d bloggers like this: