Category: JavaScript

Handling special characters in jQuery selectors

When we make dynamic id in Javascript sometimes it may happen that it can contain special characters like @/space/ something which might be difficult to access the element back using the jQuery selector.

So this article will help you manage such special characters so that the Javascript on that page does not break and throw any error for smooth accessing of the web page.

First create a function like below and place it in a common place where you will access it.

function escapeSelector( myid ) {
console.log(myid);
return myid.replace( /[:|.|[|]|,|=|@ ]/g, "\$&" );
}

Notice that the function accepts a parameter id which will escape the special characters using regex and then return it.

Now just call the above function whenver you are using jQuery selector to select that element.

For exmaple:

var element = $('tr[id^=' + escapeSelector(id) + ').attr("data-filename");

So the above line of code is selecting a particular td element with the id which is now being escaped to handle special characters.

Sorting array of objects based on values which are strings in Javascript

Let us assume we have a JSON array of objects that contain some key value pairs. We might want to compare it with similar JSON array to find out whether both are same or not. To do this we might want to sort the array first and then compare as the order of key value pairs might be different.

Lets say we have following json arrays and we want to sort them to compare them.

var json_array1 = [
    {
        "Name" : "Lenovo",
        "Year" : 1985
    },
    {
        "Name" : "HP",
        "Year" : 1986
    },
    {
        "Name" : "HCL",
        "Year" : 1987
    },
    {
        "Name" : "Dell",
        "Year" : 1974
    }
]

var json_array2 = [
    {
        "Name" : "HP",
        "Year" : 1986
    },
    {
        "Name" : "HCL",
        "Year" : 1987
    },
    {
        "Name" : "Lenovo",
        "Year" : 1985
    },
    {
        "Name" : "Dell",
        "Year" : 1974
    }
]

Now to sort them we use the below code to sort them. Notice that we might want to sort it by the Key-Value pair Name.

json_array1.sort((a, b) => {
    let fa = a.Name.toLowerCase(),
        fb = b.Name.toLowerCase();

    if (fa < fb) {
        return -1;
    }
    if (fa > fb) {
        return 1;
    }
    return 0;
});

The above code will return the sorted array of JSON array sorted by the key value pair Name. Notice that we can also sort by using the key value pair Year in that case we don’t need to convert to lowercase since it is a integer type.

Type error, Undefined. Most common mistakes in Javascript and how to resolve them.

Javascript is almost everywhere on web. But sometimes we do make mistakes in writing the code. Here we will see how to solve them.

How to debug or see the errors

Press F12 in browser it will open developer tool. There click on console tab. Here you can see warnings and errors or the log statements that are part of your Javascript code. You can choose on what to see in errrors/warnings/log statements etc.

Developer Options in Firefox

Undefined variable

If you are getting Type error undefined most often it is the variable its referring to. It is either not storing a value or is not declared as var.

User input validation

Make sure to remove extra white spaces using Javascript’s trim() function.

If your if condition variable is not matching as expected

Then make sure your variable’s type is correct. That is sometimes you might be matching a string but you might be storing it as a integer/float. Just print the type of the variable to see what is happening.

Linking a Python script to a web interface with file upload.

In this article I am going to explain how can we link a python script with a web interface. In case you need the GIT hub link for the entire project you can find it here.

Screenshot of WEB Interface that converts UPPER case text to lower case text

Requirements:

  • PHP
  • Web Server(apache)
  • Javascript
  • A Python script that you want to link with the web interface.

The Python Script

#convert text to lowercase 

import sys
#open file using open file mode
fp1 = open(sys.argv[1]) # Open file on read mode -- input file
lines = fp1.read().split("\n") # Create a list containing all lines
fp1.close() # Close file

#write output to a file name it out.txt
fp2 = open("out.txt", "w")

#do something with the text and write it to the file
for line in lines:
	out_line = line.lower()
	fp2.write(out_line + "\n")


fp2.close()

This is our Python script that we want to use it from a Wen Interface where we give input text and the lower case text is shown in the web page itself. Remember I am here just taking a very small example this python script could be doing anything but the basic point is that it takes an input file with some text and writes the output to another file.

To make sure this works, run this python script independently and see if it works as expected.

python3 case_convert.py in.txt
  • Replace your python script with your code.
  • If you have any other script like in PERL, Shell script even then it works fine. You just need to change it in PHP script where it calls the system command.

This script takes a input file in.txt that contains some text and it will be converted to lower case when we execute the script and save it to a output file out.txt

Now lets build our Web page we will call it as index.html It will look like below.

<html>
	<head>
		<title>
			A Web Interface
		</title>

		<script src="js/jquery.js"></script>
		<script src="js/jquery-ui.js"></script>
		<script type="text/javascript" src="config.js"></script>
		<script type="text/javascript" src="js/FileSaver.js"></script>
		<script type="text/javascript" src="js/validation.js"></script>

		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<link rel="stylesheet" type="text/css" href="css/responsive.css" />

		<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/convert.js" ></script>

		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
		 <meta charset='utf-8'>
	</head>
	<body>
		<div>

				<h4 align="center">Convert Upper case to LowerCase </h4>
			<!--common for file and text output-->
			<!--upload form-->
			<form class="form-inline" id="upload" method="post" enctype="multipart/form-data">

				<div class="form-group col-12 col-m-12">
					
					<label class="btn btn-primary" for="my-file-selector">

						<!--<input accept=".doc,.rtf,.docx,.pdf,text/plain" type="file" id="file" name="inputfile" multiple/>-->
						<input accept=".pdf,text/plain,.doc" type="file" id="file" name="inputfile" onchange="startRead(this)" multiple  multiple/>
					</label>

					<!--<button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
						Select Business type <span class="caret"></span>
					</button>-->
				<!--	<span id="mandatory">*</span> <select name="srclanguage"  id="srclanguage" class="form-control"><option value="" >Choose Type</option>
						<option disabled="true"></option>
				</select>-->

					<button id="submit" type="button" class="btn btn-default navbar-btn" onclick="submittext();">
						Submit
					</button>
					<img style="margin-left:2%;height:4%;position:relative;" id="loading" src="images/processing.gif"></img>
					<br>
			<textarea id="input"></textarea> 
			<textarea id="result"></textarea> 
					<button id="edit" type="button" class="btn btn-default navbar-btn" onclick="edittext();">
						Edit
					</button>
					<br>
					<button id="sample1" type="button" class="btn btn-default navbar-btn sample" onclick="sample(this.id);">
						Sample1
					</button>
					<button id="sample2" type="button" class="btn btn-default navbar-btn sample" onclick="sample(this.id);">
						Sample2
					</button>
					<button id="sample3" type="button" class="btn btn-default navbar-btn sample" onclick="sample(this.id)">
						Sample3
					</button>
					<button id="clear" type="button" class="btn btn-default navbar-btn" onclick="empty();">
						clear
					</button>
					<select style="background-color:#7ba733;color:#fff;" name="savetype"  id="savetype" class="form-control"><option value="" >Export to</option>
						<option disabled="true"></option>
						<option value="txt">.txt </option>
						<option value="csv">.csv </option>
						<option value="doc">.doc</option>
						<option value="rtf">.rtf</option>
						<option value="pdf">.pdf</option>
					</select>

					<button id="download" type="button" disabled class="btn btn-default navbar-btn" onclick="saveasfile();">
						Download
					</button>

				</div> <!-- end of form group div -->

			</form>


			<div class="progressbar">
				<div class="bar">
				</div>

			</div> <!-- end of progressbar div-->

			<!--<div contenteditable="true" id="result"></div>--> <!-- end of result div-->
			<!--			<textarea onkeypress="txtAreaId(this.id);" id="result-text"></textarea> -->

		</div>	<!-- end of container div -->
	</body>
</html>

Looks like a lot but it simply does hold two textareas, button for submitting input text, downloading the output text and linked Javascript and CSS files.

The main Javascript file convert.js which is in js folder will call a PHP script that will execute our python program. I will just list the main function here that is activated when we click submit after inputting some text.

//called when submit button button is clicked
function submittext(){
	$("#savetype").hide();
	$("#download").hide();
	//$("#result").hide();

	//retrieve values from fields
	var srctext = $("#input").val();
	//alert(fromto+" "+srctext);
	
	
	if(typeof srctext =="undefined" || srctext =="") {
		alert("Provide some text...");
		return false;
	}


	$("#loading").show();
	$("#result").empty();
	//Ajax call to upload and submit for conversion
	$.ajax({
		type: 'POST',
		url: "scripts/convert.php",
		//data: "&from=" + from + "&to=" + to + "&text=" + srctext,
		data: "&text=" + srctext,
		header:"application/x-www-form-urlencoded",
		async:false,
		success: function (data) {
			$("#loading").hide();
			//alert(data);
			var tgttext = data;
			$("#result").val(tgttext);
			$('#download').prop('disabled', false);
			$('#language').prop('disabled', false);
			$("#savetype").show();
			$("#download").show();
			$("#edit").show();
		
		},
		error:function  (jqXHR, exception) {
			$("#loading").hide();
			var msg = '';
			if (jqXHR.status === 0) {
				msg = 'Not connect.\n Verify Network.';
			} else if (jqXHR.status == 404) {
				msg = 'Requested page not found. [404]';
			} else if (jqXHR.status == 500) {
				msg = 'Internal Server Error [500].';
			} else if (exception === 'parsererror') {
				msg = 'Requested JSON parse failed.';
			} else if (exception === 'timeout') {
				msg = 'Time out error.';
			} else if (exception === 'abort') {
				msg = 'Ajax request aborted.';
			} else {
				msg = 'Uncaught Error.\n' + jqXHR.responseText;
			}
			alert(msg+" Please try afer sometime");
		}
	});
	return false;
}

So we can see that we are using AJAX which explains why we need jQuery. In the AJax look at the URL it is calling a PHP script convert.php located in scripts directory.

convert.php will look like below. I recommend PHP 7 although it works in lower versions too.

<?php
$text = $_POST["text"];

$fp = fopen("in.txt","w");
fwrite($fp,$text);
fclose($fp);

#call your python script here and make sure your python script is also at same place as this script
$status = system("python3 case_convert.py in.txt");

$fp_out = fopen("out.txt","r");
if ($fp_out) {
    while (($line = fgets($fp_out)) !== false) {
        // process the line read.
        echo "$line";
    }

    fclose($fp_out);
} else {
    // error opening the file.
}

?>

After doing all these. You need to give proper permission the scripts directory or just the two files in.txt and out.txt. Below is the command to do the same.

chown www-data:www-data scripts 
chown www-data:www-data in.txt out.txt

After doing this load your web page in the browser. For example I named the directory as basic-web-interface, so in my browser I open it as http://localhost/basic-web-interface/.

If you have PHP/ APACHE and all other javascript and Bootstrap files installed it should load your web page without any hiccups.

Then provide some input text and see that it gets convert to lowercase and the output text is displayed in the other textarea.

Debugging
  • Check apache error..log file for errors. For ubuntu it is /var/log/apache2/error.log
  • Open Network console(F12) from Browser Developer options and view the API request that is being called. Its request, response, parameters etc.
  • For this Open Developer options, click on network tab and then click submit and view the request/reponse.
Developer options in Browser, Press F12 and then click submit.

How to Download a file and compress it to zip using JavaScript

Initially, the prerequisite for downloading a simple text file in javascript requires FileSaver.js. This can be downloaded from here.

Next step would be the creation of zip file. For this we need JSZIP.

1. Download jSZip and load it in your html.

2. Here comes the core part where we initialise jSZip and download a zip file.

     var zip = new JSZip();         

    //skip this step if you don't want your files in a folder.
    var folder = zip.folder("example");
    folder.file("myfile1.txt", "HELLO WORLD IN 1ST FILE"); //requires filesaver.js
    folder.file("myfile2.txt", "HELLO WORLD IN 2ND FILE");

    //...so on until you have completed adding files

    zip.generateAsync({type:"blob"})
               .then(function(content) {
                //see FileSaver.js
                saveAs(content, "example.zip");
      });

With the above code you can now download files into zip.

Audio visual feature for audio/video files in Java Script

You might have seen some wave like visuals representing the audio waves in many players or audio editing tools.

Let’s see how that feature can be added simply using an available library of JS.

Wavesurfer.js is a library that would help us achieve this. Using this feature is as simple as just importing a library. You can check the documentation of wavesurfer here

Let’s create a HTML page that will accept an audio/video file and when submitted, it shows the visual representation

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>audio visual</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   	        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script src="https://unpkg.com/wavesurfer.js"></script>
	        <script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.timeline.js"></script>
			<style>
#control-panel{
	padding-bottom : 18px;
}
			</style>
	</head>
	<body>
	<div class="container-fluid">
		<div id="waveform"></div>
		<div id="wave-timeline"></div>
		&nbsp
		<div class="controls col-md-12" id="control-panel">
			<div class="col-md-2"><button id="play-btn" class="btn btn-primary" onclick="wavesurfer.playPause()">
					<i class="glyphicon glyphicon-play"></i>
					Play
					/
					<i class="glyphicon glyphicon-pause"></i>
					Pause
				</button>
			</div>
			<div class="col-sm-1 text-center">
				<i class="glyphicon glyphicon-zoom-out" title="slide left for zoom-out"></i>
			</div>

			<div class="col-sm-3">
				<input id="slider" data-action="zoom" type="range" min="20" max="200" value="0" style="width: 100%">
			</div>

			<div class="col-sm-1 text-center">
				<i class="glyphicon glyphicon-zoom-in" title="slide right for zoom-in"></i>
			</div>

		</div>
		<br>
		<div class="controls col-md-12">
			<div class="col-md-4">	<input id="loadFile"class="btn btn-primary" type="file"></input></div>
			<div class="col-md-2">	<input  class="btn btn-primary" type="submit" value="submit" onclick="submit()" ></input></div>
		</div>

	</div>
	</body>

