Lets say I have the following code:
JS:
$('.remove').button("destroy");
If I were to run this before .button() is called, I get an error in the console like the following:
Error: cannot call methods on button prior to initialization; attempted to call method 'destroy'
How can I check to see if a button was actually created before attempting to destroy it?
$('.remove.ui-button').button("destroy");
You can try
$('.remove').filter(function(){
return $(this).data().uiButton != undefined
}).button('destroy')
You may use this -
if ($('.remove').hasClass("ui-button"))
{
// Button exists
}
else
{
// Button does not exists
}
I just figured it out
if($('.remove').is(":ui-button")){
$('.remove').button("destroy");
}
try to take advantage of "create" button
create a global variable
var created=false;
while applying ui to button
$('button').button({create:function(){created=true;}});
while removing
if(created==true)
{
// destroy
}
Related
I was working on Co-drops Minimal Form Interface. I couldn't understand this code snippet in stepsForm.js. (Line 50)
stepsForm.prototype.options = {
onSubmit : function() { return true; }
};
I am new to JS, and wouldn't mind an explanation of the entire code in stepsForm if anyone has the time to do so. But, for the time being, an explanation for the above can do wonders for me. I know what a prototype is, but the onSubmit part is going over my head. I read on another question that this is to prevent refresh, but I feel that is wrong.
The library exposes options property that you may/can use to pass your own overriding values.This one in particular, exposes onSubmit.
For any html form an onSubmit is called when the submit action is invoked by another function or by click.
In the library the default onSubmit is returning true, meaning just execute the action. This can be overriden with you custom function like this...
<script>
var FORM_ELEMENT = document.getElementById( 'myForm' )
new stepsForm(FORM_ELEMENT, {
onSubmit :
function (FORM_ELEMENT) {
alert('You are about to submit the form ');
//manipulate your form or do any preprocess work...
return true;
});
</script>
Within the library the _submit (line 196 stepForm.js) is called which inturn calls the onSubmit. This time, instead of the default, it will execute the one we added above.
stepsForm.prototype._submit = function() {
this.options.onSubmit(this.el);
}
Hope that helps.
Below is the code that I used for multiple java scripts on a single button. But only any one is working when I disable the second one. Please let me know: how do I change my code to make it to work fine?
function invoke(but)
{
if(but==0)
{
function move(){
document.getElementById('tgt1').value =
document.getElementById('Allocation').value;
document.getElementById('Allocation').value="";
document.getElementById("Send").disabled=true;
}document.myform.action="Alloc_Insert.do";
}
else if(but==1)
{
document.myform.action="";
}
else if(but==2){ document.myform.action="WL_Verif.do";}
else if(but==3){ document.myform.action="Add_Query.do";}
document.myform.submit();
}
And the html is as below:
<input type="Submit" value="Allocate" id="Send" name="submit" onClick="invoke(0);move();"/><br/>
change the name of the button to something else than "submit"
To explain what happens:
When you assign the name-attribute "submit" to the button(or any other form-element), this element will be accessible via
document.myform.submit
but there is also the build-in method of a form: submit(), you also may access it by using
document.myform.submit
What happens now when you call document.myform.submit()
I'll write the code a little bit different, and you will see trouble:
document.myform['submit']()
Instead of accessing the built-in method, the code points first to the form-element, and then tries to execute the method. But a form-element is not a method, it all ends up in an error and the rest of the script(including the call of move() ) will not get executed.
It's the same with "reset", you never should use the name of a built-in property/method of the form-element as name for form-elements.
notice the 'move' function is not declared outside the 'invoke' function.
Then;
either wrap them in a self invoking function:
onclick="(function(){ invoke(0);move(); })();"
or attach event handlers (preferred usually)
div.attachEventListener('click', function () { ... }); // DOM 3
div.attachEvent('click', function () { ... }); // IE
Your functions are declared in a weird way. You're defining move inside of invoke, which I don't think you want. If you want to have two functions, put move outside of invoke, like this:
function move(){
document.getElementById('tgt1').value =
document.getElementById('Allocation').value;
document.getElementById('Allocation').value="";
document.getElementById("Send").disabled=true;
}
function invoke(but)
{
if(but==0)
{
move();
document.myform.action="Alloc_Insert.do";
}
else if(but==1)
{
document.myform.action="";
}
else if(but==2){ document.myform.action="WL_Verif.do";}
else if(but==3){ document.myform.action="Add_Query.do";}
document.myform.submit();
}
A note: it's generally not a good idea to use onClick in your HTML -- it's better to put that in your JavaScript.
I think the problem is the scope of the move() function. Try defining move outside of invoke.
function invoke (but) {
if(but==0) {
document.myform.action="Alloc_Insert.do";
// I don't know if you meant to call move() here or not
}
else if (but==2) { document.myform.action="WL_Verif.do"; }
else if (but==3) { document.myform.action="Add_Query.do"; }
document.myform.submit();
}
function move(){
document.getElementById('tgt1').value =
document.getElementById('Allocation').value;
document.getElementById('Allocation').value="";
document.getElementById("Send").disabled=true;
}
Also, properly formatting your code will do wonders to the legibility of it.
NOTE: Firefox seems to be quite happy to execute the onClick="invoke(0);move();" even if move is defined inside invoke. Chrome however won't execute move because it can't find it. So be sure to test your script in multiple browsers as well.
I have a variable being set in a plugin JS file, and in my own custom JS file, I'm calling the same event to piggypack on the developers work.
The issue is I need to access a variable set in the plugin javascript event. It's currently being set as follows in the plugin JS:
$('#link').live('click', function() {
var test = 123456;
var another = 'string';
$('body').trigger({
'test' : test,
'another' : another
});
});
Now, in my own custom JS, I'm calling the same method on the #link to add my own code to execute.
$('#link').on('click', function(){
// I need to access the another variable set previously
});
What I don't really get is when the jquery docs say that the trigger method is passing arguments to the event handler. What does that mean exactly? How would I access the variable set in a previous event?
Thanks in advance as always.
NORMALLY, you would pass extra parameters to an event, IF it has a custom event, you can access that:
$('#link').live('click', function() {
var test = 123456;
var another = 'string';
$('body').trigger('HIT',{
'test': test,
'another': another
});
});
$('body').on('HIT', function(e,param1) {
$('#hitter').append('hi');
$('#hitter').append(param1.test);
});
after this HIT event, the value of #hitter would have "hi123456" appended to it. To access the "another" is simply param1.another, which returns "string".
I am trying to check if an object with class sourceFocus has data in it. However when I check it, it does not have data when it should. What am I doing wrong here?
$('.source').click(function() {
$('.source').removeClass('sourceFocus');
$(this).addClass('sourceFocus');
$(this).data('source_selected', true);
console.log($.hasData(this));
console.log(this);
});
$('.target').click(function() {
$('.target').removeClass('targetFocus');
$(this).addClass('targetFocus');
$(this).data('target_used', true);
//$('.sourceFocus').data('source_used', true);
console.log($.hasData('.sourceFocus'));
if($.hasData('.sourceFocus')){
console.log("has data worked");
check_for_duplicates();
}
I don't think the .hasData() method accepts selectors in your case .sourceFocus, try selecting .sourcefocus as an element and then passing that to the .hasData() function.
try something like...
console.log($.hasData($('.sourceFocus:first')));
$.hasData() checks against a DOM Element
you have to get it out of the jQuery object, either using array notation or the .get() method (not to be confused with the $.get() ajax method)
console.log($.hasData($('.sourceFocus')[0]));
If you trying to read the HTML between the tags for which you are using .sourceFocus class then do this in your if statement:
$.hasData($('.sourceFocus').html())
This is oldish code but anyway...
I am trying to filter a store, and listen to the event in a comboBox, so I can refresh it.
My doQuery event didnt work, ( well actually it did work, but returned random result sets, leaving an overall wtf feeling )
config.store.filterBy(function Filter(record){
//this works
if (record.data.field != ""){
return true;
}
else {return false;}
});
However this does not automagically update the combobox.
So I tried various versions of
cbx = new Ext.getCmp(this);
debugger; //scope right here
this.getStore().on("datachanged",function refresh(){
cbx.reset();// store's scope
});
But the scope of cbx always seems to be the store, instead of the combobox.
Anyone have any a clue how to do add said a listener for the data change event in a store to a comboBox?
The default scope of an event callback is the object that triggered the event. In this case that would be the store. The third parameter of the method on() allows you to override the scope. Set the third parameter to this and your good to go.
From the documentation (3.x and 4.x):
on( String eventName, Function handler, [Object scope], [Object options] )
So something like this should do the trick:
this.getStore().on("datachanged", function refresh() {
cbx = Ext.getCmp(this);
cbx.reset();
}, this); // <-- Provide scope for the callback function
You can always set the scope of a function in ExtJS (I assume you're using ExtJS 3.x) with Function.createDelegate.
this.getStore().on("datachanged",function() {
cbx.reset();
}).createDelegate(this);
Although from the code sample you've provided, I'm not sure what the problem is since cbx.reset() shouldn't have any scope problems.