jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

Hello i have a requirement where user pressed back button of the browser it should logout automatically my technology is asp.net mvc  how can i achieve it thanks in advance
Microsoft Azure 2017
LVL 13
Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

I am getting an error in the console from an anchor tag.  I'm not sure how to fix it.
jquery-2.2.4.min.js?ver=null:2 Uncaught Error: Syntax error, unrecognized expression: https://MYSITE.com/for-businesses/#myintroduction

I'm not sure how to fix a jQuery error on an anchor tag.
I use vector map. and I hope to capture the selected US state (california) on click when California area is clicked, and then pop up a modal. so I can take the selected state (California) and develop some api call.

Do you know how to do that? Just capture the state and get modal up.

hi i am looking for onkeypress javascript code for <input> just want mask phone like (xxx)xxx-xxxx
popover moves slightly to the right when the first time user clicks popover button twice.

steps to reproduce:
1. Use link  https://jsfiddle.net/girinishantg/m1p75fbx/1/
2. click on popOver button, a popover appears, drag this to any location, let's say the end of the line.
3. click again popover button, the popover will disappear.
4. click on the popover button again, this time popover will appear but slightly to the right where the user left it earlier.

Expected Behaviour: It should appear exactly the same location where left earlier.
creating a file manager in coldfusion and having some troubling viewing the directory contents

Here is the code I am using

<div class="col-sm-3 sidenav">
<div class="panel panel-default">
    <div class="panel-heading">Folders</div>
    <div class="panel-body">
    	<div id="drivestree"></div>

Open in new window


<cfset drives = {}>
<cfset alphabet = "abcdefghijklmnopqrstuvwxyz">

