Question

… but if the value is originally empty like “” the value can not be changed using the same key !

function loadDialog(link, e, ajaxRequest) {

    e.preventDefault();
    var $title = link.innerHTML;
    var $contenturl = $(link).attr('href');
    var $dialog = $('<div id="MyDialog"></div>');

    // Read value from hidden input field
    var templateIdValue = $('input[name=TemplateId]').val();     

    // Change the value: This will always and only happen the 2nd time I come here,
    // the first time the templateIdValue will always be empty
    if (templateIdValue != '') {
        templateIdValue = 777;
    }

    $dialog.load($contenturl).data('templateIdKey', templateIdValue).dialog({
        title: $title,
        autoOpen: true,
        modal: true,               
        buttons: {
            "OK": function () {debugger;
                ajaxRequest($(this), $('form', this));
            },
            "Cancel": function () {
                $dialog.dialog("close");
            }
        }
    });
}

When the 2nd time the templateIdValue is changed to 777

I come to this code:

Here I retrieve again the value and it should be 777. But its NOT. its empty !

@model ITMS.Web.Models.UnitViewModel

@*Remote Validation*@
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {
        var templateId = $('#MyDialog').data('templateIdKey');
        $('input[name=TemplateId]').val(templateId);      
    }); 

</script>

@using (Html.BeginForm("Create", "Unit"))
{ 
     @Html.ValidationSummary(false)
    <p class="editor-label">@Html.LabelFor(model => model.Name)</p>
    <p class="editor-field">@Html.EditorFor(model => model.Name)</p>
    <p class="editor-field">@Html.ValidationMessageFor(model => model.Name)</p> 

    @Html.HiddenFor(x => x.TemplateId)    
}

How can I change the value of the key I passed the first time with the .data() method?

UPDATE

  // Does not cache the ajax requests to the controller e.g. IE7/8/9 is doing that...
    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $('#OpenTemplate').click(function (event) { loadDialog(this, event, openTemplate); });
        $('#CreateTemplate').click(function (event) { loadDialog(this, event, createTemplate); });
        $('#DeleteTemplate').click(function (event) { loadDialog(this, event, deleteTemplate); });

        $('#CreateUnit').click(function (event) { loadDialog(this, event, createUnit); });
        $('#DeleteUnit').click(function (event) { deleteUnit(); });

        $('#CreateTeststep').click(function (event) { loadDialog(this, event, createTeststep); });
        $('#DeleteTeststep').click(function (event) { deleteTeststep(); });

        $('#SaveTemplate').click(function (event) { saveTemplate(); });    
    });

Answer 1

I found your question rather confusing even after the update, so I still don’t really understand what you’re trying to do, but there seems to be two big problems with the way you’re using .data().

The first problem is that you retrieve the value in a document ready handler:

$(document).ready(function () {
    var templateId = $('#MyDialog').data('templateIdKey');

…but the value isn’t stored until the loadDialog() function is called in response to a click so naturally there could be no data against that key at that time since no clicks have been processed yet.

Secondly, you call the same loadDialog() function each time any of several elements is clicked, but each time loadDialog() is called it creates a new "MyDialog" div and then uses .data() to associate a key and value with that new div:

var $dialog = $('<div id="MyDialog"></div>');
// other code, then
$dialog.load($contenturl).data('templateIdKey', templateIdValue)

Again, your question isn’t clear but you seem to be saying that you expect this to update the value stored for the previously created "MyDialog" div but .data() associated values with individual elements. Why do you recreate the dialog div every time?