.

Loading a web page using json data

sdf

function UpdateOnClick(param123) {
    $.ajax({
        type: 'GET',
        url: "/WhereEver/PageToLoad",
        cache: false,
        data: { myKey: myValue },
        dataType: "json",
        async: true,
        success: function (result) {
            $('#Id1').html(result.ValueX);
            $('#Id2').html(result.ValueY);
        },
        error: function (result) {

        }
    });
}

Quick direct references to Jquery & JqueryU

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

jQuery.UI available test

<script>
    $(document).ready(function() {
        if (jQuery.ui) {
            alert('jQuery.ui is loaded');

        } else {
            alert('WARNING:  jQuery.ui is NOT loaded!!');
        }
    });
</script>

jQuery & jQuery.UI available test

The following code block:

<script>
    if (typeof jQuery != 'undefined') {
        // jQuery is loaded => print the version
        alert(jQuery.fn.jquery);
    } else {
        alert('jQuery is NOT loaded');
    }

    $(document).ready(function() {
        if (jQuery.ui) {
        } else {
            alert('jQuery.UI is NOT loaded!!');
        }
    });
</script>

will either print the JQuery version or inform you if no JQuery library is found.
also warn if jQueryUI is not loaded

JQuery vsdoc Visual Studio intellisense

To enable the vsdoc intellisense. Reference the file in your page as follow:

<% if(false) 
{ %>
    <script src="/path/to/jquery-1.8.1-vsdoc.js" type="text/javascript"></script>
<% } %>

It is wrapped in if(false) to prevent the reference from being rendered.

And at the top of your javascript (.js) file:

/// <reference path="/path/to/jquery-1.8.1-vsdoc.js" />

working with JQuery checkboxes – append to array

checking if a checkbox is checked and append it’s data value to an array:

 $(':checkbox').each(function () {
    var allPEtasks = new Array();
    var count = 0;
    var cb = $(this);
    if (cb.attr('checked'))  {
        var TaskId = cb.data('taskid');
        if (TaskId != null) {
                allPEtasks[count] = TaskId;
                count++;
            }
    }
});

this could be the razor view generating the html:

    foreach (var @tt in Model)
    {
        if ((tt.Task_commence_date != null) && (tt.Task_completed_date == null))
        {
            <div  class="TrafficLight_@(((TaskResultCode) @tt.TaskResultCode).ToString())" >@tt.Task_description 
            <input type="checkbox" data-petaskid="@tt.Patient_episode_task_id" />
            </div>
        }
    }

sending a JSON object on button click event

 

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

        //create json 
        var patientId = $('#patientIdHiddenField').val();
        var surname = $('#surnameTextBox').val();
        var forname = $('#fornameTextBox').val();
        var otherNames = $('#otherNamesTextBox').val();
        var postcode = $('#postcodeTextBox').val();
        var telephoneHome = $('#telephoneHomeTextBox').val();
        var telephoneMobile = $('#telephoneMobileTextBox').val();
        var telephoneWork = $('#telephoneWorkTextBox').val();
        var email = $('#emailTextBox').val();
        var nextOfKin = $('#nextOfKinTextBox').val();
        var nextOfKinPhone = $('#nextOfKinPhoneTextBox').val();

        var json = JSON.stringify({
            patientId: patientId,
            surname: surname,
            forname: forname,
            otherNames: otherNames,
            postcode: postcode,
            telephoneHome: telephoneHome,
            telephoneMobile: telephoneMobile,
            telephoneWork: telephoneWork,
            email: email,
            nextOfKin: nextOfKin,
            nextOfKinPhone: nextOfKinPhone
        });

        var uri = '../los/popup/UpdatePatientDetails/';

        $('#dialogBox').empty().dialog('destroy').remove();;

        $.post(uri, json, function () {
            //callback function for success
            $(window.location.reload());
        });

        $(window.location.reload()); 
    });
});

jQuery dialog popup with AJAX content

<script type="text/javascript">
    $(function () {
        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load('/los/handover/_details');
            },
            height: 500,
            width: 700,
            title: 'Details'
        });
    });
</script>

or this

<script type="text/javascript">

jQuery('#dialog').load('/los/handover/_details').dialog('open');

should work as well

using JQuery with a Asp.Net WebService

Here follows the web service code and html code (+Javascript / JQuery) to make the necessary calls.
Please note the [System.Web.Script.Services.ScriptService] code that needs to be added to the default webservice class.

save the following as: GetTimeWebService.cs (in the “app_code” folder) :

 

 


 

using
System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class GetTimeWebService : System.Web.Services.WebService {

    public GetTimeWebService () {    }


    [WebMethod]

   public string checkit()

   {

        return "Hello World: " + DateTime.Now.ToLongTimeString();

    }

}

 

 

and this is the HTML page .. name whatever you want to:

 

 

<div>the time is: <span id="time_container"></span></div>

<script> //if you create the webservice in the same file then use ... url: "

<%=HttpContext.Current.Request.Url.LocalPath%>/GetTime", function UpdateTime()
{
$.ajax({
type: "POST",
url: "GetTimeWebService.asmx/checkit",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg)
{ $('#time_container').text(msg.d); } ,
error: function()
{ $('#time_container').text('lost connection'); }
}
);}
UpdateTime(); setInterval(UpdateTime,1000);
</script>

 

placing popups over their links

<span id="<%=ClientID %>_spanner" onmouseout="toggleDiv('<%=PopupId %>');" onmouseover="toggleDiv('<%=PopupId %>');">

    <div id="<%=PopupId %>" style="border: 1px black solid; background-color: white;

        display: none; width: 200px; heigth: 300px; z-index: 1; position: absolute;">

        Doctor:

        <%=Name %><br />

        Hospital: St Thommas

        <br />

        Phone: 092312 2133<br />

        Fax:

        <br />

        Email: ASDF@test.com<br />

    </div>

    <a href="#" >

        <img src="/Images/doctor.png" style="position: relative; top: 5px; height: 20px;

            width: 20px; border: none" />

        <%=Name %></a> </span>



        <script>
            var item = $('#' + '<%=PopupId %>');
            var wholeitem = $('#<%=ClientID %>_spanner')
            var POS = wholeitem.position();
            item.html("left: " + POS.left + ", top: " + POS.top);
            item.css('left', POS.left);
            item.css('top', POS.top);
        </script>