I am playing around with registering simple alert(msg) functions with onclick events on several HTML divs. I tried pure HTML buttons, links, textfields, and they all work fine.
I tried it with Zend_Form textfields and it works perfectly.
What does not work is buttons added to Zend_Form with createElement.
I went through different scenarios, like using jQuery and plain JavaScript, and everything works, but not buttons within Zend_Form.
Any ideas why?
EDIT:
Outside the form:
<button name="my_button" onclick="my_alert()">Click me</button>
works, while
(within A_Form extends Zend_Form):
$my_button = $this->createElement('button', 'my_button');
$my_button->setLabel('Click me');
$my_button->setAttrib('onclick', 'my_alert()');
$this->addElement($my_button);
produces proper HTML, but upon a call produces error msg "my_alert is not a function", which does not make sense, since both are placed within the same HTML document.
Related
I have the HTML form in QWebView loaded. This HTML has following two elements:
<button class="submit1" tabindex="1" type="submit" id="submit1">accept</button>
<button class="submit2" tabindex="2" type="submit" id="submit2">decline</button>
In code I have follwing:
QWebView webView;
...
QWebElement button = webView->page()->mainFrame()->documentElement().findFirst("button[id=\"submit1\"]");
button.evaluateJavaScript("this.click();");
And this last line of code don't work for me.
Moreover if I have an element instead of button - JavaScript click() method works fine.
I can't answer the question per-say as its really hard to tell from the info you gave us what is the EXACT problem, but what I can do is give you some guidelines on debugging problems in QWebView.
1) First thing I would check, is if you actually have the button element in hand. try to do this:
QWebView webView;
...
QWebElement button = webView->page()....findFirst("button[id=\"submit1\"]");
if button is not None:
button.evaluateJavaScript("this.click();");
else:
print "Oh dear!"
By this we wanna see if findFirst() actually gets the elements (I believe it does, syntax seems to be fine).
2) Go to the web page you're working on. Does that button actually work? some script might inject a 'disabled' attribute to it, which renders it un-clickable.
3) Try to lock in on the element in some different way:
get it by class:
QWebElement button = webView->page()->mainFrame()->documentElement().findFirst("button[class=submit1]");
Try to lock in on the parent, then get the 1st child:
QWebElement parent = **get the parent element**
button = parent.findAll("button")[0]
Usually I try to avoid using methods like this one, as it is susceptible to crashing in several cases. If this is the only thing working for you, I strongly recommend some 'try\except' to avoid any problems.
small note: you said that if u get an element instead of a button, click() works fine. the reason is that click() does nothing to an
element that isn't clickable or has some kind of behavior attached to
the click() event. So its working by basically doing nothing :)
Sorry if the question was misleading, I couldn't find a better way to describe my problem. Anyway, here goes:
Suppose I had a button start that initially displays a string for me. Said string (let's call it stringA) is output through jQuery like this:
$(".start").click(function() {
$(".startButton").hide('slow', function() {
$("#table1").html(stringA);
});
});
Alright. Cool. That worked without a hitch. Now inside stringA I have multiple
<span class="optButton">this is a button</span> buttons. I have another onClick handler for my optButton button, and it goes like this:
$(".optButton").click(function() {
alert("Testing");
$("#table1").html(stringB);
});
Needless to say, clicking on optButton is supposed to replace the contents of #table1 with stringB. However, when I tried it, it doesn't work. I tried adding alert() to test and see if jQuery managed to select optButton, but it seems that it didn't because I get no popup from the alert() function.
My theory is that since optButton was not part of the original HTML and is within a string stringA, jQuery is unable to select optButton as a result. If this is true, is there a workaround to this issue? If it is not, what is the actual cause of the problem here?
You need to use event delegation since your span element has been dynamically added to the DOM:
$('#table1').on('click', '.optButton', function() {
alert("Testing");
$("#table1").html(stringB);
});
This technique will helps you to attach click handler to these newly created span elements.
I am using CKEditor for my website's blog posts but have an issue where after loading all the bog posts via .load() they no longer get replaced by CKEditors.
This is done example:
$("#container #postholder").load("http://url.com/viewblog.php?id=155 #container #postholder");
First, I had issues with the scripts that were called upon by items that were loaded via the .load() method. I solved this by changing the button call to this:
$(document).on('click','.edity',function(){ });
The buttons now work, but the CKEditor isnt.
Lets say I have 5 different instances that are on the page, they all have the generic class of ckeditor so they all work.
However, after the .load() of the items, they are not changed to CKEditors and instead stay text areas.
To solve this I tried this when clicking the 'edit' button:
$(document).on('click','.edity',function(){
CKEDITOR.replace('.ckeditor');
});
That does not work, I then tried using the name of the CKEditors so:
$(document).on('click','.edity',function(){
CKEDITOR.replace('editorName');
});
This works, even after the .load(), but it only works for the first instance. All of the other CKEditors are not changed into the CKEditor.
I cant see how to get around this...
Any one understand?
Editors are created like so:
This is in a foreach loop for each blog post result. The ckEID variable is the posts ID + 1.
<div class="editor">
<textarea name="muffin" id="'.$ckEID.'" class="ckeditor">'.$text.'</textarea>
</div>
I use this:
$(document).on('click','.edity',function(){
$(this).parent().find('.editor').toggle();
CKEDITOR.replace('ckeditor');
});
To convert the text area when the edit button is clicked.
Just tried using replaceAll and the error console showed e.g.
uncaught exception: The editor instance "message" is already attached to the provided element.
I have other text areas on the page and it seems that everything is getting messed up when using replaceAll.
I'm trying to do something very simple - call a function when a button is clicked. I've looked at several examples online, such as W3Schools and (I believe) I am using onclick / onClick correctly it does not seem to be functioning. I have tried several different methods - I'm really not sure what I'm doing wrong.
Method 1
HTML
<button id="buttonAdd" onclick="add()">Add</button>
JavaScript
function add() {
console.log("Test");
}
Result:
Test
When the button is clicked this flashes up in the console.log faster than I can easily see and then disappears.
Method 2
HTML
<button id="add">Add</button>
JavaScript
window.onload = function() {
document.getElementById("add").onclick = add;
}
function add() {
console.log("Test");
}
Result
Test
When the button is clicked this flashes up in the console.log faster than I can easily see and then disappears.
Method 3
HTML
<button id="add">Add</button>
JavaScript
window.onload = function() {
document.getElementById("add").onclick = add();
}
function add() {
console.log("Test");
}
Result
Test
This appears in the console log and remains there, without the button having been clicked.
Issue
I'm generally feeling confused. From what I can tell I am doing what is suggested by examples (the different methods I have tried reflect differences in examples).
Thanks.
Edit
So it seems the issue is the console.log flashing up almost faster than I can see... Does anyone have any idea why this might be? It seems like the page is refreshing itself, but I have no idea why this would be...
Answer
The button was in a form which caused the page to refresh when it was clicked.
the problem is the name of your function. it is the same as the id of the element. do a test an try writing this console.log(add). You will see it logs the DOM node and not the function.
is your button in a form ? because if so, then the form is submited and that's why the the page refreshes. can you post a jsfiddle with your test ?
Regarding Method 1:
I would need to see a bit more of your html structure to say for sure, but it sounds like in Method 1, the function isn't being declared properly in a way that is in scope. That might have to do with the names being the same, as theBrain mentioned or it might caused by some other problem.
Edit: From your response to theBrain, it sounds like you are able to get method 1 to work if you use different names. Given that, you can also prevent the page post by changing the onclick to include a return false value. Either of the following will work:
<button id="buttonAdd" onclick="add(); return false;">Add</button>
or
<button id="buttonAdd" onclick="return add();">Add</button>
coupled with the addition of return false; as the last line of your add() function's code.
Regarding Method 2:
In either case, method 2 is a better way of implementing this, so we can sort of ignore the reasons behind method 1 failing (though having distinctly different names for the function vs the button element would certainly be a good practice; personally, I preface all of my button ids with 'btn_').
The likely reason for the super-fast clearing of the console in both methods is that you do not have a type declared for the button. Different browsers do things differently in the absence of a type (see the tip on the W3Schools Button Tag), and it sounds like yours is treating this as a submit button, which means that it posts back to the page when clicked. You should be able to prevent this behavior by specifying type='button' within the attributes of the button element.
Regarding Method 3:
Finally, method 3 is providing the behavior that it is because your assignment statement is also executing a call to the add() function.
When the button is clicked this flashes up in the console.log faster than I can easily see and then disappears.
This is suspicious – console output is normally not cleared without user interaction.
Could it be that your page just gets reloaded – and therefor the console output “disappears”?
In general, you should not use this kind of “old-school” event handling any more anyway (unless it is for something really small-scale).
Have a look at popuplar JS libraries like jQuery etc. – they simplify event handling (amongst other things) at lot.
Mine was a little different, though I got help from #TheBrain's answer. Name of my javascript method was submit(), which was actually submitting my form. When I changed name of method to submitForm(), it worked.
I think earlier submit() was internally calling Javascript Form's submit() and not my javascript method.
Corrections invited.
I am busy writing a simple Adobe Air app using HTML, jQuery and some jQuery plugin to load RSS feeds.
The problem I am having is that I am generating a section of HTML components (buttons) so that I can execute specific code on button click. But when the page is displayed the button never executes; I have tried using the built-in log function as well as alert, but none of them execute. The weird part is when I copy the HTML component into a part of the page that is not generated it executes fine.
I insert the following into a div using jQuery and it does not execute.
'<input type="button" onclick="LoadPage()" value="Test" />'
If I just insert it into the HTML it works fine.
I am using version 1.3.2 of jQuery; I am also using this plugin to load the data into a div, and I have modified line 82 to include the html component above.
I should note that when I inspect the page using AIR's introspector the HTML is valid.
What could be going wrong?
I don't see the problem. The following works fine for me:
$(document).ready(function() {
$('#mainDiv').html('<input type="button" onclick="LoadPage()" value="Test" />');
});
function LoadPage()
{
alert("Hello");
}
If you want to use jquery to handle the click you can use the live event.
I also had that problem some time ago, and this solved the problem.
If you give your button an id would look something like this:
$("#YourButtonId").live("click", function (){....
Got the same problem with 'onClick' instead of 'onclick' ?
Also check if the function isn't called 'Loadpage' instead of 'LoadPage'.
I sometimes have case sensitive problems in javascript, not sure if it are functions that are case sensitive.