How to change the title of a jquery dialog

Here is an image that a user can click to get help

   <img src="/Content/images/Help.png" style="cursor:pointer" onclick="javascript:ShowHelp('My Title')" />

Here is the jquery dialog

   <div id="dialog-help" title="" style="background:white">
      <div id="divHelpContents"></div>
   </div>

Javascript function to set up the dialog

      $(document).ready(function ()
      {
         //Help popup
         $("#dialog-help").dialog({ autoOpen: false
            , modal: true
            , width: 415
            , height: 300
            , show: "blind" //animation effect
            , hide: "clip" //animation effect            
            , draggable: true
            , resizable: false
            , buttons: {
               Ok: function ()
               {
                  $(this).dialog("close");
               }
            }
         });
      });
Here is a function that will update the title, help contents, and open the dialog
      function ShowHelp(topic)
      {
            $("#dialog-help").dialog('option', 'title', topic);
            $("#divHelpContents").html("Show some help contents here");
            $("#dialog-help").dialog("open");
      }

How to detect if an element is hidden in jQuery

This will work when myID was hidden using .hide( ) and displayed using .show( )

if($("#myID").is(":visible"))
   $("#myID").hide();
else
   $("#myID").show();

How to find the value of a dropdown in a user control using jQuery

you may have an asp:Dropdown control with an id="ddViewBy" like below.

<asp:DropDownList class="ddList" runat="server" ID="ddViewBy" AutoPostBack="true" OnSelectedIndexChanged="ddViewBy_Changed"><asp:DropDownList>

If your dropdownlist is in a user control and the usercontrol is in a content place holder, then when you view source, on the web page the id of the control would change to something like this:

id="ctl00_phContent_ucSearchFilter_ddViewBy"

To find the value of the dropdown using jQuery, use the following selector

$('select[id$=ddViewBy]').val();

This is reliable, because your user control could be in different place holders which would cause the first part of the id to be different. The controls id will always end with your original name.

The $= means "ends with"

Just an FYI, ^= means "begins with"

How to create a modal dialog in jQuery and prevent scrolling in background

$(document).ready(function() {

$("#dialog").dialog({ autoOpen: false

, modal: true

, buttons:

{

"Cancel": function() {

$(this).dialog("close");

$("body").css("overflow", "auto"); }

, "Save": function() {

$(this).dialog("close");

$("body").css("overflow", "auto"); }

}

});

});

function RenameFile(filename, id) {

$("#OldFilename").html("From: " + filename);

$("#NewFilename").val(filename);

$("#dialog").dialog("open");

$("body").css("overflow", "hidden");

}

<div id="dialog" title="Change Filename">

<p id="OldFilename"><b>From: </b>oldfilename.doc</p>

<p><b>To: </b>

<input id="NewFilename" type="text" style="width:200px" /></p>

</div>

<a style="cursor:hand;text-decoration:underline;color:Blue" onclick="javascript:RenameFile('<%= Html.Encode(doc.FileName) %>',<%= doc.PathID %>)">rename</a>

How to use a hidden input in MVC

While working on an e-commerce site, I needed to update my order total and submit it with the other form variables. My order total displayed to the user was just text, which doesn't get passed to the controller when submitted, so I needed a hidden input that I could update.

My html looks like this:

<p class="display_currency"><span id="totalprice">$0.00</span></p><%= Html.HiddenFor(m=>m.TotalOrder) %>

and my javascript. (snippet is from an UpdateTotal() function)

var total = 500.25

$("#totalprice").html("$" + total.toFixed(2));

$("#TotalOrder").val(total.toFixed(2)); //hidden control for model

when submitting the form, the model contains the correct value for TotalOrder

How to select a radio button in JQuery

To set a radio button value using JQuery, you need to set the the checked attribute. The name attribute will let you group the radio buttons and the id attribute will help you find the radio button using jQuery

function SetRadioButtonValueToThree()
{
$( "#radiobtn_3" ).attr( "checked" , "checked" );
}

<input type= "radio" name= "myradioGroup" id= "radiobtn_1" value= "1" checked= "checked" />One<br/>
<input type= "radio" name= "myradioGroup" id= "radiobtn_2" value= "2" />Two<br/>
<input type= "radio" name= "myradioGroup" id= "radiobtn_3" value= "3" />Three<br/>