Tuesday, April 29, 2008

Deleting assets using triggers and ajax

There has been a few postings on the MySource Matrix forums about how to delete an asset using a trigger, but the posts are scattered and not comprehensive. So, I thought I would post the way that I remove assets using a trigger, ajax to "touch" the url, and javascript to hide the asset from view.


→ Take a look at the video: Delete asset using triggers/ajax


Our first task is to set up a trigger that will delete an asset from a specific location. In my case, I want to only delete assets that are in the "All Announcements" folder. Set up the trigger using the following:


Event: Asset Accessed



Conditions: Tree Location, URL Matches, Access Permission (You can change this to admin if needed)



Action: Create Link (Link asset into the trash)



Then we need to use some javascript to make it all happen (jQuery is being used):



function deleteAjaxAsset(message, action, assetid, asseturl) {
var confirmDelete = confirm(message);
if (confirmDelete == true) {
if(action == "delete ") {
//Add jQuery function to hide the asset from the users view
$( "# " + assetid).hide();
$( "#announceItemFull ").html( " ");
//Use ajax to post the URL so that our trigger will delete the asset
$.ajax( {
type : "POST ", url : asseturl + "?action=delete " }
);
}
}
}


I am sure this script could be improved apon, but you can extened it to work with more triggers by just adding another if statement with something like action == archive or action == live and create triggers accordingly.


Then we need to call that function with an event, and pass the necessary arguments:


<input type="button" value="Delete Announcement ID:%asset_assetid%" 
id="subBtn%asset_assetid%" onclick="deleteAjaxAsset('Are you sure you want to
delete asset #%asset_assetid%?','delete','announceHubItem%asset_assetid%','%asset_url%');" />

We are passing 4 different things to the function. The message you want to appear, the action, which is delete, the id of the div that you want to hide, and finally, the asset URL.


Thursday, April 24, 2008

Add new create location dynamically using Ajax

We have a news builder page that creates news items that appear under our News & Events section. These can also be linked under an Academic Department. In addition to this you can link the news item under a non-academic department. But this select list does not have set options. So I wanted a way for the user to quickly add a new non-academic department without having to leave the page, and without having to reload.


A folder is used as the create location, and jQuery is used to post both the asset builder for the folder, and for the news item.


→ Take a look at the video: Add create location w/ Ajax


Use some jQuery POST code.



function createAssetFolder() {

$("#createdFolderLoad").show().html('<span id=\"hideFolder\"><img
src="./?a=16336" /></span>');

var folderName = $("#folder_0_220").val();

SQ_FORM_ERROR_CONTAINED = false;

$.ajax({

type: "POST",

data: "19303_ASSET_BUILDER_ACTION=create&19303_ASSET_BUILDER_CREATE_TYPE=

folder&asset_action=create_custom&asset_ei_screen=details&sq_link_path=
&sq_preview_url=&folder_0_220=" + folderName + "&sq_lock_release=0",

url: "./?a=19303/?",

success: function(html){

$("#createdFolder").append($(html).find("#ajaxResultFolder"));

$("#non_academic").append("<option value=\"" +
folderItemId + "\">" + folderName + "</option>");

$("#hideFolder").hide();

}

});


}


We have to use the .find function so that it will only return the div that we want, which contains some "Created" page information:


$("#createdFolder").append($(html).find("#ajaxResultFolder"));

We also have to update the select list, with our newly created option, making sure to add the newly created asset ID and the newly created asset name:


$("#non_academic").append("<option value=\"" + folderItemId + "\">" + folderName + "</option>");

A variable is set on the "Created" page with the new asset ID. This is brought in when we get our thank you results:


var folderItemId = %created_assetid%;

Make sure to add a "submit" button with our function:


<input type="button" id="folderSave" onclick="createAssetFolder();" value="Save" />

And after all this, our new folder are created, and our selection list has been dynamicly updated with our new create location!




Remember that we are NOT nesting this asset builder into our News Item asset builder, we are only refering to it when we are posting, and sending it the nessisary data.


Friday, April 11, 2008

A Quick Peek

I just thought that I post a quick preview of our homepage for the new PUC website. We wanted to keep the large dominant photo that we so well loved from the old website, and also keeping current news on the homepage, only expanding it a little. We also needed to incorporate the calendar on the homepage, and instead of only one day, we used the Rolling Calendar Page asset and made a scrolling calendar that has 2 weeks of events.



There is still work to do on some of the top level designs such as "Academics", "Enrollment", etc. But these are fairly minor. One of our last large challenges are our Portal pages: Prospective Students, Current Students, Faculty & Staff, Parents & Family, and Alumni.


Tuesday, April 8, 2008

Matrix WYSIWYG: To use, or not to use

There has been some debate recently in my head about what to do with the matrix wysiwyg editor. There are some positives, such as html tidy, access to linking assets in the asset map, etc. But there are many problems with it, mine being how much bloated javascript is inserted into each page.


Since my main focus right now is figuring out how I can implement ajax where ever I can, the Matrix wysiwyg editor posed a large problem. Because of the large amounts of external javascript files, and large amounts of code, it was very hard to implement it with ajax, and still have it work. Since I am using the jquery GET function, it loads my ajax content in using innerHTML. And, as most of us know, sometimes that can be a problem. It was becoming so tricky to initiate the wysiwyg editor after loading it into a div, that I started rethinking it all together.


I had looked at other solutions in the past. FCK Editor, and TinyMCE, both are nice editors, but both are really bloated! So, I went on the search for an alternative. And, I eventually found what I was looking for.



I found a very light weight, small wysiwyg editor, that is only 2 files! One .js file, and one .gif file. The wysiwyg editor if called NicEdit (strangly enough it has my name in it) It is such a difference from those editors that contain hundreds of files and a million features. In our situation, we only need basic formating options. We don't need anything advanced, and for this application, we don't need to let users link to any other pages in Matrix, so having a need to link with the asset map is not valid here. So I am pretty happy with how it turned out, and it loads very well using ajax which makes me happy! And, it writes nice XHTML code, which is a bonus. I also think that the project will have a great future, and some awesome new features will be continually added.


The editor is easily loaded into every text area, or you can configure it per text area id.


bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); 


Some of the greatest thing about this editor is how customizable it is. You can customize all of the buttons, showing all, none, or just a few. You can use it as an inline editor, and have your text change to an editable box on clicking it. You can also have the editor buttons detatched from the textarea's that you are editing, and you can edit multiple instances of the editor using one button control area. Very cool! I am pretty excited about it, and am very happy about this choice. Of course I will still be using the Matrix editor in a few places like standard page editing, but for most of our applications, NicEdit is the way to go.


Newer Posts Older Posts Home