Iterate over Dictionary with java-script selector

I have a Dictionary in my view, there are [inputID, tooltip].

Also i have a set of id's of my input elements in this page. I need to iterate through the dictionary with my elements ids:

 @{
 Dictionary<string, string> questionMarks = 
     ViewBag.QuestionMarks as Dictionary<string, string>;
 @}

 <script type="java-script">
 $(document).ready(function () {
    var inputs = $('input,select[type!="hidden"]');
    $.each(inputs, function(i, val) {
    if ($(val).attr('id')) { 
                var id = $(val).attr('id');

                var iter_string = '@questionMarks' + "[" + id + "]";
                alert(iter_string);              // [1]
                alert('@questionMarks["cvc"]');  // here i got tooltip
             }
    });
</script>

[1] i have System.Collection.Generic.Dictionary`2[System.String, System.String][cvc]

Thanks to Jan Jongboom, Finally i got that i wanted:

@using System.Web.Script.Serialization
@{
    Dictionary<string, string> questionMarks = ViewBag.QuestionMarks as Dictionary<string, string>;
    JavaScriptSerializer jss = new JavaScriptSerializer();
@}
<script type="text/javascript">
    var questionMarks = @Html.Raw(jss.Serialize((Dictionary<string, string>)ViewBag.QuestionMarks));     
    $(document).ready(function () {
        for ( keyVar in questionMarks ) {
            $('#' + keyVar).attr('original-title', questionMarks[keyVar]);
            $('#' + keyVar).tipsy({ gravity: 'w' });
        }
    });
</script>

Answers


Do something like

<script>
var questionMarks = @new JavaScriptSerializer().Serialize((Dictionary<string, string>)ViewBag.QuestionMarks) ;
</script>

Now you have a javascript variable called questionMarks that you can iterate over.


No, you can't iterate from the client side code through server variable. You can generate initialization code from JS variable (like JSON) or generate necessary html on the server side. Also you can requests for such data on from jsavascript via ajax request.


Attatching data attributes to the inputs as they are drawn should help you with this one.

Example: http://jsfiddle.net/Krch9/

$(document).ready(function(e) {
    var inputs = $("input", "#container");
    $.each(inputs, function(i, val) {
        var ToolTipText = $(this).data('tooltiptext');
        /// Run your tooltip plugin here ...
        $("#output").html($("#output").html() + "<br>" + $(this).attr('id') + " : " + ToolTipText);
    });
});

Using MVC helpers you can easily add them:

@Html.TextBoxFor(x => x.Field, new { data_tooltiptext = "Blah blah"});

The markup would end up looking something like this:

<input type="text" id="Field" data-tooltiptext="Blah blah">

Edit: Extra help

I.E Loop through your elements

foreach( var question in questionMarks) {
   @Html.TextBox(question.Key, new { data_tooltiptext = question.Value} );
}

Then use the javascript example (Youll need to modify it to your needs ...) to run the plugin on the elements


Need Your Help

Yii2: Registering Asset Bundle vs registering external Js file

javascript php jquery yii2

Hi I wanted to know the advantage of registering Asset Bundle following the process described in the docs like

Stratification on the propensity score: How can I calculate the variance ratio?

r

I performed a stratification on the propensity score via the MatchIt package:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.