Link to home
Start Free TrialLog in
Avatar of curiouswebster
curiouswebsterFlag for United States of America

asked on

triggerEvent is not hitting the breakpoint

I created an event called 'cleanTab' but the jquery below is not working:

$('<li>',
                {
                    'prependTo': $('ul.cs-tabs'),
                    'class': 'cs-tab',
                    'append': $('<a>',
                        {
                            'data-toggle': 'tab',
                            'data-id': request.ListId,
                            'data-name': request.ListName,
                            'data-sites': JSON.stringify(request.Sites),
                            'html': request.ListName,
                            'on': {
                                'cleanTab': function (event) {
         >>>>                  var tabName = event.data('name'); <<<<<< breakpoint
                                    tabName = tabName.substr(tabName.length - 1) == '*' ? tabName.substring(0, asteriskIndex) : tabName;
                                    event.attr('data-name', tabName);
                                    event.attr('html', tabName);
                                }
                            }
                        })
                });

Open in new window


the length of test variable 'anchors' (below) is 4,  which is the correct value:

            var anchors = $('ul.cs-tabs > li > a');

            $('ul.cs-tabs > li > a').triggerHandler('cleanTab');

Open in new window


Any  idea what may  cause my breakpoint NOT to hit?
Avatar of Kim Walker
Kim Walker
Flag of United States of America image

I created an event called 'cleanTab'
How did you create the event? What activity have you programmed the DOM to recognize to trigger the event?
Avatar of curiouswebster

ASKER

I thought attaching the event to the anchor tag was enough?

Look at my code where I have created:

'on'
'cleanTab'

which contains the breakpoint
I'm not aware of a DOM event called "cleanTab". If there is an event that I'm not aware of, the syntax is wrong for binding to it. Perhaps you mean the following:
$('<li></li>',{
	'prependTo': $('ul.cs-tabs'),
	'class': 'cs-tab',
	'append': $('<a></a>',{
		'data-toggle': 'tab',
		'data-id': request.ListId,
		'data-name': request.ListName,
		'data-sites': JSON.stringify(request.Sites),
		'html': request.ListName,
		'on': {
			'cleanTab',{
				name: "somename"
			}, function (event) {
				var tabName = event.data('name');
				tabName = tabName.substr(tabName.length - 1) == '*' ? tabName.substring(0, asteriskIndex) : tabName;
				event.target.attr('data-name', tabName);
				event.target.attr('html', tabName);
			}
		}
	})
});

Open in new window

I've added a comma after the event name. I've inserted a data object with a name property which is referred to on line 14. And I've added the target property to the event references on lines 16 and 17 although I believe the html attribute reference is wrong — it should probably be an html property reference.

There is a request object and an asteriskIndex variable referred to in this code snippet. I have to assume those references a proper.

What user activity fires the cleanTab event?
'cleanTab' is my event. The is a custom event.


This jQuery fires the event:

$('ul.cs-tabs > li > a').triggerHandler('cleanTab');
I think you misunderstand the concept of events. Events are indigenous to the browser. They are activities which occur in the browser such as mouse movements, mouse button actions, document load completions, window size changes, focus and blur, etc., etc. You cannot create a custom event without altering the browser programming.

Using javascript or jQuery, you can establish a listener which is constantly waiting for a particular event to occur and then perform a specific action or function based on the occurrence of that event. For example, a listener can be set up to wait for the left mouse button to be depressed (mousedown event) and perform a specific task when it is depressed.

But there is a finite list of events that the browser can be configured to watch for. Here is a fairly concise list of events that can be used to trigger actions in the browser.

The triggerHandler method in jQuery is used to manually execute the handler(s) that are bound to an element for a particular event. The argument for triggerHandler is the name of one of that finite list of events from the link above.

Is it safe to conclude that the objective of your cleanTab event is to remove an asterisk from the end of the data-name attribute value and from the content of the link? At what point are you attempting to execute the triggerHandler? Is it automatically executed during the loading of the page or is it triggered by clicking on a button or link?
Inside the 'Update' switch  statement, after the user clicked the Update button

 case 'Update':

            // Refresh Updated Tab                     
            var updatedTab = $('li.cs-tab > a[data-id="' + request.ListId + '"]');
            $(updatedTab).attr('data-name', request.ListName);
            $(updatedTab).attr('data-sites', JSON.stringify(request.Sites));
            $(updatedTab).text(request.ListName);

            // Display Update Successful Message
            $('div.cs-update-success-msg')
                .slideDown('slow',
                    function() {
                        $(this).show();

                        $(this)
                            .slideUp('slow',
                                function() {
                                    $(this).hide();
                                });
                    });

            $('ul.cs-tabs > li > a').triggerHandler('cleanTab');

            break;

Open in new window

And is it your objective to remove the asterisks from the data-name attribute and from the html of those elements when the update button is pressed?
yes
ASKER CERTIFIED SOLUTION
Avatar of Kim Walker
Kim Walker
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks. I will test this tomorrow.