Call to pop-up from Java script in ASP page

Question

Im using the following script in the ASP page (MVC5 - index.cshtml file - view),what I need is that instead of the alert box to open pop-up window with user and password,how should I do that? in the mvc project tool box there is control but how should I create them in pop-up and call it inside the script

 <script type="text/javascript"> 
      $(document).ready(function () { 
         $("#M").change(function () { 
          if ($(this).val() == "F") { 


      $('#dv').dialog({
            width: 300, 
            height: 300,
            modal: true,
            resizable: true,
            open: function(type,data) {
              $(this).parent().appendTo("form");},
            autoOpen: true,  
            title: 'Sample'
        });
       } 
           } 
         }); 
      }); 
</script>

Add my view code

@model IEnumerable<Ad.Models.Ad>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script>


    <script type="text/javascript"> 
  $(document).ready(function () { 
     $("#M").change(function () { 
      if ($(this).val() == "F") { 


  $('#dv').dialog({
        width: 300, 
        height: 300,
        modal: true,
        resizable: true,
        open: function(type,data) {
          $(this).parent().appendTo("form");},
        autoOpen: true,  
        title: 'Sample'
    });
   } 
       } 
     }); 
  });

Hai

<h3>My APP</h3>


p>
    @using (Html.BeginForm())
    {

    }


    @*<br style="margin-bottom:240px;" />*@
    @Html.ActionLink("Create", "Create",
        null, htmlAttributes: new { @class = "mybtn" })
    <p>

    </p>


    <style type="text/css">
        a.mybtn {
            background: #fa0088;


        }
    </style>

  <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Gender)
     </th>
            <th></th>
        </tr>


   @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DropDownListFor(modelItem => item.Geneder, item.Gender, new { id = "M" })

                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                </td>

            </tr>

score 1 · Accepted Answer · answered Apr 03 '14 at 11:14

1

 $("#M").change(function () { 
          if ($(this).val() == "F") { 
              $('#dv').dialog({
                width: 300, 
                height: 300,
                modal: true,
                resizable: true,
                open: function(type,data) {
                  $(this).parent().appendTo("form");},
                autoOpen: true,  
                title: 'Sample'
            });
           } 
 });

Demo:

http://jsfiddle.net/TYHBq/2/

answered Apr 03 '14 at 11:14

RGS

5,131
6
37
65

Thanks RGS ,I have added your code as in the updated post and its not working can you please check if I miss something? – Jean Tehhe Apr 03 '14 at 11:32
@JeanTehhe, You have to add 'id' for div tag.
– RGS Apr 03 '14 at 11:35
where?since when I add it after the script nothing happen,I dont see any pop-up when changing the item on drop down – Jean Tehhe Apr 03 '14 at 11:42
@JeanTehhe, In the demo I have created one 'div' and assigned 'id' to div as 'dv'. Inside that I have added 'Hai' message. Initially it is set to display 'none' in css.When the selection value is 'F' then the dialgo box appears. – RGS Apr 03 '14 at 11:47
Sorry but Since Im new to this Im not sure that I got you ,when I add the div noting happen ... – Jean Tehhe Apr 03 '14 at 11:57
@JeanTehhe, where is your div in your code. Nothing I found here. – RGS Apr 03 '14 at 12:01
@JeanTehhe, Assign a class to div and in your css file, set display:none to that class like in demo. – RGS Apr 03 '14 at 12:10
Thanks RGS, I've generated MVC5 app where should I create the css file and how? currently I dont find any CSS file – Jean Tehhe Apr 03 '14 at 12:18
please refer the link below. http://stackoverflow.com/questions/5110028/add-css-or-js-files-to-layout-head-from-views-or-partial-views – RGS Apr 03 '14 at 12:27

score 0 · Answer 2 · answered Apr 03 '14 at 11:24

0

In mvc jquery-ui library is already included. just add the particular bundle.

@Scripts.Render("~/bundles/jqueryui")

Now you can use jquery ui dialog() as alert

<script>
    $("<div>Test messsage</div>").dialog();
</script>

answered Apr 03 '14 at 11:24

Ashwini Verma

7,477
6
36
56

I have added the second code in the script instead of the aleart and noting happen...maybe I need to do addtional steps ? I found the @Scripts.Render in the layout where is the Jquery libarary? – Jean Tehhe Apr 03 '14 at 11:44

Call to pop-up from Java script in ASP page

2 Answers2