jQuery $.ajax–Error:Internal Server Error

The javascript code:

    var dataString = "{Id:'" + id+ "',name:'" + name+ "'}";

    $j.ajax({

        type: "POST",

        url: "Default.aspx/SubmitName",

        data: dataString ,

        contentType: "application/json; charset=utf-8",

        dataType: "json",

        success: function (message) {

            alert('Thank you!');

        },

        error: function (jqXhr, textStatus, errorThrown) {

            alert("" + textStatus + "; " + errorThrown);

        }

    });

The server side function:

    [System.Web.Services.WebMethod()]

    public static bool SubmitName(string id, string name)

    {

       //some logic here

        return false;

    }

This code would receive an “Internal Server Error” 500 because in the JS the first parameter name is “Id” while on the server side it is “id”. The parameter names have to be the same (including casing!).

jQuery $.ajax call with parameters

I always forget the exact syntax and waste time searching for an example on the web.

   1:  $.ajax({

   2:      type: "POST",

   3:      url: "Default.aspx/WebMethodWithParameters",

   4:      data: { param1: $('#val1').val(),

   5:              param2: $('#val2').val(),

   6:              param3: $('#val3').val()

   7:          },

   8:      success: function(msg) {

   9:          //on success callback

  10:      },

  11:      error: function(msg){

  12:          //on error callback

  13:      }

  14:  });

more info on the jQuery help page

Set focus on control inside iFrame (jQuery)

//get the IFRAME element - note no hashes in the name, we're using browser functionality 
var iframeRef = document.getElementById("IFRAMEID"); 
//focus the IFRAME element 
$(iframeRef).focus(); 
//use JQuery to find the control in the IFRAME and set focus 
$(iframeRef).contents().find("#CONTROLID").focus();

Source

How to manage ASP.NET validation from Javascript with jQuery

 

Just an example from the original article, but it is self explanatory

<asp:DropDownList ID="ddlMimeType" runat="server">

   <asp:ListItem Value="mp3">audio/mpeg</asp:ListItem>

   <asp:ListItem Value="wma">audio/wma</asp:ListItem>

   <asp:ListItem Value="other">Other</asp:ListItem>

</asp:DropDownList>

<asp:TextBox id="txbOtherMimetype" runat="server" />

<asp:RequiredFieldValidator id="valOtherMimetypeRequired" runat="server"

                   ControlToValidate="txbOtherMimetype" ForeColor="#990066"

                   ErrorMessage="You have to specify a custom mimetype." />

 

<script type="text/javascript">

$(document).ready(function()

{

  $("#<%= ddlMimeType.ClientID %>").change(function() 

  {

    toggleOtherMimeType(this);

  });

}

function toggleOtherMimeType(elem)

{

  if(elem!=undefined) 

  {

    if(elem.value=="other")

    {

      $("#<%= txbEnclosureOtherMimetype.ClientID %>").show();

      ValidatorEnable($("#<%= valEncOtherMimetypeRequired.ClientID %>")[0], true);

    }

    else

    {

      $("#<%= txbEnclosureOtherMimetype.ClientID %>").hide();

      ValidatorEnable($("#<%= valEncOtherMimetypeRequired.ClientID %>")[0], false);

    }

  }

}

</script>

 

Source

jQuery for Absolute Beginners: Video Series

Nettuts.com is a great site with many tutorials.

Here is a series of jQuery tutorials for beginners

jQuery for Absolute Beginners: Video Series

 

Link

jQuery – working with ASP.NET controls

 

DropDownList SelectedValue:

GET:   $('#<%=DropDownList1.ClientID%>').val();
SET:   $('#<%=DropDownList1.ClientID%>')
.val("value_to_set");

RadioButtonList SelectedValue:

$("input[name='<%=RadioButtonList1
.UniqueID%>']:checked").val();

Button Enable/Disable

$('#<%=Button1.ClientID%>').attr("disabled", true/false);

Label Text

GET:  $('#<%=Label1.ClientID%>').text();
SET:  $('#<%=Label1.ClientID%>').text("value_to_set");

TextBox Text

GET:  $('#<%=TextBox1.ClientID%>').val();
SET:  $('#<%=TextBox1.ClientID%>').val("value_to_set")

Check Visibility

if ($('#<%=Button1.ClientID%>').is(':visible'));

jQuery Data method

I got this amazing tip from an article named “5 tips for better jQuery code”.

This is a great way to associate any amount of data with any element on the page, here is a small example:

<html>

<head>

    <title>jQuery Data() method</title>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //create meaningless list

            for(var i=0;i < 10;i++)

            {

                $("#list").append("<li>" + i + "</li>");

            }

            var prevSum = 0;

            //will show the pwr of index and sum with all previous items

            $("#list li").each(function(indx, obj)

            {

                prevSum = prevSum + indx;

                //attach data to each list item

                $(this).data("Data", {pwr: indx*indx, sum: prevSum });

                //Show it

                $(this).html($(this).html() + ": pwr=" + $(this).data("Data").pwr + ",sum=" + $(this).data("Data").sum);

            });

        });

    </script>

