I have a strange problem. I have a custom JS file written and all of its functions work fine until I run any ADF's JS action. For example - I have an action which slide down a component and it's fine. But when I run a adf popup or Faces Error Message all of my custom JS are disabled. Where is the problem?
Thanks in advance
Since you ain't giving any details on your problem, I can give only common answer.
When using custom js, you should always keep in mind, that any ADF action may overwrite all or part of html code on the page.
You should always set property clientAttribute=true for component, if you accessing it via js. Use actionListener instead of regular js handlers on component if possible or each time component refreshes you should reinitilize all of your js hooks.
Good way to avoid problems is to do all you can via ADF JS framework.
Check with any js debugger(like firebug) whats going on the page during your action and act accodingly.
You can get more info in documentation.
Related
I'm working on an Android app and trying to implement the following solution:
within an HtmlDrawable I have a set of elements with onClick events.
By clicking on these elements I want to communicate back to the Java code of the app using the "architectsdk://" url technique.
But I don't see any response in my ArchitectView.ArchitectUrlListener() implementation.
Another note: when I set onClick event of the HtmlDrawable itself then I successfully notified within the Java code.
So the question: is it possible to communicate back to Java code from an HtmlDrawable or I need to create each element separatly and places onclicks on them?
Thanks in advance.
I've got an answer on the Wikitude's forum:
In case if someone needs it:
HtmlDrawables live in a different context, you therefore cannot use
architectsdk to communication with native Android/iOS urlListener. I
recommend using HtmlDrawables onClick listener instead.
e.g. myHtmlDrawables.onClick = function() {
document.location="architectsdk://mydrawables?clicked=1"; return true;
}
Best regards
Here is what I did:
var a = $(document.getElementById("panelForm:tableId01"));
$("<p:outputLabel value='Testing'/>").appendTo(a);
It does not show the label but if I did this, for example, it works:
$("<font color='red'>Red</font>").appendTo(a);
You seem to have completely missed the point of JSF and the context of JavaScript.
JSF is basically a HTML code generator. To see it yourself, create a (simple and working) JSF page and open it in your favourite webbrowser. Rightclick and choose View Source. What do you see? Yes, it's one and all HTML code! If JSF has done its job right, you should not see any JSF tags, for the very simple reason that the webbrowser do not understand them. It understands only HTML.
JavaScript is a client side language which runs in webbrowser and not in webserver. As evidence, when you run webserver and webbrowser at physically different machines and you invoke JavaScript onclick="alert('peek-a-boo')", then you see it in webbrowser, not in webserver. JavaScript can see the HTML DOM tree (anything which is available via document object, such as document.getElementById("someId")). JavaScript can not see original server side source code who's responsible for generating that HTML, let alone execute it. For jQuery it is not different for the simple reason that it's a JavaScript based library.
You need to solve your concrete functional requirement differently. If you want to dynamically add JSF components, then you should be doing it via JSF itself, not via JavaScript. Here's an answer showing one of the many ways: How to dynamically add JSF components. If you however insist in using jQuery for this, then you should be specifying the JSF component's HTML output yourself, but you're basically still completely missing the point of JSF. Carefully read the below link then.
See also:
What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
You can not use "$('<p:outputLabel value='Testing'/>')". Because it is PrimeFaces tag lib. It will generate html tag (Ex: '<label class="my-class ui-outputlabel ui-widget" id="j_idt19:j_idt22">Testing</label>') when page rendered. So you should use jquery for html tag. For example like below:
<p:outputLabel value='Testing' styleClass='my-class'/>"
var a = $(document.getElementById("panelForm:tableId01"));
$("label.my-class").appendTo(a);
I'm tryng to compare some differents frameworks (angularjs, flux+reactjs and emberjs) doing a minimal todo list application.
You can find my code here:
https://github.com/jurgob/todo_test
(in the flux directory you can find the implementation)
I would like to programmatically fill and send the form to add an item to my todo list.
this code works for angular and emberjs:
$('.addItemText').val('test'); $('.addItemText').change();
$('.addItemBtn').click();
but not for reactjs.
I've also tried with sendkeys jquery plugin (https://github.com/dwachss/bililiteRange/blob/master/jquery.sendkeys.js) without any success.
here is my flux implementation:
https://github.com/jurgob/todo_test/blob/master/flux/main.js
as additional note: I've build a casperjs script to performe them from an headlerss browser, and using casper.sendKeys function it works for all the framework (you can find the code here https://github.com/jurgob/todo_test/blob/master/tests/maintest.js )
That code should work for react, however you can ditch jQuery in this example and use refs. More information about refs can be found here: https://facebook.github.io/react/docs/more-about-refs.html
In reality though you shouldn't be setting properties and triggering events on your own, use state to set properties, and you can submit a form request via XHR rather than filling out a form and simulating a click.
I also had a brief look at your code and noticed you were manipulating props directly, this is an anti-pattern, if you need to keep data in sync between different components consider either passing the components back upstream, creating a global eventemitter, or using a pattern like flux: https://facebook.github.io/react/blog/2014/05/06/flux.html
I have a ASP.Net Repeater control with a Table inside it. Is it possible to run a JavaScript function directly AFTER I call MyRepeater.DataBind()? I've been trying different things, but nothing is triggering the JavaScript function.
Thanks
Databinding occurs on the server in a postback as part of the Page Lifecycle process. In other words, excluding partial-postbadks, at the time this happens any existing DOM in the browser is destroyed. A whole new page is constructed on the server and transmitted to the browser, so that a new DOM can be built and rendered.
What all that means is that you want to think in terms of running your javascript in the page's onload event. One way to make this happen is using the ClientScriptManager.
Javascript can be called from server side by using RegisterStartupScript and RegisterClientScriptBlock methods.
http://www.mindfiresolutions.com/Register-clientside-startup-script-from-serverside-code-286.php
No. The javascript isn't even going to render and run until the code-behind has executed and the page delivered to the client. So it won't matter if adding the script is the first thing you do in the code-behind or the last thing you do (or directly after the DataBind()).
When using the ClientScriptManager Class, look at your code behind and you'll see the dynamic javascript is added just before the ending </form> tag (although it still may be possible to accomplish what you want to do, just with a different approach).
Well I found a solution, not sure it's the cleanest way to do it, but for my application's context it works:
I ran the javascript code after a partial postback using: Sys.WebForms.PageRequestManager.getInstance().add_endRequest();
Again, not the cleanest but suits the needs I have.
Thanks for all your input
I'm trying to write an AJAX enabled WebControl. This is my first AJAX control and apart from the usual use of UpdatePanels and ScriptManagers, I've not got a lot of experience in the other angles and use of AJAX.
I've found a number of examples and projects that claim to be AJAX enabled control's, although they all seem to be missing the final step, i.e. How to actually start calling server side methods from the Client Side.
This is the example I'm currently working with:
http://dotnetslackers.com/articles/ajax/ASPNETAJAXControlDevelopment.aspx
Fair enough, it shows how to extend the DOM model with some extra events... However, it never actually seems to do anything server side once it's created?
How would I go about firing off some server side methods within my control class (ImageButton.cs in that example)?
Grab the source for the AjaxControlToolkit and open the AjaxControlToolkit.sln. There's 1 main project and about 40 controls for you to play with.
Some are really simple and easy to wrap your head around:
ConfirmButton
ToggleButton
CollapsiblePanel (includes animations)
The source is written consistently across controls, both the C# and JavaScript, and commented well. They have a Base Class (ExtenderBase/ExtenderControlBase.cs) that has the majority of their "state saving" code that is re-used throughout the rest of the library.
The only thing that went over my head were some of the method attributes and code to do with Design time rendering in the Visual Studio IDE. I don't get that stuff yet.
Edit:
Re server-side events, any class that implements IPostBackEventHandler (ie, RaisePostBackEvent() method) exposes custom events. For example look at the Rating control which fires a Changed event developers can subscribe to. ReorderList and
Tab Container also implement custom events.