mariusdr
Posts: 21
|
| Posted: 07/16/2013, 9:01 AM |
|
Hi, can anybody advise where can you place custom JS or jQuery code when using CCS 5.1? Is it safe to modify the existing .js files and not having the code overwritten? Thanks!
|
 |
 |
jekes
Posts: 36
|
| Posted: 07/17/2013, 4:47 AM |
|
Here my solution to show a jquery colorpicker on an input in an edit grid
I place an update panel
I create an edit grid with the builder
On the panel Assign feature --> ClientCustomCode
Start event : onkeypress on the input
I include my own js file at the begin of the page (after CodeCharge js declaration)
<script src="../../js/jquery/jquery.js" type="text/javascript"></script>
<script src="../../js/jquery/event-manager.js" type="text/javascript"></script>
<script src="../../js/jquery/selectors.js" type="text/javascript"></script>
<script src="../../js/jquery/updatepanel/ccs-update-panel.js" type="text/javascript"></script>
<script src="../../../js/colorpicker/js/colorpicker.js" type="text/javascript"></script>
<script src="../../../js/colorpicker/js/eye.js" type="text/javascript"></script>
<script src="../../../js/colorpicker/js/utils.js" type="text/javascript"></script>
<script src="../../../js/colorpicker/js/layout.js?ver=1.0.2" type="text/javascript"></script>
I place my custom code in the client custom code section
$('#'+$(this).ccsId()).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
For Codecharge 5.0 users, they have to disable the confict with prototype.js
var J = jQuery.noConflict();
J('#'+sender.id).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
J(el).val(hex);
J(el).ColorPickerHide();
},
onBeforeShow: function () {
J(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
J(this).ColorPickerSetColor(this.value);
});
Hope this can help you
|
|
|
|
Gospodin
Posts: 4
|
| Posted: 07/17/2013, 6:33 AM |
|
jekes, I would recommend that you include other scripts in different way. Add the following code
</script>
<script src="somejs.js" type="text/javascript"></script>
<script type="text/javascript">
right after comment //End Include User Scripts
this way allows to incorporate third part script without breaking CCS auto generated code and preserve the gray blocks untouched.
|
|
|
|
mariusdr
Posts: 21
|
| Posted: 07/17/2013, 10:20 AM |
|
I have an update panel and a tabbed view inside, with 2 tabs, 2 panels, each containing a record. I need to modify one of these panels (the one which only displays data) to refresh from a web service, as opposed to a SQL database (as it was generated). So that means I would do what you describe for that one panel only? The other question I have is how to I identify the client custom code section you are mentioning?
I am struggling with this, I am also just learning jQuery/ JS...
Thanks a lot for your help, both!
|
|
|
|
jekes
Posts: 36
|
| Posted: 07/18/2013, 12:31 AM |
|
Thank's Gospodin for the tip.
For the custom code question :
Right click on the panel --> Assign feature --> Client custom code
You specify the start event.
When it's create in the html section Codecharge place this line.
//Custom Panel1Panel2ClientCustomCode1 @8-2A29BDB7
// -------------------------
// Write your own code here.
// -------------------------
//End Custom Panel1Panel2ClientCustomCode1
Then you can add your own code
For the refresh event with a webservice, I don't know if it's possible to directly specify datasource as webservice.
2 solutions i thinks that can be working but the code will not be very clear (using websocket will be better)
Add event BeforeBuildSelect on your grid
Retrieve data from your webservice in the server-side custom code section
Update the database used by your grid (in the server-side custom code section).
Add a js custom code with a setInterval which refresh the panel every x second.
setInterval(function() {
var Panel1 = $("Panel1");
if (!Panel1) return;
AjaxPanel.reload(Panel1); }, 15000);
Assign feature --> remote custom code in none asynchronous modus on your panel.
Retrieve data from your webservice in the server-side custom code section
Update the database used by your grid (in the server-side custom code section).
Refresh the panel in the client-side custom code section.
Add a js custom code with a setInterval which start the remotecustomcode every x second.
Be careful, I did not succeed to force the refresh of a panel in CCS5.1 (see my post here http://forums.yessoftware.com/posts.php?post_id=121537)
When you force refresh in CCS5.0 with my code (get parameters are lost (current page / sorter ...)
If somebody have the solution to properly refresh a panel (5.0 or 5.1) ...
|
|
|
|
mariusdr
Posts: 21
|
| Posted: 07/18/2013, 7:11 AM |
|
Thanks a lot!!!
|
|
|
|
mariusdr
Posts: 21
|
| Posted: 07/24/2013, 1:36 PM |
|
I'm still not getting the whole picture... When you try to add custom code for a certain event, either for the page or a panel, it places it in a function. I don't think you can write JS inside a function? Or, what do you mean by custom code section? And: I am still using asp, is this appropriate for JS/ jQuery? thanks!
|
|
|
|
|
