SW Dev. Notes: jquery

Showing posts with label jquery. Show all posts

Showing posts with label jquery. Show all posts

Monday, 27 February 2017

ASP Web Service

Sometimes you need to create a webservice .asmx, without use service reference and call this service via ajax request or other requests, you need to do the following

Right click on any folder you want to add the service to it and type the name of it.

After you hit OK, your code should locks like the following

namespace ...

{

///

/// Summary description for WebService1

///

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

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]

public class WebService1 : System.Web.Services.WebService

{

[WebMethod(EnableSession = true)]// This to make this method accessible to public and access the web session in the link

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]// to return the text as json

public string HelloWorld(string x1, int x2)

{

return "Hello World";

}

}

}

To call HelloWorld method from jquery use the following code snippet

var x1='xxx', x2=20;

$.ajax({

type: "POST",

url: "/WebService1.asmx/HelloWorld",

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

dataType: "json",

data: "{x1:'" + x1+ "', x2:'" + x2+ "'}",

beforeSend: function () {

$('#loadingImage').show();//to show a loading image while ajax call in progress

},

success: function (data) {

console.info(data.d);

},

complete: function () {

$('#loadingImage').hide();

},

error: function (XMLHttpRequest, result, errorThrown) {

console.info('error',errorThrown);

}

});

Tuesday, 9 August 2016

HTML inside Tooltip

<!DOCTYPE html>

<html>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

display:none;

min-width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 10px;

position: absolute;

z-index: 1;

top: -50px;

margin-left:7px;

}

.tooltip .tooltipPointer {

display:none;

content: "";

position: absolute;

top: 12px;

left: 97%;

margin-top: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent black transparent transparent;

/*left: 100%;//for rtl

border-color: transparent rgba(0, 0, 0, 0.08) transparent rgb(0, 0, 0);*/

}

/*.tooltip:hover .tooltiptext {

visibility: visible;

}*/

</style>

<body style="text-align:center;">

<div style="height:300px">

<h1>Yesssssssssssss my tooltip</h1>

</div>

<h2>Right Tooltip w/ Left Arrow</h2>

<div class="tooltip" style="float:left">

Hover over me

<span class="tooltipPointer"></span>

<div class="tooltiptext">

<div id="listHolder">

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>

<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>

</div>

</div>

</div>

<div style="float:left"> Same shit different day </div>

<script type="text/javascript">

$(document).ready(function () {

var w = $('.tooltip').width();

var float = $('.tooltip').css('float');

var tooltipHolder = $('.tooltiptext');

$(tooltipHolder).css('left', w);

$('.tooltip').click(function () {

if ($(tooltipHolder).html().trim().length < 5) {

$('.tooltiptext').css('display', 'none');

$('.tooltipPointer').css('display', 'none');

} else {

calculateTooltipDim();

$('.tooltiptext').css('display', 'block');

$('.tooltipPointer').css('display', 'block');

}

});

$('.tooltiptext').hover(

// mouse-over

function () { },

// mouse-out

function () {

$(this).css('display', 'none');

$('.tooltipPointer').css('display', 'none');

});

$('.tooltip').hover(

// mouse-over

function () { },

// mouse-out

function () {});

});

function calculateTooltipDim() {

var tooltipHolder = $('.tooltiptext');

var $element = $('.tooltip');

var val = (($(tooltipHolder).height()+2) - ($(document).height() - $element.offset().top - $element.height()));

$(tooltipHolder).css('top', val * -1);

}

</script>

</body>

</html>

Subscribe to: Posts (Atom)