I'm currently trying out some things with JQuery-ui, Drag and Drop everything seems to work properly up until the moment that I want to update a hidden field value based on what's been dragged into the droppable target.
So in short, I'm trying to update the value of a given hidden input element, for example:
<input type="hidden" id="Fixture1.HomeTeamId" name="Fixture1.HomeTeamId" value="">
And trying to do this the moment a draggable object gets dropped into a valid dropable location. (See full code further down) However right now, I seem even unable to grab any value from these elements at all. When I add a value to start with into a specific hidden input element. e.g.:
<input type="hidden" id="Fixture1.HomeTeamId" name="Fixture1.HomeTeamId" value="20">
and try to call it when the function triggers e.g.:
alert("Start Value: " + $("#Fixture1.HomeTeamId").attr("value"));
//OR
alert("Start Value: " + $("#Fixture1.HomeTeamId").val());
it even returns 'undefined' to start with.
I think I'm either overlooking something or making a not so clear typo left or right. But even after browsing a handful of similar topics here on Stackoverflow I'm not spotting the issue in my code...
Hope someone out there can put me back on the right track! Thanks in advance.
Being an ASP.Net MVC project below the razor code for the full page.
@model WebUI.Models.FixturesViewModel
<h2>Test</h2>
<div class="row">
<div class="col-md-3">
@foreach (var team in Model.Teams)
{
<div class="Draggable" name="Teams" data-TeamId="@team.TeamId" data-TeamName="@team.TeamName" data-CoachName="@team.CoachName">
@team.TeamName
</div>
}
</div>
<div class="col-md-9">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-horizontal">
<h4>Fixtures</h4>
<hr />
<div>
<input type="hidden" id="Fixture1.HomeTeamId" name="Fixture1.HomeTeamId" value="20">
<input type="hidden" id="Fixture1.HomeTeamName" name="Fixture1.HomeTeamName" value="">
<input type="hidden" id="Fixture1.HomeCoachName" name="Fixture1.HomeCoachName" value="">
<input type="hidden" id="Fixture1.AwayTeamId" name="Fixture1.AwayTeamId" value="">
<input type="hidden" id="Fixture1.AwayTeamName" name="Fixture1.AwayTeamName" value="">
<input type="hidden" id="Fixture1.AwayCoachName" name="Fixture1.AwayCoachName" value="">
<div class="row">
<div class="col-md-5" data-position="Fixture1.Home">
<div class="Dropable">
</div>
</div>
<div class="col-md-2">
<p>Versus</p>
</div>
<div class="col-md-5" data-position="Fixture1.Away">
<div class="Dropable">
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</div>
}
</div>
</div>
@section scripts {
<script>
$(document).ready(function () {
$(".Draggable").draggable({
revert: "invalid",
snap: ".Dropable",
stack: ".Draggable",
helper: "clone",
cursor: "move"
});
$(".Dropable").droppable({
accept: ".Draggable",
drop: handleDropEvent
});
function handleDropEvent(event, ui) {
//Set target variable to the droppable element
var target = $(this);
//Disable the droppable element (no longer a valid drop area)
target.droppable("disable");
//Add a button to remove
target.parent().append("<div class='removeTeam btn btn-danger'><span class='glyphicon glyphicon-remove-circle'></span></div>");
//Set dropped variable to the element dropped.
var dropped = $(ui.draggable);
//Take over the text value and add it to the container where dropped.
target.text(dropped.text());
//get the corresponding fixture
var positionRef = target.parent().data("position");
//set the hidden values where needed
alert("Start Value: " + $("#Fixture1.HomeTeamId").val());
$("#" + positionRef + "TeamId").val(dropped.data("teamid"));
alert("#" + positionRef + "TeamId , should be set to " + dropped.data("teamid"));
alert("End Value: " + $("#Fixture1.HomeTeamId").val());
$("#" + positionRef + "TeamName").val(dropped.data("teamname"));
$("#" + positionRef + "CoachName").val(dropped.data("coachname"));
}
});
$("div").on("click", "div.removeTeam", function () {
//Set the clicked variable to the element clicked on.
var clicked = $(this);
//Enable the 'container' above to allow elements to be dropped in again
clicked.prev().droppable("enable");
//Remove any text set
clicked.prev().text("");
//Remove the button
clicked.remove();
//get the corresponding fixture
var positionRef = clicked.parent().data("position");
//set the hidden values back to null
$("#Fixture1.HomeTeamId").val("");
$("#" + positionRef + "TeamName").val("");
$("#" + positionRef + "CoachName").val("");
});
</script>
}
I think your problem comes from your selector. You should escape the dot from your selector to be able to get the input value. (In Jquery the dot is a reserved char used to select a class)
$(function() {
var val = $("#Fixture1\\.HomeTeamId").val();
alert("Start Value: " + val);
});
https://jsfiddle.net/dg81L29k/
Further reading :