I am using radajaxmanager for getting ajax mode.
But many times I prefer to remove a control such as a link button inside a repeater from ajax mode (means repeater has been added to radajaxmanager).
How can I do this job with radajaxmanager?
That control goes in the right way and it is not appeared in the radajaxmanager configuration, and we only have repeater there.
we should use OnRequestStart event (client-side) of RadAjaxManager like below :
function OnRequestStart(s, e) {
if (e.get_eventTarget() == 'bla') {
e.set_enableAjax(false);
}
}
A more comprehensive set of examples on how to specifically exclude a control can be found in the Telerik documentation here:
http://www.telerik.com/help/aspnet-ajax/ajax-exclude.html
Related
I am facing - and not for the first time i believe - JSF composite component re-render pain.
The issue I am facing sounds like it is pretty much the same as:
https://forum.primefaces.org/viewtopic.php?t=27870
Essentially I am reconverting an application from full page navigation to ajax navigation, to avoid reloading javascripts etc...
So this application has a bottom navigation menu, where each button is essentially composite component
composite:implementation
Based on the primefaces
p:commandButton
These buttons used to be non ajax, define the attribute action and return as output of the action the new XHTML page to navigate into.
You would get the full page and that would be it.
Now if we enable ajax based navigation, we instead get a nice little ajax p:commandd button.
<myTagLib:commandButton id="btn_#{pl.newPageLinkKey}" title="#{i18n.static[pl.newPageLinkKey]}"
action="#{box001.navigateToPageAjax}"
disabled="#{box001.selectedBoxPageLink eq pl.pageLink ? true : false}"
icon="#{box001.getIconByKey(pl.newPageLinkKey)}" value="#{i18n.static[pl.newPageLinkKey]}"
update=":pageForm:pageTitle :pageForm:footer-main :popupDialogRegion :pageForm:MainPageContent"
rendered="#{useAjaxPageNavigation}"
>
<f:param name="pageLink" value="#{pl.pageLink}" />
</mytaglib:commandButton>
Something along these lines.
So the first tive we navigate to this SINGLE page application and see our menu being rendered, if we go debug what the command button looks all nice and dandy.
The onclick action is all setup do a super nice ajax request with parameters...
PrimeFaces.ab({
s:"pageForm:mainMenuButtonsTouchBoxFramework:btn_controls:confirmSubmit",
u:"pageForm:pageTitle pageForm:footer-main popupDialogRegion pageForm:MainPageContent",
onco:function(xhr,status,args){boxFrameworkHelperJavascript.updateHeadPageTitle('Control / Events'); ;},
pa:[{name:"pageLink",value:"/blalallaba/WHATEVENEPAGE.xhtml"},{name:"pageLinkDummyValue1",value:"dummtValue001"}]
});
return false;
And these command buttons exist in hundreds of pages and they work perfectly 99 percent of the time.
But we see on complex pages with several layers of templates that the JSF composite components sometimes sart showing off arifacts on re-rendering...
So what comes next is the, pain.
We do our click on the button.
On the server side
FacesContext fc = FacesContext.getCurrentInstance();
Map<String, String> params = fc.getExternalContext().getRequestParameterMap();
String pageLink = params.get("pageLink");
Is looking good.
But then... Re-render disaster.
The menu area, being updated :pageForm:footer-main, comes back with button looking selected. All the mnu buttons are there.
But voila, the problem is that our onclick event this time around is poor poor...
PrimeFaces.ab({
s:"pageForm:mainMenuButtonsTouchBoxFramework:btn_controls:confirmSubmit",
u:"pageForm:pageTitle pageForm:footer-main popupDialogRegion pageForm:MainPageContent",
onco:function(xhr,status,args){boxFrameworkHelperJavascript.updateHeadPageTitle('Control / Events'); ;}});return false;
See the difference between the two on clicks?
The PArguments are gone.
The composite:insert children our composite component is ignored on the re-rendering of the area.
<p:commandButton id="confirmSubmit"
style="display:none;"
ajax="#{cc.attrs.ajax}"
async="#{cc.attrs.async}"
global="#{cc.attrs.global}"
immediate="#{cc.attrs.immediate}"
oncomplete="#{func:object(cc.attrs.oncomplete)}"
onerror="#{func:object(cc.attrs.onerror)}"
onstart="#{func:object(cc.attrs.onstart)}"
onsuccess="#{func:object(cc.attrs.onsuccess)}"
partialSubmit="#{cc.attrs.partialSubmit}"
process="#{func:object(cc.attrs.process)}"
update="#{func:object(cc.attrs.update)}"
type="#{func:object(cc.attrs.type)}">
<composite:insertChildren/>
</p:commandButton>
Work around?
Yes... there is one.
A decent one luckily.
We can instead of make use of the attribute actionListener instead of action.
And we get away with this...
Why because instead of being dependent on having a proper ajax request to the server with all request parameter specified we get the parameter from the Server side view structure.
That is :
public void navigateToPageAjaxActionListener(ActionEvent actionListenerEvent) {
// (a) We use an action lister because we have problems with the composite component if we render it when we
// navigate from page to page
UIComponent component = actionListenerEvent.getComponent();
UIParameter param = (UIParameter) component.getChildren().get(0);
String pageLink = (String) param.getValue();
Not pretty and also not easily reproducible.
There are many pages where the re-rendering of such buttons do not corrupt the parameters.
Is this a known issue?
Is it a primefaces issue or a a JSF version issue.
JSF 2.2.8-35.jar.
I've got a wicket dropdown choice, and when I select something, I want to update some components within the form. This is working fine using wicket (1.4) ajax. However, it's updating the whole form including the dropdownchoice itself. There are quite a lot of items in the dropdown list (maybe 2000) so it's not great from a performance point of view.
Here's the page hierarchy:
form (Form)
|----packageDDC (DropDownChoice)
|----pptview (RefreshingView)
|----buy (Button)
packageDDC.add(new AjaxFormComponentUpdatingBehavior("onchange") {
protected void onUpdate(AjaxRequestTarget target) {
//--snip-- update pricepoints which back up the pptview
target.addComponent(form); //ie the form
}
}
In the ajax debug window I can see all the dropdown choice options being re-sent every time
What I want to do is only update the pptview and the Button via ajax, not the contents of the dropdownchoice.
I tried adding pptview to the target, but it complains that RefreshgViews can't be updated via ajax.
I tried wrapping the pptview with an EnclosureContainer, but wicket didn't like that either (something about setRenderBodyOnly)
So I tried using an WebMarkupContainer (called 'pptcontainer') and setting pptview to be a child of that - but now the pptview is not updated. Instead it says (in Ajax debug):
"ERROR: Wicket.Ajax.Call.processComponent: Component with id [[purchaseButton2f]] was not found while trying to perform markup update. Make sure you called component.setOutputMarkupId(true) on the component whose markup you are trying to update."
"ERROR: Wicket.Ajax.Call.processComponent: Component with id [[pptcontainer2e]] was not found while trying to perform markup update. Make sure you called component.setOutputMarkupId(true) on the component whose markup you are trying to update."
well these objects definitely do have this set to true:
buy.setOutputMarkupId(true);
pptcontainer.setOutputMarkupId(true);
pptcontainer.setOutputMarkupPlaceholderTag(true);
So the page is not updated correctly.
What am I doing wrong?
The new hierarchy is:
form (Form)
|----packageDDC (DropDownChoice)
|----pptcontainer (WebMarkupContainer)
| |----pptview (RefreshingView)
|----buy (Button)
I faced same problem with popup window which content is provided by ajax call. In my case the problem was solved by changing html placeholder "wicket:container" to "div" element as proposed in this article: http://sha.nnoncarey.com/blog/archives/36
After this change generated html has correct id and wicket do not have problem to find it and replace content with AJAX response.
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!
So I have created a context box upon right click that has Add/Edit/Delete Rows. I also have a bunch of code launched before the Dialog is shown. My problem is that when I use the context menu it doesn't go through some of the code. I have tried to call on the functions directly but it doesn't format correctly.
I am mainly concerned with the edit button, here is the code I am using to bring up the edit Dialog
function editRow() {
var grid = jQuery("#<%= Jqgrid1.ClientID %>");
var rowKey = grid.getGridParam("selrow");
if (rowKey) {
// I have tried calling functions here and it still doesn't work
grid.editGridRow(rowKey, grid.editDialogOptions);
}
else {
alert("No rows are selected");
}
}
So if I use this to display the editform it isn't formatted correctly nor does it go through the functions all correctly.
I am using the ASP Webforms version of Jqgrid so I call the function by doing this
<cc1:JQGrid1 ID="Jqgrid1
//other attributes
ClientSideEvents-BeforeEditDialogShown="ChangeMonitor"
//Rest of code />
So this works just fine, and I'm trying to get the Edit button on the context menu to display correctly.
My thought was to use Jquery to trigger a click on the actual Edit button once someone used the context menu. I couldn't find an ID that would work however.
Is there an easy way to connect my context menu Edit button, with the actual Edit button in the toolbar?
Well I found a solution to my problem.
The id field of the button was edit_ct100_cpMainContent_Jqgrid1_top so I just triggered a click with this code.
$("td[id^=edit][id$=top]").trigger("click")
For some reason when I used the _ct100_cpMainContent_Jqgrid1 it wasn't working, but now it does. Hope this helps someone.
I have button with id = new which loads the new page
$("#new").click(function(){
$('#message_area').load('new.php');
});
There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time .
Please help Thanks in advance ..
You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:
$("#message_area").on("click", "#yourButton", function() {
//Do stuff
});
This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).
See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.
//jquery >= v1.7
$("body").on('click', '#new', function(){
$('#message_area').load('new.php');
});
//jquery < v1.7
$("#new").live('click',function(){
$('#message_area').load('new.php');
});
$("#new").live("click", function(){
$('#message_area').load('new.php');
});
just realized this was deprecated-- should be using on instead.. my bad.
To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.