When I click on the hx:commandExButton the Javascript function should get called, but it is not getting called. The Javascript function is as follows:
function test() {
alert('ss');
return "true";
}
The hx:commandButton is as follows:
<hx:commandExButton
type="submit"
value="Search"
styleClass="action2" id="searchButton"
onclick="return test();"
action="#{pc_WorkInProgressUserGrid.doSearchButtonAction}"
immediate="true">
</hx:commandExButton>
Any suggestion would be helpful.
First step would be to check the generated HTML output to verify if it looks right. It may for instance happen that the hx:commandExButton itself didn't take the onclick attribute value correctly into account. As a test, you could try to get rid of it and use the standard JSF h:commandButton instead.
Further I also recall something about a crazy <hx:scriptCollector> tag which you are supposed to wrap the piece of JSF code with whenever you'd like to use Javascript in combination with IBM Faces Client components.
E.g.
<hx:scriptCollector id="someid">
<hx:form>
<hx:commandExButton />
</hx:form>
</hx:scriptCollector>
I don't know JSF, but it's immediately obvious that you have omitted a " after true, and also a >
Are those ** supposed to be there? And writing method before a function is definitely not part of standard JavaScript.
Related
Newer to javascript and trying to learn why this works, searching Google has led to no answers (although I maybe searching using the incorrect terms).
I'm am making a call to a function during an onclick event within an <a></a>. I was able to get the function finally working (with a suggestion from a coworker) by adding in 'javascript:' before making the function. Without the javascript: portion in the onclick, my function was not being called upon.
It now works but I don't understand what that is doing, the other programmer who suggested putting it in the call also isn't sure what exactly it does.
Here is a simplified version of the code used:
#1 .jspf higher up which includes page #2 to display it's contents
function createTagging(1, 2) {
cmCreateElementTag(1 + ", " + 2,"TagName");
}
HTML in .jspf file #2 further down website makes the call to function in file #1
<a id="CatEntry" href="https://aurl"
onclick="javascript: createTagging('parameter1', 'parameter2');"
title="atitle" aria-label="alabel">
<img id="ThumbNailImage_59244" src="https://image.jpg"
alt="" border="0"/>
</a>
-Troy
Why do I need 'javascript:' in the call to my javascript function?
You don't. It's an onclick handler. You use the javascript: pseudo-protocol where a URL is expected (for instance, if you'd used href instead of onclick). onclick expects JavaScript code.
In fact, it only works because JavaScript has labelled statements, and javascript: is a valid label. It's completely ignored.
Without the javascript: portion in the onclick, my function was not being called upon.
With respect, that must have been observational error. Again, in an onclick handler, it makes no difference whether you have javascript: in front of it or not. If it wasn't working, and then it was working, you changed something else at the same time you added javascript:.
onclick attribute is always calling javascript in HTML.
onclick="createTagging('parameter1', 'parameter2');"
It is only necessary if you use not an event, but href. There you need to add the protocoll as well for Javascript.
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 trying to call a java script function when the selected value in a Dojo auto-completer is changed, but I am unable to do so.
Firstly because the standard onchange attribute does not work here, as this is not a standard HTML component.
Secondly I found this documentation ( http://dojotoolkit.org/reference-guide/quickstart/events.html#connecting-to-a-dom-event ) and it is supposed to solve my problem. But somehow I am still not able to connect to a javascript function.
Here is the sample page through which I am trying to test this out.
The JSP:
<s:form id="form">
<sd:autocompleter id="try" list="sampleList"/>
</s:form>
The JS File:
dojo.connect(dojo.byId("try"),"onchange", tryAlert);
function tryAlert(){
alert('successful');
}
I don't know what I have interpreted wrong from the documentation.
Please advise.
Thanks!!
Here is what I ended up doing. For those still stuck in a similar situation, this will be helpful.
In the jsp File do this:
<s:form id="form">
<s:hidden id="chngd"/>
<sd:autocompleter id="try" list="sampleList" valueNotifyTopics="topic"/>
///////////
//Here you can put more autocompleters if you need them , Like I needed them
///////////
</s:form>
In the js file do this:
dojo.event.topic.subscribe("topic", function(){
dojo.byId('chngd').value='try';// I have set the value of the hidden field to desired value here....
//whatever more you want to do....
});
//////////
//Here there would be a subscription (similar to above) for each autocompleter you have put in your jsp.
//////////
So what will happen here is that, whenever an autocompleter is changed it will notify or publish a topic for listeners to listen. Now the subscribe function in java script will listen to its respective 'topic' and when that topic is published, the subscribe will execute the javascript function inside it.
This way whenever an autocompleter is changed a respective javascript function is called, thus we have a -- onchange="javascript function" -- kind of effect.
If you still face trouble, ask for help :).
Ok I guess the struts component for "autocompleter" is dojo's dijit.form.FilteringSelect.
You will find its documentation at http://dojotoolkit.org/api. Once there, open the tree and follow the path dijit/form/FilteringSelect, then deploy the "Event summary" header.
You will find the list of extension points (say events...) the widget accepts. The correct one for you is called "onChange" (mind the capital C).
Also, dojo widgets can be found by id through dijit.byId("yourId") - dojo.byId is for regular dom nodes.
So, for using the onChange extension point, you should do :
<s:form id="form">
<sd:autocompleter id="try" list="sampleList">
<script type="dojo/method" event="onChange" args="newValue">
alert('successful');
</script>
</s:form>
or... if you prefer the javascript way :
dojo.ready(function(){
dijit.byId("try").onChange = function(newValue) {
alert("Changed to new value", newValue);
}
}
I would like to insert a call to a function to get a parameter for my JavaScript onclick function. What I would like to do is something like:
<input class="refreshbutton"
type="button"
id="searchUfficiPopup"
onClick="javascript:postColorbox('/DeliDete/searchUfficiPopupBySettoreId', **'&settoreIdKey=${javascript:getSettoriId()}'**, 'tabUfficiForm', 'initScriptUffici')"
value="<fmt:message key="navigation.searchUffici"/>" />
This way Eclipse tells me the function javascript:getSettoriId() is undefined. I defined this function in an external .js file, loaded at runtime with jQuery's .getScript, so I would not like to insert it into the jsp (anyway I tried to insert it into the jsp but the IDE still says that the function is not defined).
The function postColorbox is defined as:
function postColorbox(url, parameters, formName, initScript)
The function getSettoriId() returns the value of a previously entered form element, Settori, which I need to perform a restricted query (I need to obtain all Uffici entities related to the selected Settori entity)
Told this, I would like to ask you experts:
Is it even possible to use a JavaScript function as a parameter of an onclick JavaScript function?
If I put this function to be called in an external .js file will the jsp be able to see it and call it?
Thank you all for your help!
Andrea
Remove the onClick on your <input> and do it with a jQuery event handler instead:
$('#searchUfficiPopup').click(function() {
var settoriId = getSettoriId();
postColorbox('/DeliDete/searchUfficiPopupBySettoreId',
'&settoreIdKey=' + settoriId,
'tabUfficiForm',
'initScriptUffici');
return false;
});
Calling functions from inside the HTML element is not a preferred way. If you can - just assign the element an id or class, and then add a listener to it using javascript on page load.
This way you don't have your data and operations mixed. It will be also easier to modify the code, as your code will be located in js files.
Maybe I've picked a totally inappropriate/bad example.
What I have is a user control that contains a bunch of dynamically created Telerik RadGrids.
My user control is added to a couple of Telerik RadPageViews that are part of a RadMultiPage that is used alongside a RadTabStrip.
What I need to do is call a Javascript function in my usercontrol to update it's display whenever it's parent RadPageView is selected.
So basically I have the following Javascript code:
function OnClientTabSelected(sender, args)
{
// Get the MyControl that is on this tab
var myControl = $find("whatever");
// Call a method that updates the display
myControl.doSomething();
}
Thanks,
David
You can add a wrapper div in your User Control and then extend that div using jQuery to add your desired methods and properties. The trick is to set the div's id='<%=this.ID%>' - that way the div has the same ID as the User Control (which is fine because the User Control doesn't actually render anything - only its contents).
Then back on your containing page, you can just reference your UserControl's ID using $get('whatever') - and you'll actually select your extended div.. which will have all your methods and properties on it.
The nice thing about this approach is that all of your methods and properties and neatly scoped and nothing is in the global namespace.
I have a full demo solution and details here if you want more info:
http://programmerramblings.blogspot.com/2011/07/clientside-api-for-aspnet-user-controls.html
Just make a call to javascript method in input button if you are sure about the name of that function.
<input type="button" value="test" onclick="doSomething()" />
If you place any javascript code in the control that will be spit on the page and it will be available for calling provided both of them are in the same form.
for example your code will look like this if you look into the source of that page.
<script type="text/javascript">
function doSomething()
{
alert(new Date());
}
</script>
<div>
<span id="MyControl1_Label1">Dummy label</span>
</div>
<hr />
<input type="button" value="test" onclick="doSomething()" />
Edit: This is not a good way to access these methods in my opinion. When you are putting some javascript code inside a control then it should be used in that control only (There is no rule as such, its just a design suggestion). If you are trying to access javascript code of a control from outside that control then you need to revisit your design.
If you can give us more details on why you want to access that method, may be we can suggest some better way to do that.
Update: (As you have modified your question): Bit tricky to answer this as I dont have hands on experience with Rad controls. I guess there should be some feature which will help you to update the controls in that page without using javascript, may be have a look at clientside-API provided for Rad.
May be somebody who knows about RAD controls will help you.
You should make the control method public
public void doSomething
and call this from the page
myControl1.doSomething();