Login

10-24-2008, 01:33 PM

[eluser]meade[/eluser]
Just finished building a risk management prototype in jquery and codeigniter - it's a drag drop interface....
http://itprojectguide.org/PMBase/RiskPlace/demo/rp
Just had fun doing it, didn't see it anywhere else (probably if I looked more) and felt like sharing.

10-24-2008, 04:57 PM

[eluser]OES[/eluser]
Hey nice little app. Well played.

Just as a matter of interest you have a small error. Comes up in Firebug.

Quote:Security Error: Content at moz-nullprincipal:{5d540055-cb26-4649-af1f-27e19e0f6698} may not load or link to chrome://tidy/skin/warning.png.

Thanks for sharing. Maybe a good idea to add to Wiki.

11-16-2008, 11:35 AM

[eluser]D R Upton[/eluser]
Very nice and looks great -thnk you. Is there any easy way to make this into a form - ie make each box into a form 'text area' so that when the form is submitted, the text you dragged in to it is submitted?

11-16-2008, 05:23 PM

[eluser]Nick Husher[/eluser]
I'm only a novice at jQuery, but I think something along these lines would work:

Code:
// note that you have to add a button with a class of "save-risks"

$("button.save-risks").click(function() { 

    var riskLevels = ['unassigned','lowrisk','medrisk','highrisk'];

    // dynamically create a new form

    var form = document.createElement('form');

    form.style.display = 'none';

    form.method = 'post';

    form.action = '.' // whatever you want the form to submit to...

    document.body.appendChild(form);

    // populate our new form with data

    for(var i = 0; i < riskLevels.length; i++) {

        var riskLevel = riskLevels[i];

        var selector = '.'+riskLevel+' .ui-draggable';

        $(selector).each(function(el) {

            var input = document.createElement('input');

            input.name = riskLevel+'-entries[]';

            input.value = el.inner HTML; //innerText might be a better idea

        });        

    }

    form.submit();

});

When you submit, you should be able to access the properties via:

Code:
$unassigned = $this->input->post('unassigned-entries'); // returns array

$low_risk = $this->input->post('lowrisk-entries'); // returns array

//etc...

11-21-2008, 09:06 AM

[eluser]D R Upton[/eluser]
Thanks very much, but I just can't get this to work.
The main problem seems to be that the 'save-risks' button doesn't communicate to the code unless I dechain it and name your anonymous function and put an 'onclick='functionname' in the button definition - and then the other things don't work.
I assume I'm laying out the jQuery stuff wrongly, so can I ask some idiot questions?
1. where do I put the jquery code
- <head> section (which means in one of my CI views)
- or between [removed] tags in the <body>, which could be in a model or a view
- if the latter does it matter if it's before or after the button definition
2. how do I set up the button so your code can see it? (I've tried
<INPUT TYPE='button' id='save-risks' class='save-risks' name='save-risks' value='click me'> which produces a button that does nothing when clicked.

11-21-2008, 09:12 AM

[eluser]Nick Husher[/eluser]
I think what's happening is that the jQuery script isn't finding the selected node so the function isn't being executed. It's not finding the node because it doesn't exist in the DOM tree when the script executes (I assume it's above the button in the source code). What you need to do is add a listener for when the DOM tree has finished loading, which in jQuery you can do by "$(document).ready()"

Code:
$(document).ready(function() {

   // copypaste my previous code

});

11-21-2008, 09:48 AM

[eluser]D R Upton[/eluser]
Thanks very much for the very quick reply.
Leaving aside where in my CI files the code is, what is being generated as the HTML page source code is now:

Code:
&lt;head&gt; 

&lt;meta name="robots" content="noindex,nofollow"&gt;  

<s_cript type='text/javascript' src="http://127.0.0.1/sonof/js/jquery.js"></s_cript>

  <s_cript type='text/javascript' src="http://127.0.0.1/sonof/js/jqcode.js"></s_cript>

  <s_cript type='text/javascript' src="http://127.0.0.1/sonof/js/ui.core.js"></s_cript>

  <s_cript type='text/javascript' src="http://127.0.0.1/sonof/js/ui.draggable.js"></s_cript>

  <s_cript type='text/javascript' src="http://127.0.0.1/sonof/js/ui.droppable.js"></s_cript>

&lt;link rel="stylesheet" type="text/css" href="http://127.0.0.1/sonof//aw2.css"&gt;

<s_cript>

$(document).ready(function(){

$("button.save-risks").click(function() {

    var riskLevels = ['unassigned','lowrisk','medrisk','highrisk'];

    alert{'got here'};

    // dynamically create a new form

    var form = document.createElement('form');

    form.style.display = 'none';

    form.method = 'post';

    form.action = 'http://127.0.0.1/sonof/index.php/start/assess/71/37/4/1.html' // whatever you want the form to submit to...

    document.body.appendChild(form);

    // populate our new form with data

    for(var i = 0; i < riskLevels.length; i++) {

        var riskLevel = riskLevels[i];

        var selector = '.'+riskLevel+' .ui-draggable';

        $(selector).each(function(el) {

            var input = document.createElement('input');

            input.name = riskLevel+'-entries[]';

            input.value = el.html; //innerText might be a better idea

           var htmlStr = $(this).html();

           alert(htmlStr);

        });        

    }

     form.submit();

}); 

 });

[removed]

&lt;/head&gt;

&lt;body&gt;

//....page stuff and code setting up containers etc....

&lt;INPUT TYPE='button' id='save-risks' class='save-risks' name='save-risks' value='click me3'&gt;

&lt;/body&gt;

&lt;/html&gt;

(NB all those 's_cripts' are like that so the CI forum will show them, in the original it's the s-word without the underscore of course.)

Does this look OK to you?

11-21-2008, 09:55 AM

[eluser]Nick Husher[/eluser]
It looks okay to me, but what does your browser say about it? Wink

11-21-2008, 10:16 AM

[eluser]D R Upton[/eluser]
It shows the page, but when I click on the button nothing happens. Even an alert('got here') just after the main function starts doesn't produce any result. I'm baffled.

07-07-2009, 07:38 AM

[eluser]snooper[/eluser]
based on the code below, i have got this to work (mostly)
except that the form doesnt seem to be submitting anything - i have setup a form reader via ASP to print out the form values, but nothing gets printed.

i also tried to print the "field" values, like so -

Code:
input.value = el.innerText; //innerText might be a better idea //innerHTML

        alert(input.value);

and it alerts 'undefined'

any ideas?

thanks for this!