The above html code would take care of uploading a audio file and send it to wavesurfer library on clicking submit button.

Let’s look at the js code now. This code can either be placed a separated js file and imported or you can add append this code between <script></script> before ending html tag.

var ctrlPanel = document.getElementById('control-panel');
var wavePanel = document.getElementById('waveform');
ctrlPanel.style.display = "none";
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple',
scrollParent: true,
notchPercentHeight: 90,
plugins: [
WaveSurfer.timeline.create({
container: "#wave-timeline"
})
]
});
function submit(){
		var lFile = $('#loadFile').prop("files")[0];
		if(lFile !== undefined && lFile !== ""){
		var bFile = new Blob([lFile]);
		console.log(bFile);
		document.getElementById("waveform").style.border = "1px black solid";
	wavesurfer.loadBlob(bFile);
	wavesurfer.on('ready', function () {
			wavesurfer.play();
			ctrlPanel.style.display = "block";			});
}
else{
	console.log("empty file");
}
document.querySelector('#slider').oninput = function () {
	    wavesurfer.zoom(Number(this.value));
};
}

That’s it! you’re good to go now. You can access this html file through apache and upload a audio/video file to get the audio visual

HTTPS to HTTP Ajax Request, Same Origin Policy.

Often there are times where we need to make a request that might not obey the Same Origin Policy . So here I am going to address Different Protocal issue in Same Origin Policy. Suppose we are making a http request from a server with HTTPS protocol in the following way.

