curiouswebster
asked on
triggerEvent is not hitting the breakpoint
I created an event called 'cleanTab' but the jquery below is not working:
the length of test variable 'anchors' (below) is 4, which is the correct value:
Any idea what may cause my breakpoint NOT to hit?
$('<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);
}
}
})
});
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');
Any idea what may cause my breakpoint NOT to hit?
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
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:
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?
$('<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);
}
}
})
});
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?
ASKER
'cleanTab' is my event. The is a custom event.
This jQuery fires the event:
$('ul.cs-tabs > li > a').triggerHandler('cleanT ab');
This jQuery fires the event:
$('ul.cs-tabs > li > a').triggerHandler('cleanT
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?
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?
ASKER
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;
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?
ASKER
yes
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks. I will test this tomorrow.