Category Archives: JavaScript

Limit Select2 to one selection per optgroup with multiple selection

Leave a reply

Here is a example to create multiple select with grouped multiple select where you can select one option per group.

HTML code

<pre class="wp-block-syntaxhighlighter-code">
&amp;lt;select multiple style=&quot;width: 300px&quot;&gt;
  &amp;lt;optgroup label=&quot;Alaskan/Hawaiian Time Zone&quot;&gt;
    &amp;lt;option groupid=&quot;a&quot; value=&quot;AK&quot;&gt;Alaska&amp;lt;/option&gt;
    &amp;lt;option groupid=&quot;a&quot; value=&quot;HI&quot;&gt;Hawaii&amp;lt;/option&gt;
  &amp;lt;/optgroup&gt;
  &amp;lt;optgroup label=&quot;Pacific Time Zone&quot;&gt;
    &amp;lt;option groupid=&quot;b&quot; value=&quot;CA&quot;&gt;California&amp;lt;/option&gt;
    &amp;lt;option groupid=&quot;b&quot; value=&quot;NV&quot;&gt;Nevada&amp;lt;/option&gt;
    &amp;lt;option groupid=&quot;b&quot; value=&quot;OR&quot;&gt;Oregon&amp;lt;/option&gt;
    &amp;lt;option groupid=&quot;b&quot; value=&quot;WA&quot;&gt;Washington&amp;lt;/option&gt;
  &amp;lt;/optgroup&gt;

&amp;lt;/select&gt;
</pre>

JavaScript Code


$(function() {
    $('select').select2({
      allowClear: true,
      placeholder: "Pick a State"
    });

    //Select2 Event handler for selecting an item
    $('select').on("select2:selecting", function(evt, f, g) {
      disableSel2Group(evt, this, true);
    });

    // Select2 Event handler for unselecting an item
    $('select').on("select2:unselecting", function(evt) {
      disableSel2Group(evt, this, false);
    });
  });


  // At some point during the select2 instantation it created the 
  // data object it needs with the source select option.
  // This function, called by the events above to set the current status for the
  // group for which the selected option belongs.
  function disableSel2Group(evt, target, disabled) {
    // Found a note in the Select2 formums on how to get the item to be selected

    var selId = evt.params.args.data.id;
    var group = $("option[value='" + selId + "']").attr("groupid");

    var aaList = $("option", target);
    $.each(aaList, function(idx, item) {
      var data = $(item).data("data");

      var itemGroupId = $("option[value='" + data.id + "']").attr("groupid");
      if (itemGroupId == group && data.id != selId) {
        data.disabled = disabled;
      }
    })
  }

Check demo here



Select2 Multi Select Select all when select all option

Leave a reply

Here is a example of select2 with added styling and if user choose option all then each and every option should be selected.

Select2 Multi-Selection select all when select all

Select2 Multi-Selection select all when select all

HTML for select2




<div id="clr_cont" class="contains">
	<small>Select your favorite colors</small>
	<select class="fav_clr form-control" name="states[]" multiple="multiple">
<option value="all">all</option>
<option>orange</option>
<option>yellow</option>
<option>green</option>
<option>blue</option>
<option>pink</option>
<option>purple</option>
	</select>
</div>

JavaScript For Select2

$(document).ready(function() {
    $('.fav_clr').select2({
		placeholder: 'colors',
		width: '100%',
		border: '1px solid #e4e5e7',
    });
});

$('.fav_clr').on("select2:select", function (e) { 
           var data = e.params.data.text;
           if(data=='all'){
            $(".fav_clr > option").prop("selected","selected");
            $(".fav_clr").trigger("change");
           }
      });

CSS For Select2 styling

.select2-container--default.select2-container--focus .select2-selection--multiple {
	border: 1px solid #333 !important;
} 
.select2 .select2-container .select2-container--default .select2-container--focus {
	border: 1px solid #333 !important;
}
.select2-container--default .select2-selection--multiple {
	border: 1px solid #333 !important;
}
.select2-search__field {
	background-color: white !important;
}
.select2-dropdown .select2-dropdown--below {
	border: 1px solid #333 !important;
}
.select2-results {
	background-color: #444;
	height: 100px;
	color: #222;
}
.select2-results__options {
	height: 100px;
}
body {
	background-color: #222;
	padding: 20px;
}
small {
	color: white;
}
.contains {
	background-color: #333;
	width: 500px;
	display: inline-block;
	padding: 20px;
	border-radius: 5px;
}

Check demo here : Select2 Multi Select all option example

How to send push notification to web browser

Leave a reply

What is push notification

Web push notifications are clickable rich content messages sent to your device by a website or a web app. Web Push notifications can delivered to your device, mobile or desktop, even when the user is not on your website.

What is push notification

What is push notification

These notifications can only be sent to users who have opted-in to receive these notifications. Web push notifications or browser notifications are supported by Chrome, Firefox, Edge and Safari.

Why Push Notifications

Web Push Notifications allow users to opt-in for timely updates from web apps that aim to re-engage their user base with content that might be interesting, important and well-timed for the users.

Push API

The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.

Example to get user permission and send push notification


&lt;script&gt;// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
  if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return;
  }

  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('Welcome to ptutorial', {
      icon: 'http://www.ptutorial.com/icon/umar.ico',
      body: "New post created",
    });

    notification.onclick = function () {
      window.open("http://blogs.ptutorial.com");      
    };

  }

}&lt;/script&gt;

Conclusion

You can use the above script to send push notification to web browser. You can also use this script with firefase or socket.io to send real time notification.