Discussion :

[thor76160]

Bonjour.

Voilà j'ai un petit problème.
Je charge une page dans un formulaire modal de jqueryui. Cette page contient un plugin jquery Token-Input, qui sert à utiliser des tags.
Seulement ce plugin ne fonctionne pas, car ma page a été chargée en ajax.

Y a t'il une astuce dans ce genre de situation ?

code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
@model LivDevis.Models.ProductModel
 
@using LivDevis.Helpers
@using LivDevis.Models
 
@{
    List<UnitOfMeasurementModel> Units = ViewBag.Units;
    UnitOfMeasurementModel SelectedUnit = Units.Where(u => u.UnitOfMeasurement_IsDefault == true).FirstOrDefault();
}
 
@Styles.Render("~/Content/tokeninput", "~/Content/_Authentificated/Product/Create")
@Scripts.Render("~/bundles/jqueryval", "~/bundles/tokeninput", "~/bundles/_Authentificated/Product/Create", "~/bundles/_Common/Form")
 
<section id="info_popup">
    @using (Html.BeginForm("CreateProduct", "Product", FormMethod.Post, new { autocomplete = "off", @id = "CreateProduct" }))
    {
        @Html.ValidationSummary(true)
 
        <fieldset>
            <legend>@LivDevis.Resources.Views.Product.CreateProduct.AboutProduct</legend>
 
            <article>
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Product_Reference, new { PlaceHolder = LivDevis.Resources.Models.ProductModel.DisplayReference })
                    @Html.ValidationMessageFor(model => model.Product_Reference)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Product_Name, new { PlaceHolder = LivDevis.Resources.Models.ProductModel.DisplayName })
                    @Html.ValidationMessageFor(model => model.Product_Name)
                </div>
 
                <div class="editor-label">
                    @Html.LabelFor(model => model.Product_Description)
                </div>
                <div class="editor-field">
                    @Html.Partial("DevExpress.CreateProduct.Product_DescriptionPartial", Model)
 
                    <span class="field-validation-state"><b id="Product_Description_contentLength"></b> caractère(s) restant(s)</span>
                    @Html.HiddenFor(model => model.Product_Description)
                    @Html.ValidationMessageFor(model => model.Product_Description)
                </div>
 
                @*<div class="editor-field">
                    @Html.Action("CategoryProductSimpleList_Partial", "CategoryProduct")
                    @Html.HiddenFor(model => model.Product_CategoryProductID)
                    @Html.ValidationMessageFor(model => model.Product_CategoryProductID)
                </div>*@
            </article>
 
            <article>
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Product_DefaultQuantity, new { PlaceHolder = LivDevis.Resources.Models.ProductModel.DisplayDefaultQuantity })
                    @Html.ValidationMessageFor(model => model.Product_DefaultQuantity)
                </div>
 
                <div class="editor-label">
                    @Html.LabelFor(model => model.Product_Unit)
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.Product_UnitID, new SelectList(Units, "UnitOfMeasurement_UnitID", "UnitOfMeasurement_Name", SelectedUnit.UnitOfMeasurement_UnitID))
                    @Html.ValidationMessageFor(model => model.Product_UnitID)
                </div>
 
                <div class="editor-field">
                    @Html.TextBox("Product_Tag", null, new { @id = "Product_Tag" })
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Product_Price, new { PlaceHolder = LivDevis.Resources.Models.ProductModel.DisplayPrice })
                    @Html.ValidationMessageFor(model => model.Product_Price)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Product_Tax, new { PlaceHolder = LivDevis.Resources.Models.ProductModel.DisplayTax })
                    @Html.ValidationMessageFor(model => model.Product_Tax)
                </div>
            </article>
        </fieldset>
    }
</section>

voici ma fonction permettant le chargement d'une popup :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function DisplayPopup(Title, Url, Width, Height, DisplayDoAgain, OnSubmit_Callback) {
 
    var ModalDialog = $("div#dialog-form");
 
    ModalDialog.dialog({
        title: Title,
        width: Width,
        height: Height,
        modal: true,
        show: 'fade',
        hide: 'fade',
        buttons: {
            "Valider": function () {
                var IsValid = OnSubmit_Callback();
 
                if (IsValid) {
                    ModalDialog.dialog("close");
                }
            },
            "Valider et recommencer": function () {
                alert("fonction non implémentée");
                //OnSubmit_Callback();
            },
            "Annuler": function () {
                $(this).dialog("close");
            }
        },
        open: function (event, ui) {
            var ValidAndRestartButton = $("button.ui-button").eq(1);
            if (!DisplayDoAgain) {
                ValidAndRestartButton.hide();
            }
        },
        close: function () {
            var allFields = ModalDialog.find(".ui-buttonset, input[type=file], input[type=hidden], input[type=password], input[type=text], textarea, select");
            allFields.val("").removeClass("ui-state-error");
        }
    })
    .html("<div class=\"loading\"></div>")
    .dialog("open")
    .load(Url);
 
}

voici une extrait de mon code js (à l'endroit où j'utilise mon plugin) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(function () {
 
    $(document).ready(function () {
 
        $("input[type=text]#Product_Tag").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
            theme: "facebook"
        });
 
    });
 
});

J'espère que vous pourrez m'aider svp !

[thor76160]

Il semblerait que ce soit un problème connu de conflit entre tokeninput et UI Dialog !
Mais je ne trouve pas de solution...
Connaissez-vous ce plugin ?