I have created an application where elements from the toolbox can be dragged and dropped onto a canvas and their properties can be set as soon as they are dropped. But, I have an instance where when the "stream ui-draggable" element is dropped on the canvas I disable the canvas and the toolbox and display a properties panel where the user can select a predefined stream for the newly dropped element and also give it another name under the "as : " text field. This name should then replace the currently displayed- disabled name "Element" with the name provided bu the user. Is there a way that I can replace this text in the dropped element.
js function:
drop: function (e, ui) {
var dropElem = ui.draggable.attr('class');
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
if(dropElem=="stream ui-draggable")
{
var newAgent = $('<div>').attr('id', i).addClass('streamdrop');
//alert("newAgent ID: "+newAgent.attr('id'));
clickedId = newAgent.attr("id");
alert("clicked ID: "+i);
createStreamForm();
$("#container").addClass("disabledbutton");
$("#toolbox").addClass("disabledbutton");
$(droppedElement).draggable({containment: "container"});
var prop = $('<a class="streamproperty" onclick="doclick(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
var finalElement= newAgent.text("Element").append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(prop);
//Increment the Element sequence number
i++; r++; q++;
var l = ($(finalElement).attr('id'));
alert("Final elm id: "+finalElement.attr('id'));
var connection = $('<div>').attr('id', l + '-' + q).addClass('connection');
finalElement.css({
'top': e.pageY,
'left': e.pageX
});
finalElement.append(connection);
$('#container').append(finalElement);
jsPlumb.draggable(finalElement, {
containment: 'parent'
});
jsPlumb.makeTarget(connection, {
anchor: 'Continuous'
});
jsPlumb.makeSource(connection, {
anchor: 'Continuous'
});
}
The createStreamForm() function:
var importDiv, iStreamtype, br, istreamlbl, istreamtypelbl, iPredefStreamdiv, istreamDefLineDiv, istreamDefDivx, istreamName, importbtn;
var exportDiv,eStreamtype, estreamlbl, estreamtypelbl, ePredefStreamdiv, estreamDefLineDiv, estreamDefDivx, estreamName, exportbtn;
var streamDiv, streambtn;
var definestreamdiv,inputval;
function createStreamForm()
{
$(".toolbox-titlex").show();
$(".panel").show();
//For the Import Form
importDiv = document.createElement("div");
iStreamtype = document.createElement("div");
br = document.createElement("br");
istreamlbl = document.createElement("label");
istreamtypelbl = document.createElement("label");
iPredefStreamdiv = document.createElement("div");
istreamDefLineDiv = document.createElement("div");
istreamDefDivx = document.createElement("div");
istreamName = document.createElement("input");
importbtn = document.createElement("button");
importDiv.className = "importdiv";
importDiv.id = "importdiv";
istreamlbl.className = "lblfloat-left";
br.className = "br-div";
istreamlbl.innerHTML = "Stream:";
iPredefStreamdiv.id = "PredefinedStream1";
istreamDefDivx.className = "streamDefDiv";
istreamDefDivx.id = "streamDefLineDiv";
istreamName.className = "panel-input-streamName";
istreamName.id = "istreamName";
istreamName.placeholder = "as : ";
importbtn.type = 'button';
importbtn.innerHTML = "Import";
importbtn.className = "btn-import";
importbtn.setAttribute("onclick","storeImportStreamInfo()");
importDiv.appendChild(iStreamtype);
importDiv.appendChild(istreamlbl);
importDiv.appendChild(istreamtypelbl);
importDiv.appendChild(iPredefStreamdiv);
importDiv.appendChild(br);
importDiv.appendChild(istreamDefLineDiv);
importDiv.appendChild(istreamDefDivx);
importDiv.appendChild(br);
importDiv.appendChild(istreamName);
importDiv.appendChild(br);
importDiv.appendChild(importbtn);
importDiv.appendChild(br);
//For the Export Form
exportDiv = document.createElement("div");
eStreamtype = document.createElement("div");
br = document.createElement("br");
estreamlbl = document.createElement("label");
estreamtypelbl = document.createElement("label");
ePredefStreamdiv = document.createElement("div");
estreamDefLineDiv = document.createElement("div");
estreamDefDivx = document.createElement("div");
estreamName = document.createElement("input");
exportbtn = document.createElement("button");
exportDiv.className = "exportdiv";
exportDiv.id = "exportdiv";
estreamlbl.className = "lblfloat-left";
estreamlbl.innerHTML = "Stream:";
ePredefStreamdiv.id = "PredefinedStream2";
estreamDefDivx.className = "streamDefDiv";
estreamDefDivx.id = "streamDefLineDiv";
estreamName.className = "panel-input-streamName";
estreamName.id = "panel-input-streamName";
estreamName.placeholder = "as : ";
exportbtn.type = 'button';
exportbtn.innerHTML = "Export";
exportbtn.className = "btn-export";
exportDiv.appendChild(estreamlbl);
exportDiv.appendChild(estreamtypelbl);
exportDiv.appendChild(ePredefStreamdiv);
exportDiv.appendChild(br);
exportDiv.appendChild(estreamDefLineDiv);
exportDiv.appendChild(estreamDefDivx);
exportDiv.appendChild(br);
exportDiv.appendChild(estreamName);
exportDiv.appendChild(br);
exportDiv.appendChild(exportbtn);
exportDiv.appendChild(br);
//For the Stream Form
streamDiv = document.createElement("div");
streambtn = document.createElement("button");
definestreamdiv = document.createElement("div");
inputval = document.createElement("div");
streambtn.type = 'button';
streamDiv.className = "streamdiv";
streamDiv.id = "streamdiv";
streambtn.innerHTML = "Define Stream";
streambtn.className = "btn-define-stream";
streambtn.setAttribute("onclick","createattribute()");
//inputval.innerHTML = "Provide a Stream name and click to add attribute-type pairs to yours stream.";
streamDiv.appendChild(streambtn);
definestreamdiv.appendChild(inputval);
lot.appendChild(importDiv);
createattr();
lot.appendChild(exportDiv);
lot.appendChild(streamDiv);
lot.appendChild(definestreamdiv);
}
storeImportStreamInfo() Function:
var clickcount=1;
function storeImportStreamInfo()
{
var choice=document.getElementById("streamSelect");
var selectedStream = choice.options[choice.selectedIndex].text;
var asName= document.getElementById("istreamName").value;
var StreamElementID = clickcount;
clickcount++;
createdImportStreamArray[clickedId][0]=StreamElementID;
createdImportStreamArray[clickedId][1]=selectedStream;
createdImportStreamArray[clickedId][2]=asName;
y++;
}
Solved it by passing the newly dropped jsPlumb object to the storeImportStreamInfo() as parameters and set the text within the method. Also this parameter needs to be carried through all the functions through which it progresses before achieving the storeImportStreamInfo() method.
Eg:
function createStreamForm(newAgent,i)
within this function->
importbtn.onclick = function() {
storeImportStreamInfo(newAgent,i);
}
and so on. In the storeImportStreamInfo() function, I've added the lines that append the icons and the text to the dropped Element.
var prop = $('<a class="streamproperty" onclick="doclick(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
newAgent.text(asName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(prop);