[Advanced] Add new create location dynamically using Ajax

(Nic Hubbard) #1

Here is something that I have been working on recently, and I thought I would share.


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.



View video of example: http://hhttp://www.zedsaid.com/__data/assets/file/0002/1100/Folder-Create-Ajax.mov



Use some jQuery POST code.


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("" + folderName + "");


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:

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

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

[attachment=295:Picture_2.png]

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.

Hooray! Picture_2.png (2.29 KB)
(Duncan Robertson) #2

A beauty from the Matrix mecca nerd. One question: Which Jquery library are you running?

(Nic Hubbard) #3

I am using the newest 1.2.3 version, without any additional plugins. :)
(Rafal Zrobecki) #4

Very nice example using the power of jQuery, good stuff!

However, why not to attach an event handler to the button instead of adding inline javascript?

this line...


looks much better now:
    HTML:
    

JS:
$('#folderSave').click(function() {
   createAssetFolder();
});</pre><br />




it is always better to separate HTML layer from the JavaScript, whenever it is possible ;)
(Nic Hubbard) #5

[quote]Very nice example using the power of jQuery, good stuff!


However, why not to attach an event handler to the button instead of adding inline javascript?



this line…


looks much better now:
    HTML:
    

JS:
$('#folderSave').click(function() {
   createAssetFolder();
});</pre><br />




it is always better to separate HTML layer from the JavaScript, whenever it is possible ;)[/quote]



Thanks for the tip!  I had known about this method, but I had never used it before.  I am not sure why.  Thanks for refreshing my memory about this, I will update my asset builder!