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>

RGS · Accepted Answer · 2014-04-03 11:14:58Z

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 3, 2014 at 11:14

RGS

5,2217 gold badges44 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jean Tehhe Over a year ago

Thanks RGS ,I have added your code as in the updated post and its not working can you please check if I miss something?

RGS Over a year ago

@JeanTehhe, You have to add 'id' for div tag. <div id="dv"/>

Jean Tehhe Over a year ago

where?since when I add it after the script nothing happen,I dont see any pop-up when changing the item on drop down

RGS Over a year ago

@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.

Jean Tehhe Over a year ago

Sorry but Since Im new to this Im not sure that I got you ,when I add the div noting happen ...

|

Ashwini Verma · Accepted Answer · 2014-04-03 11:24:41Z

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 3, 2014 at 11:24

Ashwini Verma

7,5257 gold badges39 silver badges56 bronze badges

1 Comment

Jean Tehhe Over a year ago

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?

Collectives™ on Stack Overflow

Call to pop-up from Java script in ASP page

2 Answers 2

9 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related