SourceField: javascript

Showing posts with label javascript. Show all posts

Wednesday

create report with max length of elements in json array

this script will create table of max length of array fields in test.txt json file.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>
var d1;
var mt ={};
var md ={};
    $(function() {
   $.getJSON('/test.txt', function(data) {
        d1=data;
        for (let i = 0; i < d1.length; i++) {       
            let ob=d1[i];
            for (prop in ob) {
                if (!mt[prop]){
                    mt[prop]=0;
                    md[prop]="";
                }
                if (mt[prop] < ob[prop].length){
                    let s=ob[prop];
                    mt[prop]= s.length; 
                    md[prop]= s;
                }       
                //  console.log(prop + "has value: " + ob[prop]);
            }
        }
      
        for (prop in mt) {
          var tblRow = "<tr>" + "<td>" + prop + "</td>" +
           "<td>" + mt[prop] + "</td>" + "<td>" + md[prop] + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
        }
   
   
   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>field name </th>
            <th>max length</th>
            <th>example</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

you can install LiveServer VsCode plugin in order to get this html working also I would change internal code a little to accommodate digital values and possible nulls and -1 to indicate field doesn't have value , here is my script

<script>
var d1;
var mt ={};
var md ={};
    $(function() {
   $.getJSON('/nutrition.txt', function(data) {
        d1=data.nutrition;
        console.log("loaded" +d1.length);
        for (let i = 0; i < d1.length; i++) {       
            let ob=d1[i];
            for (prop in ob) {
                
                if (!mt[prop]){
                    mt[prop]=-1;
                    md[prop]="";
                }
                if (!ob[prop]) continue;

                if (mt[prop] < (""+ob[prop]).length){
                    let s=""+ob[prop];
                    mt[prop]= s.length; 
                    md[prop]= s;
                }       
                //  console.log(prop + "has value: " + ob[prop]);
            }
        }
      
        for (prop in mt) {
          var tblRow = "<tr>" + "<td>" + prop + "</td>" +
           "<td>" + mt[prop] + "</td>" + "<td>" + md[prop] + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
        }
   
   
   });

});
</script>

Tuesday

jquery iframe contents

JQuery allows to open regular popup in nice dialog window by using iframe,
here is code how to do that:

        
<html>
<head>
        <link rel="stylesheet" href="./styles/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
        <script type="text/javascript" src="./scripts/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="./scripts/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript">
        $(function() {
                $(' .diag').click(function(e) {
                        e.preventDefault();
                        var $this = $(this);
                        var horizontalPadding = 30;
                        var verticalPadding = 30;
                $('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
                    title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
                    autoOpen: true,
                    width: 800,
                    height: 500,
                    modal: true,
                    resizable: true,
                                autoResize: true,
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                }).width(800 - horizontalPadding).height(500 - verticalPadding);               
                });
        });
        </script>
</head>
<body>
        <ul>
                <li><a href="http://www.google.com"  class ='diag' title="Google Dialog">Google</a></li>
        </ul>
</body>
</html>

more...

Sunday

show hide javascript

Here is sample how to show hide, control in asp.net/javascript
let say we have ddBerechnung control and we have to hide controls when this dropdown has value 'identisch'

server side will have this :

         
protected override void OnPreRender(EventArgs e)
{
	ddBerechnung.Attributes.Add("onChange", "ShowHidePercentField(this)");
}

and aspx will have this javascript:

         
function ShowHidePercentField(cb){
                var selIdx = cb.selectedIndex;
                var newSel = cb.options[selIdx].text;
                var textBox=document.getElementById('<%=txtBerechnung.ClientID%>');
                var Runden= document.getElementById('<%=ddRunden.ClientID%>');
                var RundenSpan= document.getElementById('RundenSpan');


                if (trim(newSel)=='identisch'){  ///
                        textBox.style.display="none";
                        Runden.style.display="none";
                        RundenSpan.style.display="none";

                }else{
                        textBox.style.display="";
                        Runden.style.display="";
                        RundenSpan.style.display="";

                }

        }

///.... at the end of control
<script language='javascript'>
        var elem=document.getElementById('<%=ddBerechnung.ClientID%>')
        ShowHidePercentField(elem);
</script>

more...

Friday

howto create and call json webservice in asp.net example

1.Add to webservice method this tag System.Web.Script.Services.ScriptService(),
so it will be looking like this:


Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports WebControlLibrary
Imports Ubill.Business
Imports System.ComponentModel

<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> <System.Web.Script.Services.ScriptService()> _
Public Class AtlasHub
    Inherits System.Web.Services.WebService


    <WebMethod(True)> _
    Public Function AdvanceCustomerDelete(ByVal CustomerID As String) As String
 Return cachefactory.AdvanceCustomerDelete(CustomerID)
    End Function

End Class

2.On aspx page add this script manager binding :


<asp:ScriptManager runat="server" ID="scriptManagerId">
 <Scripts>
     <asp:ScriptReference Path="~/common/AtlasHub.js" />
 </Scripts>
 <Services>
     <asp:ServiceReference  Path="~/common/AtlasHub.asmx " />
 </Services>
</asp:ScriptManager>

3.AtlasHub.js is javascript file those contains maintenance functions:


// Business functions 
// // -------------------------------------------  
function AdvanceCustomerDelete( customerID , onSuccessAdvanceCustomerDelete){
 YouBillWeb.AtlasHub.AdvanceCustomerDelete(customerID,onSuccessAdvanceCustomerDelete,onTimeOut,onFailed);
}

// Maintenance functions 
// -------------------------------------------  
// This is the callback function invoked if the Web service
// succeeded.
// It accepts the result object, the user context, and the 
// calling method name as parameters.
function OnSucceededWithContext(result, userContext, methodName)
{
    var output;

    // Page element to display feedback.
    var RsltElem = document.getElementById("ResultId");

    var readResult;
    if (userContext == "XmlDocument")
    {

 if (document.all)
     readResult =
  result.documentElement.firstChild.text;
 else
     // Firefox
    readResult =
  result.documentElement.firstChild.textContent;

  RsltElem.innerHTML = "XmlDocument content: " + readResult;
    }

}

// This is the callback function invoked if the Web service
// succeeded.
// It accepts the result object as a parameter.
function onSuccess(result, eventArgs)
{
    // Page element to display feedback.
    var RsltElem = document.getElementById("ResultId");
    RsltElem.innerHTML = result;
}

function OnSucceeded(result, eventArgs)
{
    // Page element to display feedback.
    var RsltElem = document.getElementById("ResultId");
    RsltElem.innerHTML = result;
}


// This is the callback function invoked if the Web service
// failed.
// It accepts the error object as a parameter.
function onFailed(error)
{
    // Display the error.    
    var RsltElem = document.getElementById("ResultId");
    RsltElem.innerHTML =
    "Service Error: " + error.get_message();
}

function onTimeOut(error)
{
    // Display the error.    
    var RsltElem = document.getElementById("ResultId");
    RsltElem.innerHTML =
    "Service Error: " + error.get_message();
}

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

more...

Wednesday

how to show hide div in asp.net

1.add this javascript function:


<script type="text/javascript"> 
function showHideExcel(){
        thisElement=document.getElementById('overlayExcel')
        if (!thisElement) return;
        if(thisElement.style.visibility == "visible"){
                thisElement.style.visibility = "hidden";
        }else {
                thisElement.style.visibility = "visible";
        }
}
</script>

2.add this div to asp.net code


<div id="overlayExcel" name="overlayExcel" style="visibility:hidden;position:absolute; top: 120px; left: 900px;background-color:white;display:block;">
        <div style="padding: 3px; background-color: #CCCCCC; border: 1px solid #666666;">
        <table border="0" border="0" cellspacing="0" cellpadding="0" >
            <tr><td height="30">Start Date:&nbsp;</td> <td><asp:TextBox ID="txtExcelStartDate" runat="server" /></td></tr>
            <tr><td height="30">End Date:&nbsp;</td>   <td><asp:TextBox ID="txtExcelEndDate" runat="server" /><br></td></tr>
            <tr><td height="30" colspan="2"><asp:Button ID="btnExcelMe" runat="server"  Text="Open Excel Report" OnClick="OpenExcelReport" />
            <input type=button value="Cancel" onclick="showHideExcel();"></td>
        </tr>
         </table>
        </div>
</div>

that's it.
more...

Thursday

asp.net treeview javascript search

Backward search:

 
function SearchBack(tv_id,str)
{
    var tree = document.getElementById(tv_id);
    var treeLinks =  tree.getElementsByTagName('A');
    eval('  var sel_name = '+tv_id+'_Data.selectedNodeID.value;');
    var elem;
    var sel_passed=0;
    for(var element in treeLinks )
    {
        var sub1=treeLinks[element].firstChild;

          if (sel_name && treeLinks[element].id==sel_name) {
                sel_passed =1;
                if (!sel_name || sel_passed==1) break;
          }
          if (sub1 &&  (''+sub1.value).indexOf(str) >=0)
          {
                //log("found"+treeLinks[element].id);
                elem=treeLinks[element];
            }
    }

        if (elem)  {
                eval('TreeView_SelectNode('+tv_id+'_Data,elem,"'+elem.id+'");');
                elem.focus();
                }else{
                alert('Not found');
                }
}

Forward search:

 
function SearchForward(tv_id,str)
{
    var tree = document.getElementById(tv_id);
    var treeLinks =  tree.getElementsByTagName('A');
    eval('  var sel_name = '+tv_id+'_Data.selectedNodeID.value;');
    var elem;
    var sel_passed=0;
    for(var element in treeLinks)
    {
        var sub1=treeLinks[element].firstChild;
          if (sub1 &&  (''+sub1.value).indexOf(str) >=0)
          {
                //log("found"+treeLinks[element].id);
                elem=treeLinks[element];
                if (!sel_name || sel_passed==1) break;
            }

          if (sel_name && treeLinks[element].id==sel_name) {
                sel_passed =1;
          }
    }
        if (elem)  {
                eval('TreeView_SelectNode('+tv_id+'_Data,elem,"'+elem.id+'");');
                elem.focus();
                } else{
                alert('Not found');
        }


}

Monday

javascript:unescape/escape: decode/encode URL characters


<script type="text/javascript"> 
alert (unescape('Hello%20World'));
alert (escape('Hello World'));
</script>

Tuesday

JQuery working inside UpdatePanel

To make jquery works inside Update panel you have to add handler to updatepanel reload with restorig jquery bindings :

1. create jquery binding function , to specific links for example:


function re_init(p1,p2){
        $('a[name=modal]').click(function(e) {
        // Add your jquery bindings here 
        // ...
        //
        }
}

2 on document ready add handling UpdatePanel reload


$(document).ready(function() {
  re_init(null,null);
  // add re-initialisation after update panel reloading 
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(re_init);
});

Thursday

remove blinking on aspx page reloading

add these two lines to page source to eliminate this problem :

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)"/>
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)"/>

this will solve page blinking problem for internet explorer.
more...

Tuesday

javascript transformnode or javascript transform xml

XSL transformation in javascript


// ake xmldoc for client -side transformations 
function MakeXMLDoc()
{
var xmlDoc;
// code for IE
if (window.ActiveXObject){
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
// code for Mozilla, Firefox, Opera, etc. 
  else if (document.implementation && document.implementation.createDocument) {
  xmlDoc=document.implementation.createDocument("","",null);

  }else{
    alert('Your browser cannot handle this script');
  }
xmlDoc.async=false;

return(xmlDoc);
}


function XSLTrasformer(xml,xsl,span_name) //  >[:>]
{

//xml=loadXMLDoc("1.xml");
//xsl=loadXMLDoc("NovaSettleResponse.xsl");

// code for IE
if (window.ActiveXObject)
  {
  ex=xml.transformNode(xsl);
  document.getElementById(span_name).innerHTML=ex;
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
  {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById(span_name).appendChild(resultDocument);
  }

}

function XMLPopup(xml_string,xsl_file){
    xsl=MakeXMLDoc(); xml=MakeXMLDoc();
    xsl.load(xsl_file);
    xml.loadXML(xml_string);
    ex=xml.transformNode(xsl);
    //document.getElementById(span_name).innerHTML=ex;  
    var dbgwin;
    //left=0,top=0,
    dbgwin=window.open("", "xml_pop", "width=420,height=540,scrollbars=yes,status=yes,resizable=yes");
    dbgwin.document.write(ex);
    dbgwin.document.write("<p><input type='button' onclick='window.close();' value='close'></p>");
}

Wednesday

to debug javascript (errors :) ) in internet explorer

you can use debugger; directive to step into default javascript debugger (visual studio 2005)
or you can create debugger window and paste variables there:

var dbgwin;
dbgwin=window.open("", "Debug", "left=0,top=0,width=300,height=700,scrollbars=yes," +"status=yes,resizable=yes");
function log(msg){
dbgwin.document.write("<br>"+msg);
}

log('Started');

more...

Monday

Read query string parameters from javascript

Read query string parameters from javascript.
Here is script demonstrating it:

var qsParm = new Array();
        function qs() {
        var query = window.location.search.substring(1);
        var parms = query.split('&');
                for (var i=0; i<parms.length; i++) {
                        var pos = parms[i].indexOf('=');
                        if (pos > 0) {
                                var key = parms[i].substring(0,pos);
                                var val = parms[i].substring(pos+1);
                                qsParm[key] = val;
                        }
                }
        }

SourceField

Wednesday

create report with max length of elements in json array

Tuesday

jquery iframe contents

Sunday

show hide javascript

Friday

howto create and call json webservice in asp.net example

Wednesday

how to show hide div in asp.net

Thursday

asp.net treeview javascript search

Monday

javascript:unescape/escape: decode/encode URL characters

Tuesday

JQuery working inside UpdatePanel

Thursday

remove blinking on aspx page reloading

Tuesday

javascript transformnode or javascript transform xml

Wednesday

to debug javascript (errors :) ) in internet explorer

Monday

Read query string parameters from javascript

make ubuntu business casual

codestyle