Character Count for Multi-line Text box in SharePoint List Forms

While working with SharePoint, you might have come across a scenarios where you need to count the character for Multi-line text-box in SharePoint list form. In this post I am going to implement Character Counter for Multi-line Text box using JQuery.

To outline the solution please follow the below steps –

Step 1 : Open your List new/edit form using SP Designer.

Step 2: Add tag under your multi line text filed description in the New form.

Step 3: Add the below code in your New form. and download Jquery latest file.

Step 4: Save the form and refresh your page.

Thank you. 🙂

Quick Search in SharePoint List Using JQuery

In this post I am going to implement a quick search in SharePoint list using JQuery that allows you to search records in a list. It is useful in a situation where you don’t have SharePoint Search setup and just need a simple way of performing search operations in a SharePoint List.

To outline the solution please follow the below steps –

• Download the latest JQuery file from Here
• Create a Custom SharePoint list in which you would like to implement the search
• Open the SharePoint Designer
• Go to All Files-> Lists->Select the name of the list we just created
• Paste the JQuery file (jquery-min.js) we just downloaded
• Create a new JavaScript File-> Rename the file as “QuickSearch.js”
• Open “AllItem.aspx” view and add the reference of both the JQuery file
  

  <script type=”text/javascript” src=” QuickSearch.js”>

  <script type=”text/javascript” src=”jquery-min.js”>

• Now Edit the “QuickSearch.js” file, type below code and Save the file

$(document).ready(function(){

$(“input.search”).change(function() {

     var txt = $(“input.search”).val();

     if (txt) {

              $(“#WebPartWPQ1”).find(“tr.ms-itmhover:not(:Contains(“+txt+”))”).hide();

               $(“#WebPartWPQ1”).find(“tr.ms-itmhover:Contains(“+txt+”)”).show();

                   } else {

                    $(“#WebPartWPQ1”).find(“tr.ms-itmhover”).show();

                  }

           }).keyup(function(){$(this).change();

     });

});

<div style=”padding: 5px; border: 1px solid #cccccc; width: 60%; margin: 10px auto 0pt; background: none repeat scroll 0% 0% #efefef; display: block;”>

<h3 style=”text-align: center;”>TYPE HERE : <input class=”search” style=”padding: 10px;” type=”text”/>

Explanation : We would like to start our function anytime the search input text is changed. Once it’s changed, it sets the value of a variable we have called “txt”.

Here we have an IF statement that just checks if there is indeed something in the search box, ELSE everything goes back to normal. If there is something inside the search input box, we are going to do two things. First, we’ll find any row that does NOT contain the string, and we’ll hide that row. Then we’ll find any row that DOES contain that string, and we’ll show that row. Finally, we chain a “keyup” function to the change function so that as we type everything is happening all together.

And last but not least, we created a simple search input box with a class of “search”.

Now open the SharePoint List All Item view in internet explorer and If you have done everything correctly then it will filter the items on the basis of your inputs.

PS : You’ll have to change the target WebPart ID it’s searching in and replace it with your current Web Part ID and its row class.

I hope you find this post useful.

Disable browser back button functionality using JQuery

Sometime we have requirement in developing a website to disable the back button effect from browser. This is common in sites where security is of principal concern. Please note we cannot disable the browser back button functionality from users machine only thing that can be done is prevent them.

In the following example I am having one HTML page Disable.html and when user click on link (Visit Google Home Page), will be directed to Google Home page. but if the user tries to go back from Google page we will prevent the browser back button using JQuery.

<!doctype html>
<html>
<head title=”DisableBack”>
< script src=`https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js` >
< /script >
< script type=”text/javascript” >
$(document).ready(function () {
window.history.forward(1);
});
“< /script >”
</head>
<body>
<div>
< h1 > Disable Browser Back Button Functionality Using JQuery </ h1 >
< a href=`http://www.google.com/` > Visit Google Home Page < /a >

< /div >
< /body >
< /html >

The above highlighted function in the HTML page uses the history of the browser and forces it to navigate forward instead of going to the previous page. Therefore, every time the user clicks the back button or hits the backspace key, it will result in the browser navigating or pushing the user forward and showing the same Google home page.

You may want to warn user if back button is pressed so that user doesn’t lose their unsaved data then please add the following snippets in script tag of the page.

$(window).bind(“beforeunload”, function () {

return “Back button has disabled for this form”;

});

 

Thanks!! 🙂 🙂