media or image manager

[eluser]bennyhill[/eluser]
I see many CMS systems that have media managers. For example, when a user is inputting product information to the database, they click on the image field, a pop up is displayed with the manager, they select the already uploaded image, click ok, and that image filename is placed back in the image field in the view. How do they pass variables like that from a pop up window, back to the main form?

I am kinda confused on the whole theory of multimedia managers for CMS systems so if someone can post some tutorials or articles I would appreciate it.

[eluser]TheFuzzy0ne[/eluser]
It's not possible without JavaScript.

This article should get you started: http://hspinfo.wordpress.com/2008/01/17/...nt-window/

[eluser]bennyhill[/eluser]
great thanks!

[eluser]Mushex Antaranian[/eluser]
I think now its more actual to use pop up divs. Its simple if you are using jQuery framework http://jquery.com

client side code looks like this

HTML

Code:

<input type="text" id="getPopupValue" value="" />
<span id="popupOpen"> Open popup </span>
<div id="popupDiv">
    &lt;input type="text" id="popupValue" value="Type Some Text" /&gt;
    <span id="popupClose"> Close popup </span>
</div>

JavaScript (jQuery)

Code:

// when page loaded
$(document).ready(function(){
    // if you click on #popupOpen
    $('#popupOpen').click(function(){
        // show #popupDiv
        $('#popupDiv').show();
    })
    // when you click on #popupClose
    $('#popupClose').click(function(){
        // get value from input with id (not name) #popupValue and store to variable value
        var value = $('#popupValue').val();
        // set value of input with id #getPopupValue equal to variable value
        $('#getPopupValue').val(value);
        // hide #popupDiv
        $('#popupDiv').hide();
    })
});

and some CSS

Code:

#popupDiv {
    /* hiding popup by default */
    display:none;
    /* here we just styling div*/
    border:1px solid;
    height:120px;
    width:160px;
    position:absolute;
    top:40%;
    left:40%;
    padding:10px;
}

Thats all, man.

last jQuery library is available at http://jqueryjs.googlecode.com/files/jqu...3.2.min.js

[eluser]Colin Williams[/eluser]
CI IS A SERVER SIDE APPLICATION FRAMEWORK!!!!!

Learn the simple crap first...

SHEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEESH!!!!

[eluser]Mushex Antaranian[/eluser]
I'm agree with you, Colin

But we can help also back end coders with cilent side problems )

[eluser]jwindhorst[/eluser]
Mushex, as an addendum to your posted code; almost the exact same code would work with the prototype.js library. I only mention this because without going through the "No conflict" nonsense in JQuery the two don't play together all that nicely, and if you are already using one, why bother trying to hack the other for something so simple.

And Colin, lighten up man, every techie I know is forced to wear a lot of hats. If your primary knowledge base is PHP and your boss says "Make it pop out like that fancy thing I saw somewhere" we usually just have to make it happen, even if it means being berated by backenders for asking questions about JS

[eluser]Colin Williams[/eluser]
Ha! I actually mis-posted, I think. I must have had two windows of the CI forums open (I thought I was responding to yet another "relative path not working" post, at least in the second-half of my response).

My apologies

[eluser]jwindhorst[/eluser]
Yar! Now all the uber's can get on board and flame you for it!

Or not, that would be really lame. Thanks for posting the apology though, I myself have used the CI forum as a general community of IT knowledge even when it's not CI related.

Cheers.