</head>

<body>

    <ul id="list">

            <!--the items will be added here -->

    </ul>

</body>

</html>

 

Nice!

The interesting part is that the data is not shown in the source code…

jQuery Array Iteration – $.each

jQuery $.each can be used in order to iterate over an array:

$(document).ready(function() {

    var arr = [ "a", "b", "c", "d", "e" ];

    $.each(arr,function(index, item)

    {

        $('#list').append($( "<li>" + item + " at " + index +"</li>" ));

    });

});

You should have a <ul> with id=list for this code to work:

<ul id="list">

    <!--the items will be added here -->

</ul>

The result is:

Here is the entire code:

<html>

<head>

    <title>jQuery Array Iteration</title>

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

    <script type="text/javascript">

        $(document).ready(function() {

            var arr = [ "a", "b", "c", "d", "e" ];

            $.each(arr,function(index, item)

            {

                $('#list').append($( "<li>" + item + " at " + index +"</li>" ));

            });

        });

    </script>

</head>

<body>

    <ul id="list">

            <!--the items will be added here -->

    </ul>

</body>

</html>

Important to note that this is not the same as $(‘DOMElement’).each().

 

Source

jQuery - Thickbox

http://jquery.com/demo/thickbox/

http://blogs.digitss.com/javascript/hacking-jquery-thickbox/

Track mouse with jQuery

 

$(document).ready(function()
 {
  $().mousemove(function(e)
   {
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
});

 

Source

jQuery Selectors - How to Get Anything You Want

Great articles from Learning  jQuery blog:

How to Get Anything You Want - part 1

How to Get Anything You Want - part 2

Using jQuery to directly call ASP.NET AJAX page methods

 

   1: public partial class _Default : Page 

   2: {

   3:   [WebMethod]

   4:   public static string GetDate()

   5:   {

   6:     return DateTime.Now.ToString();

   7:   }

   8: }

   1: <html>

   2: <head>

   3:   <title>Calling a page method with jQuery</title>

   4:   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
   1:  
   2:   <script type="text/javascript" src="Default.js">
</script>

   5: </head>

   6: <body>

   7:   <div id="Result">Click here for the time.</div>

   8: </body>

   9: </html>

   1: $(document).ready(function() {

   2:   // Add the page method call as an onclick handler for the div.

   3:   $("#Result").click(function() {

   4:     $.ajax({

   5:       type: "POST",

   6:       url: "Default.aspx/GetDate",

   7:       beforeSend: function(xhr) {

   8:         xhr.setRequestHeader("Content-type", 

   9:                              "application/json; charset=utf-8");

  10:       },

  11:       dataType: "json",

  12:       success: function(msg) {

  13:         // Replace the div's content with the page method's return.

  14:         $("#Result").text(msg.d);

  15:       }

  16:     });

  17:   });

  18: });

 

Source