Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Tabbed UI a5_ajax_callback Javascript jQuery variables passed to Xbasic

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    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 Files

    #2
    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, 09:31 PM.

    Comment


      #3
      Re: Tabbed UI a5_ajax_callback Javascript jQuery variables passed to Xbasic

      That's a lot of code!

      Are you dimming "SQL" anywhere?

      Comment


        #4
        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.

        Comment

        Working...
        X