expo101
Posts: 24
|
| Posted: 10/17/2014, 7:57 AM |
|
I'm working on a project using Bootstrap 3.2 in CCS 5.1 and you can see the evolving result on this page www.engroupe.nl/zuidafrika/. It's a product comparison website, in this case for group travel from Holland to South Africa. On the starting page visitors can select departure month, duration, touroperator and some other product related specifics. Trips can be saved into "Mijn Reizen" (my trips) and saved trips can be compared (Vergelijken) in detail. It's all built in basic Codecharge and Bootstrap, I'm not a PHP coder, the only plugin I used is a Register/Login System including Facebook and Twitter social login. You find it here: http://codecanyon.net/item/advanced-security-php-regist...-system/5282621. My CCS5.1 is running on a Windows Server 2008 R2 (VPS) without any issues. Running CCS5.1 on Windows 7 machine was a nightmare!
When saving a trip to "Mijn Reizen" (my trips) by clicking the orange button you will notice a small popup window with a button "toevoegen" and after clicking this button the popup will disappear and the orange button changes to green. This is all happening without page refresh. Actually I want to skip the popup and have the trip saved to "Mijn Reizen" after clicking the orange button. I welcome your suggestions how to achieve this. It's now built with the standard Grid and Record function including AJAX interactive components. I tried to link the action 'Submit Form' to the button OnClick event but then it continues submitting.
Feel free to visit this website and use all options and I appreciate your feedback and suggestions.
Frans de Jong
|
 |
 |
kirchaj
Posts: 215
|
| Posted: 10/17/2014, 11:39 AM |
|
Very Impressive. Can you share how you implemented Bootstrap in CCS?
Great Job.
TK
|
|
|
|
andrewi
Posts: 162
|
| Posted: 10/18/2014, 9:24 AM |
|
I must say it's pleasing to see CCS still being used for such good work!
As I understand it, you want to respond to a button click, update the database then change the control colour without a page refresh.
You can do this using the RemoteCustomCode ajax feature. Search help (F1) for RemoteCustomCode (one word) and you get a reasonable oversight.
Add a RemoteCustomCode feature to your form (or to the select button - I don't think it matters which control you add it to) from the Data properties tab. You'll see that you get two blocks of code in the HTML page that you can fill in:
//RemoteCustomCode1 Parameters @6-37326FEA
// ----------------------------
// Add request parameters here.
// ----------------------------
//End RemoteCustomCode1 Parameters
//RemoteCustomCode1 OnSuccess @6-900035CE
$.ajax("?callbackControl=NewGrid1Label1RemoteCustomCode1", {
success: function(responseText) {
//End RemoteCustomCode1 OnSuccess
//RemoteCustomCode1 Code @6-2A29BDB7
// -------------------------
// Write your own code here.
// -------------------------
//End RemoteCustomCode1 Code
(1) In the first block - "Add request parameters here" - you create the parameters that you want to send to the database. This will be the ID of the holiday chosen.
(2) Then turn to the code tab; you'll find a third block looking something like this.
'RemoteCustomCode1 Displaying @6-73254650
' -------------------------
' Write your own code here.
' -------------------------
'End RemoteCustomCode1 Displaying
In this block you'll have access to the parameter(s) that you set in part (1). Here you write the code to update the database.
(3) Finally, you return to the HTML page and the "Write your own code here" block. This is called if the server code was successful. So you can add your javascript here to turn the button green.
It's actually very simple. I'll share my usage in a song selection list in case it helps. Like you I have a grid of items (songs in this case) with a Select button on each. I change the caption to "Selected" after the selection has been recorded in the database.
SO for block (1) I have:
method = "post";
parameters["song_id"] = selected_song_id;
This creates a parameter called "song_id". You have to know which Song button was clicked; javascript on the button itself places the ID into a global variable selected_song_id.
In block (2) - the server side code - I have (thanks CCS for the wobbly formatting):
'RemoteCustomCode2 Displaying @53-73254650
' -------------------------
Dim lngSongId
Dim lngEventId
Dim strSQL
Dim Conn
Set Conn = New clsDBBJ_Database
Conn.Open
lngSongId = CLng(CCGetFromPost("song_id", 0))
strSQL = "INSERT INTO event_songs (song_id) VALUES (" & lngSongId & ")"
' Returns nothing if OK, otherwise return error!
Conn.Execute(strSQL)
If Conn.Errors.Count > 0 Then
Response.Write "Error adding the song ID: " & lngSongId & ". " & Conn.Errors.tostring
Else
Response.Write ""
End If
Conn.Close
' -------------------------
'End RemoteCustomCode2 Displaying
So here the value song_id, which is received from the page, is written to the database (I happen to be using ASP but the PHP equivalents are given in the help page mentioned above). You can return anything you like to the page using Response.Write. It could be a value, a text string, a block of JSON... but I'm returning an empty string if the database update was OK and the error message if it wasn't.
(3) Lasty, back in HTML, this is the third block of code I have
if (responseText.length > 0)
{
//Some kind of error
selected_span.innerHTML = responseText;
}
else
{
selected_span.innerHTML = "Selected";
}
Here I react to the value I've received back from stage (2). If there is any text I display it (it will be an error message in this case); if it is a zero length string (which I have chosen to indicate success - might be better to pass the value 'true' - it's entirely up to you) then I change the text of the clicked control to "Selected". That's where you can change the colour of your button.
In case it's not clear, all of this invokes an Ajax request (managed for you by CCS), and is achieved without page refresh.
So CCS makes it very easy to do what you want to achieve - but you have to get to understand the feature first which is the harder part.
Good luck
Andrew
|
|
|
|
eratech
Posts: 513
|
| Posted: 10/18/2014, 9:53 PM |
|
andrewi - excellent work. I'm waiting for a new project to implement Bootstrap into CCS and this will help a lot.
My experiments with Bootstrap show it's not hard to get a lot of the BS features into CCS using the Master pages to set up the styles etc, and then choose 'none' for CCS styles and the BS styles will take over.
Some minor HTML editing is needed for specifics such as changing the sorting icons on tables - but by setting up new 'components' for the Wizards to use instead of the standard ones you can pull together a lot of the items fairly quickly.
I haven't tried forms much so that will be a big area to check that it all works.
cheers
Eric
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia |
|
|
|
expo101
Posts: 24
|
| Posted: 10/20/2014, 1:55 AM |
|
Thanks for all the feedback sofar.
kirchaj: to implement Bootstrap in CCS follow instructions on http://getbootstrap.com/getting-started/
Easiest option is using Bootstrap CDN by adding these lines into your html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Next step is to understand Bootstrap's grid system which you can apply to your webpage by adding classes to the div's and which will make your webpage responsive. More info on the grid system: http://getbootstrap.com/css/
It's all straightforward and well documented and many tutorials are available, like this one: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
andrewi: thank you so much!, your info is very valuable to me. I'll further explore your suggestions and I feel that it will be succesfull.
Kind regards,
Frans de Jong
|
|
|
|
Waspman
Posts: 948
|
| Posted: 10/24/2014, 6:12 AM |
|
Nice work. I do similar stuff with Foundation, but more business systems, lots of grids and forms etc.
_________________
http://www.waspmedia.co.uk |
|
|
|
|
