Alpha Video Training
Results 1 to 4 of 4

Thread: Tabbed UI a5_ajax_callback Javascript jQuery variables passed to Xbasic

  1. #1
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,545

    Default Tabbed UI a5_ajax_callback Javascript jQuery variables passed to Xbasic

    Thought I'd post this because it's kinda cool.

    I'm using a jQuery Notifications plug-in... in a Tabbed UI. From an Alpha component I can create a Notification that displays on the Tabbed UI. And from the Tabbed UI I can read the Notification and mark a Notification as read... this is all part of the jQuery plug-in. None of this involves saving the Notifications across sessions. Once the Tabbed UI is closed the Notifications are lost.

    I wanted to save the Notifications in a table and I also wanted control over the Notifications from a component. So... when a Notification is created, the plug-in processes it, plus I write that Notification to a table and I'm able to view those Notifications from a grid. Because the Notifications are saved in a Table I'm able to "re-process" them when the Tabbed UI gets re-displayed... so they're not lost any more.

    Each Notification, when created, is an Object with each Notification getting a unique ID... and information for each Notification is written to the Tabbed UI document with it's ID... that's the way the plug-in does it.

    But, the Notification Object is not saved. And I need that Object in order to work with a Notification... if I wanted to read it or delete it, in code. So I used jQuery and .Data to save each Object in it's document element.

    Next, I wanted two way communication between the Notification Table and the Tabbed UI. If I read a Notification in the Tabbed UI, using the plug-in, I wanted to update the table using XBasic. Similarly, if I read a Notification in my Grid I wanted the plug-in to process that Notifcation so that the Tabbed UI would relfect the read.

    Here's the order of things...

    1. The Tabbed UI opens. The Tabbed UI contains an a5w_include in it's footer which runs XBasic code. The SQL table is read and jQuery statements are built. The XBasic code finished by passing back the jQuery / Javascript statements which get executed, calling the plug-in, and building the Notifications for the tabbed UI.

    2. As each Notification is built by the plug-in, I also save each Notification object in the Tabbed UI document.

    3. If I read a Notification from the Tabbed UI, the plug-in does the read and marks the Notification as read - but it doesn't do anything else. The plug-in does contain it's own "callback" feature. If something happens to a Notification... a read... a delete... a create... then a callback fires. The callback contains the Notification Id. In the plug-in Read callback I execute an A5_Ajax_Callback to run some Xbasic code in an A5W page. The XBasic code gets the ID passed into it by the A5_Ajax_Callback and runs a SQL Update statement, marking the Notification in the Table as read.

    4. If I open up the Grid, displaying the Notification, and I click on a checkbox to Read a Notification, I fire the plug-in code to Read the Notficiation... and the Tabbed UI Notification is updated by the plug-in.

    So... basically... we've got data flowing back and forth between Javascript and XBasic... and Javascript and XBasic commands are being executed... through the Tabbed UI.

    The Notifications plug-in costs $4 and can be found here.

    http://codecanyon.net/item/notificat...n-types/397393

    I've had to modify the jQuery a bit in order to pass the Notification ID around a bit more, so if anyone purchases it I'll send you my modifications.

    This is my A5_Ajax_Callback...

    Code:
    a5_AJAX_Callback('jq_notifications.update.a5w','action=update&notification=' + notification.id);
    And this is the code in my jq_notifications.update.a5w page...

    Code:
    <%a5
    
    if action = "update" then
    
    	dim cn as sql::Connection
    	dim args as sql::Arguments
    	dim rs as sql::ResultSet
    	dim readNot as c
    	
    	readNot = notification 
    	
    	sql = "update Notifications set read = '1' where Notification_ID = '" + readNot + "'"
    	
    	cn.open("::name::CompanyProfile")
    	cn.PortableSQLEnabled = .t.
    	
    	cn.Execute(sql) 
    	
    	cn.FreeResult()
    	cn.close()
    
    end if
    
    %>
    I am getting an error after this callback runs. It doesn't seem to affect anything, and my table update does happen. Here's the error... has anyone seen anything like this?

    I'll post the rest of my Tabbed UI included Javascript/JQuery/XBasic code a bit later.
    Attached Images Attached Images

  2. #2
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,545

    Default Re: Tabbed UI a5_ajax_callback Javascript jQuery variables passed to Xbasic

    Here's some of the code. In the Tabbed UI Footer Text...

    Code:
    <%a5 a5w_include("jq_notifications.a5w")%>
    The jq_notifications.a5w code... in part...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="generator" content="Alpha Five HTML Editor Version 11 Build 3044-4041">
    <!-- must use in order to make XP Themes render -->
    <meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="notifications/css/style_dark.css">
    <script src="notifications/js/ttw-notification-center.js" type="text/javascript"></script>
    
    <script>
    	if(typeof jQuery != 'undefined')
    	 jQuery.noConflict();
    </script>
    
    <script>
    js_addNotifications = null;
    js_deleteNotification = null;
    js_getNotifications = null;
    js_updateAllBubbles = null;
    js_dbNotification = null;
    
     var links = document.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++){
            if (links[i].innerHTML=="Clients")
            	{
            	links[i].setAttribute("id", "clientNot");
            	}
            if (links[i].innerHTML=="Task List")
            	{
            	links[i].setAttribute("id", "taskNot");
            	}	
        	}
    
    //The Tree object must have CSS style position of relavtive in order to work with the Notifications plug-in
    $('tbiObj_TREE_313bc658_fd46_4081_be2b_a2572ca3b3a7').style.position = "relative";
    
    </script>
    
    
    <script>
    jQuery(function() {
    
        var notifications = new jQuery.ttwNotificationCenter({
            bubble:{
                useColors:true
            },
    		createCallback:function(notification){
    			//alert('creating');
    		},
    		markReadCallback:function(notification){
    
    			a5_AJAX_Callback('jq_notifications.update.a5w','action=update&notification=' + notification.id);
    
    		},
    		deleteCallback:function(notification){
    			//alert('deleting');
    		},
    		notificationCountIncrease:function(notification){
    			//alert('increased the count');
    		},
    		notificationClickCallback:function(notification){
    			//alert('clicked');
    		},
    		closeCallback:function(notification){
    			//alert('closed');
    		}
    
        });
    
        notifications.initMenu({
            clients:'#clientNot',
            tasks:'#taskNot',
    		system:'#tbiObj_TREE_313bc658_fd46_4081_be2b_a2572ca3b3a7'
        });
    
    	// This is the call to add any type of Notification.  E.g. Clients, Tasks, System
    	function jq_addNotification(message, category){
    		//Custom parameters.
    		addNot = notifications.createNotification({
    			message:message,
    			type:'none',
    			category:category,
    			icon:'notifications/images/success_color.png',
    			autoHide:true,
    			autoHideDelay:3000
    		});
    
    		// In order to do anything with the Notification in code, e.g. read it, we need it's object... so save each object in the document
    		// Since there is already an HTML Id set of for the Notification, we are using this ID to add the data element to the ID
    		// The data element is the Notification Object
    		// We have the Notification ID in the Notifications table, so we just need to grab that, and then get the object in order to work with it.
    		// This allow us to Read or Delete a Notification without going through the Notification on screen interface.  We can do this from any component
    
    		jQuery(document).data(addNot.id,addNot);
    
    		////which can be retrieved as:
    		//myNotObj = jQuery(document).data(addNot.id);
    		//alert(myNotObj.id);
    
    		return addNot.id;
           }
    
    	// This function is called in order to read existing notifications from the Notification table
    	// notification : the unique id first created by the createNotifications function
    	// isNew : Logical : from the table
    	// message : Text : from the table
    	// category : Text : from the table
    
    	function jq_dbNotification(notification, isNew, message, category){
    		dbNot = notifications.createNotification({
    			id:notification,
    			isNew:isNew,
    			message:message,
    			type:'none',
    			category:category,
    			icon:'notifications/images/success_color.png'
    		});
    
    		// In order to do anything with the Notification in code, e.g. read it, we need it's object... so save each object in the document
    		// Since there is already an HTML Id set of for the Notification, we are using this ID to add the data element to the ID
    		// The data element is the Notification Object
    		// We have the Notification ID in the Notifications table, so we just need to grab that, and then get the object in order to work with it.
    		// This allow us to Read or Delete a Notification without going through the Notification on screen interface.  We can do this from any component
    		
    		jQuery(document).data(dbNot.id,dbNot);
    		return dbNot;
    	}
    
    	js_addNotification = jq_addNotification;
    	js_deleteNotification = jq_deleteNotification;
    	js_getNotifications = jq_getNotifications;
    	js_updateAllBubbles = jq_updateAllBubbles;
    	js_dbNotification = jq_dbNotification;
    });
    
    
    </script>
                             
    <%a5
    
    dim cn as sql::Connection
    dim args as sql::Arguments
    dim rs as sql::ResultSet
    dim currUser as C
    
    'DK : You need to build your SELECT statement with whatever arguments you need
    sql = "SELECT * FROM notifications WHERE user_id = 1 AND Read = 0"
    
    cn.open("::name::CompanyProfile")
    cn.PortableSQLEnabled = .t.
    
    'args.add("admin_id", session.admin_id)
    'args.add("user_id", e.vuserid)
    
    ' DK : Not sure how else to do this.  We need to execute js_dbNotification for each Notfication in the table for the user.
    ' Build the js_dbNotification call for each Notification... let's hope there aren't too many.
    ' If there are too many and the string gets too long some other way of calling js_dbNotification will be needed.
    ' Here we're loading with isNew=1 since they're unread... and therefore need to bump up the bubble count
    
    dim jtxt as c = ""
    jtxt = "jQuery(document).ready(function(){"
    
    dim cntNot as N = 1
    cn.Execute(sql, args)
    rs = cn.ResultSet
    dim flagResult as L = rs.nextRow()
    while flagResult
    	notificationId = rs.Data("Notification_Id")
    	msgNotification = rs.Data("Message")
    	Category = rs.Data("Category")
    		jtxt = jtxt + "js_dbNotification('" + notificationId + "',1,'" + msgNotification + "','" + Category + "');"
    	flagResult = rs.nextRow()
    end while
    
    
    cn.FreeResult()
    cn.close()
    
    jtxt = jtxt + "});"
    
    'Return all the created Javascript/jQuery statements to be executed
    ?"<script>" + jtxt + "</script>"
    
    %>
    There are some really interesting bits here... near the top of the code there is...

    Code:
    js_addNotifications = null;
    js_deleteNotification = null;
    js_getNotifications = null;
    js_updateAllBubbles = null;
    js_dbNotification = null;
    and at the bottom of the jQuery code there is...

    Code:
    	js_addNotification = jq_addNotification;
    	js_deleteNotification = jq_deleteNotification;
    	js_getNotifications = jq_getNotifications;
    	js_updateAllBubbles = jq_updateAllBubbles;
    	js_dbNotification = jq_dbNotification;
    The jQuery functions are all jq_addNotification, etc. but... since they're wrapped in a jQuery function statement we can't get to them from a grid or dialog. By setting up a pointer - js_addNotification - outside jQuery, we can assign the jQuery function to the Javascript pointer and it fires when called. Now, js_addNotification is just a Javascript function available to be called from anywhere in the system.

    Notice the statement in the jq_addNotifications function...

    Code:
    jQuery(document).data(addNot.id,addNot);
    This takes an object and saves in an Element ID in the current document.

    I mentioned that this jQuery plug-in has built-in callback functionality. After something happens... like a Create Notification... a callback for that action fires. So... when a Notification is read, the read callback fires and I put an a5_ajax_callback in place in order to fire some Xbasic code to update the SQL Table.

    Code:
    a5_AJAX_Callback('jq_notifications.update.a5w','action=update&notification=' + notification.id);
    It's the only way I could see passing the Javascript Notification.Id back to the server to execute a SQL table udpate.

    Overall, I'm not sure that this whole process is the right way to go. But... it sure serves as a interesting exercise in getting a Tabbed UI to interact with a jQuery plug-in, Javascript, XBasic, and SQL Tables.

    It also shows that this could not have been put together without a few key ingedients:

    This forum... so many great messages and questions and answers.
    The documentation for Alpha 5
    The great people in this forum... Andy Gill, Steve Workings, Jinx (alias A H), Lily Von Ohlen, just to name a few out of dozens whose messages were invaluable.
    And Alpha 5... proving once again that you can do anything with this great work of software.

    Thanks.
    Last edited by Davidk; 01-27-2013 at 08:31 PM.

  3. #3
    Member -Jinx-'s Avatar
    Real Name
    Jinx
    Join Date
    Jul 2012
    Location
    Wisconsin
    Posts
    963

    Default Re: Tabbed UI a5_ajax_callback Javascript jQuery variables passed to Xbasic

    That's a lot of code!

    Are you dimming "SQL" anywhere?

  4. #4
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,545

    Default Re: Tabbed UI a5_ajax_callback Javascript jQuery variables passed to Xbasic

    Yeah... there are a lot of pieces.

    No... I hadn't dimmed 'sql'... I missed that one... thanks... but I just tried it... still the same error.

Similar Threads

  1. Tabbed UI Javascript from Xbasic
    By Davidk in forum Application Server Version 11 - Web/Browser Applications
    Replies: 3
    Last Post: 01-26-2013, 11:10 PM
  2. XBasic Function and Passed Values?
    By mvaughn in forum Application Server Version 11 - Web/Browser Applications
    Replies: 4
    Last Post: 01-19-2013, 08:39 PM
  3. Javascript pass variables to, and run Xbasic Script
    By sbozzie in forum Application Server Version 11 - Web/Browser Applications
    Replies: 3
    Last Post: 01-10-2013, 10:42 AM
  4. xbasic or javascript and Jquery
    By Berskyboy in forum Application Server Version 10 - Web/Browser Applications
    Replies: 3
    Last Post: 04-25-2011, 12:09 PM
  5. Any update for the JQUERY JavaScript Calendar
    By kunjulin in forum Application Server Version 10 - Web/Browser Applications
    Replies: 5
    Last Post: 10-04-2010, 10:30 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •