xPages - Pager onClick Event issue - events

I'm trying to put an onClick event on a pager which is in a dataView. I want the onClick event to update a sessionScope variable. I've added the code and tested it, I can't get it to work. I made a test button and set it up with the same onClick event and the variable is updated correctly.
Right now, if I click the pager it works correctly and pages through the dataView. But, it doesn't update the sessionScope variable. Any ideas what could be causing this?
<xp:pager partialRefresh="true" id="pager8" xp:key="pagerBottomLeft"
styleClass="mblFooterLeft">
<xp:this.rendered><![CDATA[#{javascript:isPagerDisplayed();
}]]></xp:this.rendered>
<xp:pagerControl id="pagerControl2" type="Previous">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="testLabel">
<xp:this.action><![CDATA[#{javascript:incPagerDisplay();
sessionScope.pagerDisplay++;}]]></xp:this.action>
</xp:eventHandler>
</xp:pagerControl>
</xp:pager>
Any help would be greatly appreciated.

While you're asking for an onClick event update to a sessionScope'd variable, it seems from your code that your end attempt is to save the page'd state the user is on, so they can navigate away/back and retain that from the sessionScope var. Assuming that's all you're trying to do with it, I recommend you check out and use the xe:pagerSaveState control.
Brad Balassaitis wrote a blog post on using it with a Data View, which may assist you. Oliver Busse tweaked that implementation a bit and demonstrates with his OSnippet; a massage to the SSJS call.
Here's Oliver's snippet:
<xe:pagerSaveState id="pagerSaveState1" refreshId="theView" partialRefresh="true">
</xe:pagerSaveState>
<xp:this.beforePageLoad><![CDATA[#{javascript:viewStateBean.restoreState = true;}]]></xp:this.beforePageLoad>

Related

Unable to trigger the "onHide"/"onShow" events of the Xpages extension library dialog

I find this strange but I am unable to get any output from the "DOJO" events "onHide()" and "onShow()" for the extension library dialog box. I simply want to access a viewScope variable and set some values to it in the "onHide()" event of the dialog box, but that doesn't seem to work. Even a simple print() statement is not getting executed in the "onHide()" or "onShow()" events. Are there any settings that need to be changed or additional setting that need to be added for these events to work? Am I missing something? Here is the code:
<xp:eventHandler event="onHide" submit="true" refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:
//Pass the ratings to the parent window
var glVect = viewScope.get("Goal_Rate_data");
print(glVect[0][0] + "###" + glVect[0][1] + "###" + glVect[0][2]);
glVect.get(0).setElementAt("testing assignment",1);
}]]></xe:this.action>
</xp:eventHandler>`
You're right that they are Dojo events, so only CSJS. From my chapter of the XPages Extension Library book - "The onShow and onHide events trigger Client-Side JavaScript before the dialog is shown or before the dialog is closed." I'm afraid Server-side Javascript code won't work there.
You can fire partial refreshes on hiding. That's some advanced functionality that the XPages team provided for us, providing a second parameter for the CSJS hide method and the only parameter of the SSJS hide method. All that basically does is call the Dojo client-side Javascript hide method and trigger XSP.partialRefreshGet() on the area you want to refresh.

jquery contextMenu + .live

I am using a plugin called jQuery contextMenu but am having trouble making it work with elements that are loaded via ajax after the DOM has already loaded. does anyone know how i can get this working with .live?
I've made a modification of the original jquery.contextMenu.js script. I've replaced .each() with .live("mousedown", ...) and deleted appropriate mousedown binding (you can also make a diff of my code and the original to get the changes).
You can get the code from http://pastebin.com/jBcAR6g1
Works for me.
2018 update without plugin:
$(document).on('contextmenu','#object_id',function() {
//code
});
I think you must use enableContextMenuItems() method on the newly added elements. If you post your code it would be easier to help.

How can I update Yii's CListView when a new record was added triggered by an AJAX call?

Yesterday I was introduced to the CListView and could manage to display all the information i want about my records, and in the format i want. I have a 'create' button (add a new contact), which opens a modal pop up window with the corresponding fields. When this window is closed, i return to the CListView, and here is my issue: i've been trying to update the CListView (without any luck, clearly).
I believe it should be easy to update the clistview with this call: $.fn.yiiListView.update('CListViews's ID'), but i can't find the proper event that should trigger this call.
Next, i post what i would think is the relevant code:
Button
echo CHtml::ajaxButton ("Create",
CController::createUrl('/contacts/create'),
array('onclick'=>'
$("#createContact").dialog("open");
return false;',
'update'=>'#createContact'),
array('id'=>'showCreateContactDialog'));?>
CListView
$this->widget('zii.widgets.CListView', array(
'dataProvider'=>new CArrayDataProvider($model->contacts, array('pagination'=>array('pageSize'=>5,),)),
'itemView'=>'_view',
'emptyText'=>'empty',
'template'=>"{items}\n{pager}",
'pagerCssClass'=>'page-number',
'id'=>'ajaxListView',
));?>
Any help is more than welcome!! Hope this helps someone eventually as well.
If I understand correctly, your problem is finding what to trigger the CListView update with (the JS update snippet you provide should work fine).
Probably the jQuery dialog event close is what you are looking for; it will get triggered after the dialog has been closed. Alternatively, there is also a beforeClose event that has the additional capability to prevent the dialog from closing.

How to prevent ajax driven form from being submitted twice?

I am taking my first steps with Ajax while working on a Grails application. I am using
<g:form ...>
<g:submitToRemote ... />
</g:form>
in the most simple way and it worked great out of the box (Thanks grails!). The problem is, that the Ajax call needs about 2 seconds to return and update the html (at least on the test system) and during that time, the user can (and actually does quite often) hit the submit button again. At the moment this results in a 2nd call being made that finally ruins the output (an error msg says, that one cannot submit the same data twice).
What is the best way to prevent this?
Thanks in advance for your input!
The best way to handle this is to disable the submit button in your onSubmit() function. Honestly, I don't know why more sites don't do this. I often go the next step and instead of disabling the submit button, I put the submit button in a span tag and replace the contents of the span tag with static text "Please wait..." That way your users get visual feedback they pressed the button and "top men are working on it".
As dj_segfault said you can do that.
If you want to validate this in your controller, take a look in "Handling Duplicate Form Submissions" in the official docs:
http://grails.org/doc/latest/guide/theWebLayer.html#formtokens

Detect when AJAX changes HTML in a DIV in WebBrowser

After I load a page through a WebBrowser, and I click a link that fires an AJAX script, I need to detect when the AJAX java script finishes loading HTML changes into a div. Since no DocumentCompleted event is fired when the AJAX script is run, I don't know when it finish running. Is there a way I can attach an event to be raised after I know 100% that the javascript finished changing the div?
The project is in C#.
Thanks
I did something similar recently (using jQuery):
$('#mydiv').change(function(){
// do stuff
}
);
Granted, I also use jQuery to set the HTML of that div. I suppose one non-jQuery approach for you could be to set HTML through your own function, which in turn can fire an onchange event.
#New in town: From my experience that is not correct. I use this on multiple DIVs that never get focus in the first place, and it works well and consistently. The normal behavior is as you describe, and normally only applies to the INPUT and SELECT elements, but this is not the case with jQuery.
There is no event. You must patch the JavaScript callback that the browser runs when the reply for the AJAX request comes in. This will contains code like "div.innerHTML = ...". Just put your code below that.

Resources