TypeError: click called on object that does not implement interface HtmlElement

I've seen the other questions on this topics, but i can't spot the error in my code.

$('#submit_bulk').on('click',function(e){

    var action = $('select[name="bulk_action"]'),
    targets = $('table tr td:first-child :checkbox:checked');
    if(action=='invalid' || targets.length == 0){
        sk.alert('Nothing to do','warning');
        return false;
    }else{
        $(this).html('Working....');

        var fData = {
            action: action,
            mixtapes: '',
            singles: ''
        };

        $.each(targets,function(i,v){
            if($(this).data('type') == 'mixtape'){
                fData.mixtapes += $(this).data('id')+',';
            }else{
                fData.singles += $(this).data('id')+',';
            }
        });

        fData = $.param(fData); 

        console.log(fData); //i get no output here. is fData null?

        $.post(window.location.origin+'/adminAPI/bulk_action',fData,function(data){
            var data = JSON.parse(data);
            if(data.error==0){
                sk.alert('Your changes were saved','success');
                //update view here.
            }else{
                sk.alert(data.message,'error');
            }
        });
        $(this).html('go');
    }

});

via Chebli Mohamed

Javascript/jQuery to tell when YouTube is played

On http://www.pegstar.net/ we are displaying the videos using the old object code (example code is below) and displaying 15 videos per a page. These are all dynamically generated and looking to upgrade to the iFrame API. One thing we are wondering is how many people are clicking on "play" on the videos. Is there a way to be able to tell this using the old object script or does it have to be updated to the iFrame API?

<object width="425" height="350" data="http://www.youtube.com/v/MIqhbyZ5iZg" type="application/x-shockwave-flash"><param name="src" value="http://www.youtube.com/v/MIqhbyZ5iZg" /></object>

via Chebli Mohamed

Add an "click outside of menu to close" jquary/javascript to a menu drop-up that has .toggle()

I would like to add the function to close the menu if i click outside the menu. And also keep the menu button working to close it too: http://ift.tt/1DNxM2R

$(document).ready(function () { $("li").click(function () { $('li > ul').not($(this).children("ul").toggle()).hide(); }); });

Also can you tell me if this is correct for mobile etc? I hope and think so, because it's using .click, right?

This is referring to this post, that I can't reply to the answer to ask there: How to change drop-down menu to drop-up menu

via Chebli Mohamed

Illegal Invocation while passing data attribute on Ajax

I am trying to get the data attribute of a button with id delete_btn and send it through ajax. As a result, I am getting the following error.

Uncaught TypeError: Illegal invocation

JQuery

var id = $( "#delete_btn").attr('data-identifier');

$.ajax({

    dataType: "json",
    url: apiURL,
    data: { 'req': 'delete', 'id': id},

    success: function(data){
        //   do something

    },
    error: function (textStatus){
        //do something
    }

});

I have even tried getting the attribute value by

 $( "#delete_btn" ).data( "identifier")

But got the same error

via Chebli Mohamed

ng-show, toggle right element on click [Angularjs]

I wana toggle elements but not all elements i need just one on which is clicked.

for example if I have 3 form elements and 3 buttons if I click on button 1. I just wana toggle 1. form element.

This is my current code:

angular:

$scope.formWhat = false;
$scope.formShow = function(item){
                   $scope.formWhat = !$scope.formWhat;
               };

html:

<div ng-repeat="x in comments">
<a href="#" ng-click="formShow(x)">replay</a>
       <form id="<%x.id%>" ng-show="formWhat">
        blbllblblbl
        </form>
</div>

This code will open all forms, but i need just on which is clicked, any idea?

via Chebli Mohamed

jQuery Autocomplete Results Not Highlighted/Underlined

I have a search bar with autocomplete that looks like this:

Attached is my code:

HTML:

<form
    method="GET"
    action="{{ URL('schedulizer/results') }}"
    accept-charset="UTF-8"
    class="form-inline global-search" role="form">
    <div class="form-group">
        <input
            type="search"
            class="form-control floating-label"
            id="q"
            name="q"
            placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045"
        >
    </div>
    <button type="submit" class="btn btn-material-teal shadow-z-1">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form>

JS:

$.ui.autocomplete.prototype._renderItem = function( ul, item){
        var term = this.term.split(' ').join('|');
        var re = new RegExp("(" + term + ")", "gi") ;
        var t = item.label.replace(re,"<b>$1</b>");
        return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + t + "</a>" )
                .appendTo( ul );
    };

    // once page loads, make AJAX request to get your autocomplete list and apply to HTML
    $.ajax({ url: '{{ URL('autocomplete') }}',
        type: "GET",
        contentType: "application/json",
        success: function(tags) {
            $( "#q" ).autocomplete({
                source: tags,
                minLength: 2,
                delay: 0,
                select: function(event, ui) {
                    $('#q').val(ui.item.value);
                }
            });
        }
    });

CSS:

.ui-autocomplete {

  .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;

    &.ui-state-hover, &.ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: red;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
    }
  }
}

The issue I have with this is, when I am scrolling down the results using my ^ and v key, the results within the autocomplete do not get highlighted/underlined. Only when I use my mouse to hover over the results, do my results get underlined.

I have some custom CSS that renders a Boostrap-like theme onto the autocomplete, and what I did was, I changed the parameters and added a background-color of grey, or render an underline on the active text, however, I was unable to fix the issue with using the arrow keys to navigate the autocomplete and underline/highlight the results.

I would love some assistance.

via Chebli Mohamed

jquery validation behaves different on android phone

I have written some jquery validation it works fine on desktop, iphone, but does not android phone.

on android it show validation errors on typing single word, it should not do this. on desktop it works fine and it only show error validation, if user moved to next field, same way it should work on android

via Chebli Mohamed