JavaScript Forum

**gabexvx** · 08-20-2009, 10:10 AM

Hi everyone,

I'm trying to build a small application with jQuery UI where a user will be able to drag and drop a small marker to specify certain circumstances regarding to physical pain. The idea is then that a dialogue window pops up where the user can change certain options and on clicking the OK button, it should send this information to be stored in an array. The client will later decide how they will deal with that information.

The problem is however related simply to writing to that array. What I want to do is to take the info inside of a DIV with the ID #dialog - namely an option in a drop-down menu (yet to be implemented, actually), the X and Y coordinates of the marker and the intensity of the pain, which can be chosen from a jQuery UI slider - and write them to the array painStorage when the user clicks the OK button inside the #dialog DIV.

I have however not been able to find any examples of Javascript of how to simply grab any information from a page and write it to an array. Any ideas?

Here's my code:

Code:

<script type="text/javascript">
var painStorage = new Array();

$(function() {
		   $("#slider-range-min").slider({
			range: "min",
			value: 1,
			min: 1,
			max: 10,
			slide: function(event, ui) {
					$("#amount").val(ui.value);
				}
			});
			$("#amount").val($("#slider-range-min").slider("value"));
			$(".draggable").draggable();
			$("#droppable").droppable({
				drop: function(event, ui) {
					var div = $("div.draggable");
					var position = div.position();
					$("#dialog p:first").text( "X: " + position.left + ", Y: " + position.top );
					$("#dialog").dialog("open");
				}
			});
			$("#dialog").dialog({
				buttons: {
					Cancel: function() {
						$(this).dialog('close');
					},
					Ok: function() {
						
						$(".draggable").draggable('destroy'),
						$(this).dialog('close');}
					},
				autoOpen: false,
			});
});
</script>

The DIV #dialog:

Code:

<div id="dialog" class="ui-widget-header" title="Mängd smärta?">
	<p></p>
    <p>
		<label for="amount">Mängd smärta:</label>
		<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>
	<div id="slider-range-min"></div>
</div>

Thanks for reading!