$.ajax({
        url: 'http://MyAjaxHTTP Path',
        type: 'POST',
        data: 'param1=value1&param2=value',
        header: "application/x-www-form-urlencoded",

The above request cannot be made because it violates same origin policy. So we have to write a layer code between JavaScript and the HTTP server that directly interacts with HTTP. So first we have to choose a server side language for this. I am choosing PHP.

In PHP (phplayer.php):

$param1 = $_POST["param1"];
$param2 = $_POST["param2"];
$data = array(“param1”=>$param1, "$param2"=>$param2);

$data = http_build_query($data);
header('content-type: application/json');
$context_options =  array(
        'http' => array(
                'method' => 'POST',
                'header' => 'Content-type: application/x-www-form-urlencoded',
                'content' => $data
        ));
$context  = stream_context_create($context_options);

//notice that our actual HTTP URL is called here
$result = file_get_contents("http://MyAjaxHTTPPath", false, $context);
echo $result;

In JavaScript everything remains same except that we have to make a call to our layer PHP code that will actually make a HTTP request and get back the response.

$.ajax({
        url: 'phplayer.php',
        type: 'POST',
        data: "param1=value1&param2=value",
        header: "application/x-www-form-urlencoded",

Javascript select list with search by typing in the list

Often we encounter scenarios where we have a long list and the user needs to select an element from the never ending list.

This can be solved by using a simple jQuery plugin.

Here you go chosen is what you need. This page gives you an idea how can you use and which scenarios it can be used. Download it and copy its resouces into you web resources directory.

How to use:

$("#selectList").chosen({
                'width': '25%',
                allow_single_deselect: true
            });   




Update list:




$('#selectList').trigger("chosen:updated");




If you have any doubts please let us know in comment section.


					


			



				
			
				


	
	

		

							

																			

						
			
Capitalizing first letter and replaceAt particular index of String in Javascript
		


		

			
These are the two functions that will help in most cases where we need to replace index of a particular string.


Capitalizing first letter of a string can also be done using CSS property text-transform:capitalize, in many cases such as if we want to show a string with first letter capital in title attribute on hover this doesn’t work. So this is handy JavaScript function that will be useful.




//replaceAt index of particluar string




function replaceAt(str, index, replacement) {
    return str.substr(0, index) + replacement + str.substr(index + replacement.length);
}






//capitalize first letter of a string

function capitalizeFirstLetter(string) {

    if(typeof string != "undefined" && string != "" && string != "undefined"){

    return string.charAt(0).toUpperCase() + string.slice(1);

    } else {

            return string;

    }

}




					


			



				
			
				


	
	

		

							

																			

						
			
Make a list menu element active when included using php include
		


		

			
Often there is a requirement to make a menu element active when we import something using php include. Its quite simple and this is how its done.








<? php include "includes/sidebar.php"; ?>  




(sidebar.php):






<ul id="sidebar">
  <li><a href="link1.html">Link1</a></li>
  <li><a href="link2.html">Link2</a></li>
  <li><a href="link3.html">Link3</a></li>
  <li><a href="link4.html">Link4</a></li>
</ul>




CSS:




ul#sidebar > li.active {
 background-color:#6495ED;
 color:#fff;
}




JavaScript (jQUery solution):








//current url being access
 var cur_href = window.location.href;
 $(document).ready(function(){
  $("#sidebar li a").each(function(){
   //get current href link
   var cur_attr =$(this).attr('href');  
   //save into regex
   var regex = new RegExp(cur_attr,"ig");
   //test if current link and current href matched
   if(regex.test(cur_href)) {
    $(this).parent().addClass('active'); //if yes then addClass 'active'
   } else {
    $(this).parent().removeClass('active'); //else removeClass 'active'
   }
  });
 });




This will make current menu link active in sidebar.