Easy Code Stuff

Aug 12, 2018

Getting Started With Ionic 4

In this article I will be covering a series of articles for you to develop an Ionic Application and Publish it Google Play Store. The current version of Ionic is 4. Lets get started with Hybrid Mobile Application using Ionic. Hope you know what is Ionic and how it works. First of all you need to setup the environment for IONIC development.

Step 1 : Install latest version of Node if you have not installed. You can check your node version using below command in CMD.

node -v

Step 2 : Download a code editor for development. I use VS Code. Which is an open source code editor.

Step 3 : Install Ionic CLI globally using below command.

1	npm install -g ionic@latest

Step 4 : Lets create an Ionic App now. There are 3 main options while creating an Ionic Application.
You can create either Blank Application or Tabs Application or Side Menu Application. First Lets create Side Menu Application using below command.

1	ionic start SideMenuApp sidemenu

When you execute this command you will get something like this.

Its basically asking you if you want to create a mobile application (android and/or iOS). If that's your intention, then hit the y key, followed by enter. It will then ask you which platforms you want to install, type a platform name from the options and hit the enter key again.

If your intent is not to create a mobile app, then hit the n key, followed by enter and you'll be on your way to developing a single page, mobile first application.

So lets Enter "N" and Proceed.

Step 5 : Go to your newly created folder and run the Application using below commands.

1 2	cd SideMenuApp ionic serve

You will see get the following output in the Command Prompt.

Then application will open in the browser.

Hope you follow it up. Lets see how we can run this on a device in my next article.

Auto Center The Marker With Map Dragging

We used Google Map a lot in our applications. Sometimes in our applications we need select a location from google map. where we can drag the map as well as the marker. I came cross an issue, where I drag the map to select a location which I want, but marker is not responding with that. In order to update the marker with map drag event, we can get the google maps center position and set that to the marker. So when ever we drag the map, marker will auto come to the center of the map. After that we can drag marker as we want.

The below code is an example to do that.

<html>
<head>
    <title>Google Map Auto Center The Marker</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
    <div id="map-canvas" style="width:100%;height:500px;"></div>
    Latitude  : <input type="text" id="lat"/>
    Longitude  : <input type="text" id="lng"/>
 
    <script type="text/javascript">
        var lat = 6.929537;  //Your Location Latitude
        var lon = 79.866271; //Your Location Longitude
  
        //Setting Initial Latitide and Longitude
                                  
        document.getElementById("lat").value = lat;
        document.getElementById("lng").value = lon;
   
        var latlng = new google.maps.LatLng(lat, lon);
        var mapOptions = {
            center: latlng,
            zoom: 15
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
  
 google.maps.event.addListener(self.map, "center_changed", function (event) {
    var center = map.getCenter();
    marker.setPosition(center);
        document.getElementById("lat").value = marker.getPosition().lat();
        document.getElementById("lng").value = marker.getPosition().lng();
         });

    </script>
</body>
</html>

Nov 15, 2017

[Solution] How to empty a data grid in jeasyui ?

Question :

I have a data grid with 1000 records when i perform a search on a table, i need to remove all records in the data grid when i call a method, how can i do that ?

Answer :

1. We could load an empty data set to the data grid.
$('#dg').datagrid('loadData', {"total":0,"rows":[]});

2. We could remove only the selected records in the data grid.

var rows = $('#tt').datagrid('getSelections'); // get all selected rows
for(var i=0; i<rows.length; i++){
var index = $('#tt').datagrid('getRowIndex',rows[i].id); // get the row index
$('#tt').datagrid('deleteRow',index);
}

Apr 12, 2017

SQL Server Get The Alpha Numeric Text Only From A Column

Lets say there is column with special characters and all. Will say you just want to filter and take the Alpha Numeric Text Only. This scenario comes normally when you want to find duplicate records, just like my case.

In this case you can simply right a SQL Function to filter the text.

CREATE Function [dbo].[GetAlphanumericTextOnly](@Temp VarChar(1000))
Returns VarChar(1000)
AS
Begin

    Declare @KeepValues as varchar(50)
    Set @KeepValues = '%[^a-z0-9]%'
    While PatIndex(@KeepValues, @Temp) > 0
        Set @Temp = Stuff(@Temp, PatIndex(@KeepValues, @Temp), 1, '')

    Return @Temp
End

Then call the function

1	SELECT [dbo].[GetAlphanumericTextOnly]('Nifal.Nizar1990@Hotmail.com')

You will get the result as NifalNizar1990Hotmailcom

Jan 26, 2017

[Solution] Call Method Once Flip Is Done - jQuery-Flip

Question

am using a Flip Plugin

I have been trying to call a method once the flip is done/completed, but the method is getting called even before the flip is done.completed.

$("#card").flip('toggle');
$("#card").on("done", ChangeWord());

Let me know where i am going wrong ?

Answere

Your answer is in the link you posted in the question under the 'Events' heading. Specifically, the flip:done event. Also note that you need to pass the reference of the ChangeWord() function to the event handler, not its return value. Try this:

$("#card").on('flip:done', ChangeWord).flip('toggle');

Alternatively the flip() method accepts a callback function to be executed when the animation completes:

$("#card").flip('toggle', ChangeWord);

$("#card").flip('toggle', ChangeWord); this worked out fine as this will happen only when i use it , but $("#card").on('flip:done', ChangeWord).flip('toggle'); will call the method every time it flips

Jan 22, 2017

[Solution] jQuery: How to capture the TAB keypress within a Textbox

Problem :

I have a text box which is an ajax auto complete,so when i select a record i save an id into a hidden variable.
And there is a keydown event on that text box, if key down i delete the hidden variable value. because i don't want the user to enter any thing after he selects from the autocomplete.
Now even when i press the tab button the hidden variable is cleared.
Is there a way to avoid only Tab press event.?

Answer :

When the tab is pressed you have to read if the keydown was from the Tab button, if so you can avoid it..

$("body").on('keydown', '#textboxId', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    //IF Tab Pressed You Can Do Anything Here
  } else{ //If Its Not Tab, You Can Do It Here }
});

[Fixed Solution] Jquery autocomplete not working inside the ajax updatepanel

Issue : I have some auto complete text boxes with ajax calls within update panels in asp.net.

Initially the update panel will be hidden , but when i make the visible true,

the autocomplete ajax controls will not work. is there a way to initialize it again after a update panel is visible.?

Answer : Yes, there is a way. The update panel replaces the content of update panel on its update this means you have new content in the update panel. So the solution is to rebind the jQuery events like this:

Solution :

<script type="text/javascript">
        $(function () {
            initializer();
        });


        var prmInstance = Sys.WebForms.PageRequestManager.getInstance();


        prmInstance.add_endRequest(function () {
            //you need to re-bind your jquery events here
            initializer();
        });
        function initializer() {
            $("#<%=txtrefmastguage.ClientID%>").autocomplete('Handlerold.ashx', { minChars: 1, extraParams: { "param1": "1"} })
            .result(function (event, data, formatted) {
                if (data) {


                    $("#<%= hidrefguagecode.ClientID %>").val(data[1]);
                }
                else {
                    $("#<%= hidrefguagecode.ClientID %>").val('-1');
                }
            });


        }
  

    </script>

Nov 13, 2016

[Fixed Solution] jEasy UI Messenger Change Button Text

Question


I am using jEasy UI Framework for my project. I am using $.messager.confirm to get a confirmation from the user.

Which shows two buttons OK and Cancel.

How can i change button text when i am using $.messager.confirm ?

Example:

'ok' => 'yes',

'cancel' => 'no'

ANSWERE

$.messager.defaults.ok = 'Yes';
$.messager.defaults.cancel = 'No';

These are the two lines which will be need to change the text property of the prompt messenger in jEasy UI

Sep 28, 2016

[Fixed Solution] Show A Message When Mouse Hovers Over A Button In Windows Forms Application

In a windows forms application, sometimes you may wanted to show a mouse hover text on it, just like in web application. The easy way to do it is using a tool tip.

In this blog post I'm going to show you a easy way of doing it. With just two lines of C# codes. Simply you can do this using a MouseHover event. To do that click your button in designer mode and go to events in properties window. Now find the MouseHover event and double click in that. You will get the mouse hover event code. Simply use the below codes to show the text.

public void btnTest_MouseHover(object sender, EventArgs e)
{
 System.Windows.Forms.ToolTip toolTip = new System.Windows.Forms.ToolTip();
 toolTip.SetToolTip(btnTest, "This is a test text");
}

Sep 26, 2016

Disable All Tabs In JEasy UI [Solved]

Question

I am using jeasy ui Tabs. Link To Jeasy Ui Tabs

Is there a way to disable all tabs at once. ??

Currently i am able to disable one by one only.

$('#tab').tabs('disableTab', 1);    
$('#tab').tabs('disableTab', 2);

Answer

once soulation :

$('#tab').tabs('tabs').forEach(function(v,i){
     var opts=$('#tab').tabs("getTab",i).panel("options");
     opts.tab.addClass("tabs-disabled");
     opts.disabled=true;      
});

other soulation :

$('#tab').tabs('tabs').forEach(function(v,i){
  var opts=$('#tab').tabs("disableTab",i);
});