<cfloop from="1" to="#len(alphabet)#" index="i">
		<cfset thisdrive = mid(alphabet,i,1)>
		<cfset checkDrive = Application.fileManager.manager.getDirectories(path=thisdrive & ":\",addHasDirs=true,hidehidden=true)>
        <cfif checkDrive.directories.recordcount>
            <cfset drives[thisdrive] = checkDrive>
		<cfcatch><!--- failed Silently ---></cfcatch>

<ul class="jqueryFileTree"<!---  style="display: none;" --->>
    <cfif not structisempty(drives)>
        <cfset drivelist = listsort(structkeylist(drives),"text","asc")>
        <cfloop list="#drivelist#" item="d">
                <cfif drives[d].directories.recordcount> 
                    <li class="directory collapsed"><a href="##" rel="#URLDecode(d)#">#d#:\</a>
                    <cfloop query="drives[d].directories">
                        <cfif type eq "dir">
                            <li class="directory collapsed"><a href="##" rel="#URLDecode(name)#/">#name#</a></li>

Open in new window

I am using the latest datatables with Keys and Editor which is working great except for somewhat slugglish performance when moving around using keys. We are using an inline editor allowing the user to tab through the fields and specify values. The problem is the users are quick on the keyboard and it takes the interface a second or so to focus and render the editor for the cell. The delay is long enough for keyboard entries to be lost. Are there any common tricks I can look for to improve this speed?

My datatable is:

mainTable = $('#OrderDetails').DataTable({
data: data.OrderDetails,
dom: 'Blfrtip',
lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
deferRender: true,
fixedHeader: true,
rowId: 'OrderDetailId',
keys: {
columns: '.SizeField, .EditableLineField'
buttons: [
extend: 'excel'
, text: 'Export'
, className: 'btn btn-circle btn-lg blue'
, exportOptions: {
columns: ':visible'

I am using the latest version of datatables.net with the Keys extension with an inline editor.  

Our table rows contains a mix of editable and non-editable cells.  We want clicking the arrow and tab keys to skip over the non-editable to the next editable cell.  Below illustrates what we want but we are at loss to make it happen:

I need to change Add new Item to add new recognition for the list I am working on and also I need to change the title and web part is not giving me editing options.
I saw the aspx code for the views on the list and i see where there is a newItem parameter binding
<ParameterBinding Name="AddNewAnnouncement" Location="Resource(wss,addnewitem)" />
but I am hesitant to change that thinking there would be changes to every add new item list.
i know some forums are mentioning jscript and I have tried that, it doesn't work in 2016. Can someone please point to right direction?
Client has asked me to provide some idea about how to duplicate the http://playspent.org/ gamification system.

If someone knows of a system like this in the wild which might be used to duplicate a similar site, let me know.

Something beyond simple systems like https://github.com/mulhoon/score.js providing layout of badges + count accumulation buckets in a response style system.

Maybe some sort of bolt onto score.js using SVG graphics for presentation.

Bootstrap 4: Exploring New Features
LVL 13
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

I am writing a plugin for CKEDITOR which creates a custom tag. Once this custom tag has been set, I need put my cursor in between it.

Is it possible to put the cursor to a specific location inside a textbox using JavaScript or jQuery?
Trying to repurpose code that is taking an attachment link from a custom Edit form in Sharepoint and making it work dynamically if there is more than one attachment. Originally it was devised thinking the items would only have 1 attachment.

$( document ).ready(function() {
var attachurl = $("#idAttachmentsTable").find("a").attr('href');
	$("#linkurl").attr("href", attachurl);

if  (attachurl== null) { 
else {


Open in new window

The current code is finding the "first" attachment and replace the URL to the file with the placeholder URL.

<div id="attachment"><p style="font-size: 20px; font-weight: normal; margin: 0; Margin-bottom: 15px;">
<a id="linkurl" href="/teams/lms_help/portal/Lists/Requests/Attachments/samplefile.txt" target="_blank">Download Attachment</a></p></div>

Open in new window

Now, the code would have to iterate through all of the potential rows of attachments in the "idAttachmentsTable" (if there are two or more) and then add a new line to the div. Download Attachment would have to be replaced with the "Name" of the file.

Any suggestions on how to approach this would be helpful.


Does anyone know how to add a box that would count how many attachments there are and put that into the DIV instead?

I am attempting to write code in node.js to edit a record which has a file location for the image's url in the database.  I was able to edit all the other field columns pretty well. However, it appears that for security reasons, editing a image is not easily allowable....but there must be a workaround this in order to edit a record with an image file's url to upload another image. I keep getting this message:

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Here is my code for the form file upload:
<label for="file">Profile Photo:</label>
        <input type="file" name="image" id="image" onChange={this.uploadFile}>

Open in new window

Here is the frontend code for editing all records which I added the image value to:

$(document).ready(() => {
    $(document).on('click', '.edit', function (e) {
        action: $(e.target).attr("href"),
        //action: "/station", // PATH TO POST NEW STATION DATA ?
        method: "PUT"
      var value = $(event.target).closest("div").find("input:hidden").val();
      value = JSON.parse(value);

      $("#store", "#modalStationForm").val(value.Station);
      $("#image", "#modalStationForm").val(value.Image);

Open in new window

The codes below is working when I put  var x = ['John', 'Mary', 'Serena'];
when I put  var x = ['John Smith', 'Mary Wu', 'Serena Chan'];   it is not working.

Do you know why and how to fix it?


 function openNav() {
        var x = ['John Smith', 'Mary Wu', 'Serena Chan']; 
        document.getElementById("bondlisting").innerHTML = '';
        for (i = 0; i < x.length; i++) {
            document.getElementById("bondlisting").innerHTML += '<a href="#" onclick=DropValue(' + x[i] + ')>' + x[i] + '</a><br>';

 function DropValue(str) {
	alert("HI " + str);

Open in new window

I have 3 radiobuttons; two have a corresponding textbox, and the last one has a fileupload. The two textboxes and fileupload have a total of 3 separate validators. When a radiobutton is selected, the other two textboxes/fileupload hide, so only one is shown at a time depending on what radiobutton is selected.

I've coded this so if you click a submit button, the only validator that matters is the one that's associated with the selected radiobutton, since I don't want the hidden forms to count. The issue I have is when you select a radio button, the validator error message immediately appears. I only want the error message to appear if the user clicks the submit button without filling out the textbox/fileupload that has been selected.

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="server">
    <style type="text/css">
        .singlefield {
            margin-left: 12px;
            padding-right: 12px;

        .radioButtonList label {
            display: inline;

        .Hidden {
            display: none;

        .Invisible {
            visibility: hidden;
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <div class="page-content">
        <div class="page-header">
            <h1>Create Campaign
        <!-- /.page-header -->
        <div class="row">
            <div class="col-xs-12">

Open in new window

I'm way over my head trying to get a combination of JQuery Mobile, srcset, lazyloadxt, and bx-slider to all play nicely together. I'm using a lazyloadxt-specific extension to allow it to work with srcset. Here is a pen of where I am currently:


On page load, a single placeholder is shown as the first slide, whereas all the other slides appear to be empty. In this case I'm labeling each image (e.g., "?text=Image+1", etc.), but the only image that loads here didn't get that memo. If I disable the slider and the images load inline, they all get their assigned labels (Image 1, Image 2, etc.)

Once you start paging through the empty slides, that first single loaded placeholder appears to shift to be the last slide. Even weirder, if you continue to page forward and return to the first slide, this lonely image is nowhere to be found until you start paging backwards, at which point it populates (briefly) both he first and last slots of the slider. It's very strange and difficult to parse or explain – but you'll see at the link.

I can confirm that this is very similar to what I'm seeing in the actual page I'm working on - last slide becomes first slide, only the first image loads, and all others are blank. So at least I have some form of consistency – always welcome.

Ultimately there's even more to this, as I'll need to pull some links in from another page via .append(), adding another slide to the end of the slider for each …
I am trying to place charts in tooltips using google charts. And got stock . Placing charts in the tooltip from this page


I am using this example but but instead of showing linear graph I need to to show a bar graph. The original graph is the linear graph

Thank you

	google.charts.load('current', {'packages':['corechart']});
	var primaryData = [
		<cfoutput query="qGetClassesPerMonth">
			["#sYearFull#", '#sessionKey#']	,
      var tooltipData = [
        <cfoutput query="qGetClassesPerMonthPerToolTip">
        	['#sessionkey#','#zipcode#','#zCnt#']	,
        var tooltipOptions = {
        title: 'U.S. Viewership Over The Last 10 Years (in millions)',
        legend: 'none'
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i+1]);

          var hiddenDiv = 

Open in new window

Hi Experts,

Need help with our african stock photo site, we are preparing to launch it soon.  We have an issue with loading, it takes forevert to load the images for the categories, and need a better way to load the images ..one by one, and not like now where it loads everything then loads the images... it is using a infinity scroll. See:  https://www.stockimagesafrica.com/downloads/category/southern-africa

We want it to load like pexels.com

Thanks again
I installed Guzzle and  the Avalara tax client on my machine today and got the attached notices while doing so... is that "hard copies" notice something to be concerned about? It seems like its saying that it took a snapshot of those folders and if I ever change anything in the source folders from now on I need to reinstall, which obviously isn't good.
Angular Fundamentals
LVL 13
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Any suggestions on a good Image Editor utility for asp.net?

We want the user to be able to drag or upload an image, then crop/resize/rotate as needed.

Then  save the image.

Mostly the crop/resize/rotate part.

Javascript, jquery, etc. is fine.

Hello experts,

Need help with getting our feed to load the page quicker by loading artwork one at a time..it is a large feed and need better way of loading so it does not use a lot of data... http://www.einsteinsolutions.xyz/chaminuka/public/home. the page is loading art that is being uploaded..we have over 1000 artworks to upload but need a way of having an infinity scroll or lazy load that does not consume too much data on page load, and makes the page load slow.  Is they way to load each item in the array one by one like it is on pexels.com , and saving bandwidth.  Help here would be appreciated.
For a Wordpress plugin I need to insert a Imagelist to the media insert dialog of wordpress. I think the best way is to use a jquery list.

My question is, anybody has a suggestion or link to a good iage list to use inside Wordpress plugins?
I have a pjax page as follows (static container Id)

	'id' => 'pjaxContainer',
	'timeout' => 7500,

Open in new window

and then in my modal I use

var pjaxId = 'pjaxContainer';
$.pjax.reload({container:$('#'+pjaxId, timeout:5000, async:false});

Open in new window

Now, this works.

That said, I now need to make the pjax Id dynamically named.  So I've changed my code to

$uniqid = uniqid();
	'id' => 'pjaxContainer'.$uniqid,
	'timeout' => 7500,

Open in new window

Added the following to the index page to set a global javascript variable value based on the id

pjaxId = 'pjaxContainer$uniqid';

Open in new window

And then, in my modal, used

$.pjax.reload({container:$('#'+pjaxId, timeout:5000, async:false});

Open in new window

but it reloads the entire page, not the pjax container.  I've checked and pjaxId is returning the correct Id value.  It appears to send the same get request as before.

What am I missing?  How can I make pjax reload work with a dynamically named container?
I have a jQuery Mobile listview (Cordova) which I populate like this:

       * @description populates the listview with all the clients
      this.populateListviewClients = function() {
        var markupHTML = [];
        for (x = 0; x < app.allClients.length; x++) {
          //create markup
          var markup = '<li><a href="#" class="modalCustomer" id="' + app.allClients[x].id + '">' + app.allClients[x].name + '</a></li>';



Open in new window

and the HTML is this:

            <form class="ui-filterable">
                <input id="filterable-input" data-type="search" placeholder="Search clients...">
              <div data-theme="b" data-content-theme="a"></div>
              <ul id="listviewClients" data-role="listview" data-filter="true" data-inset="true"

Open in new window

Everything loads nicely, but I cannot get the callback to work - even though I assigned each <a href> a generic class name.
I would like to get the callback because I would like to know which link the user clicked.

This is the callback:

  // Update DOM on a Received Event
  receivedEvent: function (id) {
    $("#allWidgets").on("click", function (e) {
      $(':mobile-pagecontainer').pagecontainer('change', '#addItems', {
        transition: "slidefade"

    $(".modalCustomer").on('click', function(e) {

Open in new window

I checked with my debugger.. the browser does not enter the <a href> callback.

What is missing in my code - or my logic?


OK.  I am pretty new to HTML , javascript, jquery and Adobe captivate.
I have to use captivate at work to build my e-learning courses.
Captivate does not have drop down lists, so I have a javascript application that overlays a Captivate text caption element with a "select" drop down element.
It works to a point.  The captivate slide opens with the "select" drop down covering the text caption element.
However, when I resize the browser, all Captivate elements change with the browser, but the "select" drop down remains in the same location.
I need it to follow the text caption element.
So, I opened a debugger and see that the DIV section where the text caption is located is in a DIV section created by Captivate, where the DIV section for the "select" drop down element is in a separate DIV section all together
If I understand HTML correctly, the problem is the "select" drop down element is NOT in the same blocks/frame as the text caption, so it does not move with the browser.

So my question is, how do I get that "select" drop down element to either over write the text caption element or how do I get (trick) the HTML to get the "select" drop down DIV to size with the DIV of the text caption element?






jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics