Monthly Archives: November 2014

Display throber while posting back

Hi,

I have a gridview with a Select linkbutton, when  user Select a row I display a throber div with a GIF image while posting back to server,

my problem is the GIF is not animated when browsing with IE, it works fine if I browse the page with Chrome.

How can I animate the GIF when browsing with IE ?

This is an ie quirk where the navigation stops the gif animating.  The solution is that rather than showing the gif on the click, to use setTimeout and show the gif after 100ms or so.

http://stackoverflow.com/questions/5829382/animated-gif-while-loading-page-does-not-animate

[RESOLVED]Calling an Action from within a jQuery function

Hi there!

I’m using VS 2013 Express with Bootstrap 3.1.0,
jQuery 2.0.3.

I have this simple Action in my controller that shall simply render a view to edit a profile

public ActionResult EditProfile(int id)
{
   return View(db.Profiles.Find(id));
}

In my listing view I have this html:

@model IEnumerable<AccessControl.Models.Entities.Profile>

@{
    ViewBag.Title = "Profiles";
}


<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>Profiles</h2>
        </div>
        <div class="col-md-4 col-md-offset-4" style="text-align: right;">
            @Html.ActionLink("New Profile", "CreateProfile", null, new { @class = "btn btn-primary btn-lg" })
        </div>
    </div>
</div>

<table id="tblDados" class="table table-bordered">
    <tr class="tablehead">
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr id="row-@item.Id">
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td style="text-align: right;">
            <button type="button" class="EditProfile btn btn-default btn-xs" data-id="@item.Id"><span class="glyphicon glyphicon-pencil" title="Edits the profile"></span></button>
            <button type="button" class="RemoveProfile btn btn-default btn-xs" data-id="@item.Id" data-nome="@item.Name"><span class="glyphicon glyphicon-trash" title="Deletes the profile"></span></button>
        </td>
    </tr>
}

</table>

<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/mysscripts.js"></script>

The button element with class RemoveProfile is working fine. It executes its function that calls a POST action in the same controller and has its jobs done.

I’m having some issues with the button element with class EditProfile. The function that handles its function is in the myscripts.js file and looks like this:

$(".EditProfile").click(function () {
    var recordToEdit = $(this).attr("data-id");
    var url = "/Admin/EditProfile/" + "id=" + recordToEdit;
    $.get(url, function () { });
});

I don’t succeed with this approach.

So, this is my question: what should be written in that function when the Edit button is clicked to call that Action and finally open the proper view to edit the record?

Thanks for your time.

Paulo Ricardo Ferreira

Hi

Try the below:

var url = "/Admin/EditProfile/" + recordToEdit;

Try

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult EditProfile(int id)

js

$(".EditProfile").click(function () {
    var recordToEdit = $(this).data("id");
    var url = "/Admin/EditProfile/?" + "id=" + recordToEdit;
    $.get(url, function () { });
});

Hi, chandrashekar!

My mistake. I forgot to mention that I’ve already tried this also.

Thanks for your time.

Best regards.

Paulo Ricardo Ferreira

Hi, AidyF!

I’ve just tried your suggestion and it didn’t work totally.

I toggled a breakpoint in the line of the Action and I could notice that the parameter is ok. Therefore, the js is working ok. The record is also being retrieved properly.

But the view the action should open is not being rendered!

It’s been written by scaffolding the model and looks like:

@model AccessControl.Models.Entities.Profile

@{
    ViewBag.Title = "Profile Edition";
}

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="container">
        <div class="form-horizontal">
            <h2>Profile Edit</h2>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.Id)

            <div class="form-group">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
        </div>

    </div>
}

<div>
    @Html.ActionLink("Back to list", "Index")
</div>

<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

So, what do you think is wrong with this markup?

Thanks for your time.

Best regards.

Paulo Ricardo Ferreira

Not sure if you’ve cut your javascript for brevity but "get" won’t do anything on its own, you have to code it to inject the html where you want it

http://api.jquery.com/jquery.get/

also return PartialView from your action rather than View.

Hi, AidyF!

No, I didn’t cut my javascript for brevity. 

What do you mean with "inject the html where you want it"?

And why use PartialView instead of View?

I’ll read the content of the link you sent.

Thanks for your time.

Best regards.

Paulo Ricardo Ferreira

If you want the html downloaded from your action to appear somewhere, you have to update the current page to show it

$.get(url, function () {
// in here you need to write code to put the html somewhere in the page
// as you're doing nothing in this function, the html is simply discarded as you're
// not doing anything with it
 });

You should return a partial view as you probably only want the html from the view and not the whole layout.  Not sure though as I’m not really clear exactly what it is you’re trying to achieve.

Hi, AidyF.

I’ll try to explain you more clearly what I’m trying to achieve:

I have this view (Index.cshtml) that shows a list of records from the database. At each row of this list there are three columns: the two first with data and  the 3rd one with two buttons – 1 that deletes this record from the database, and consequently,
from the list itself and 1 to call a view to edit the data from the respective record.

The button that deletes is working fine.

The issue is with the button that should, somehow, render the editing view.

That’s the whole picture what I’m trying to achieve.

I thought that if I just could be able to call the Action method at the controller class,  the action would just do what it was supposed to (in this case, render a view). 

I’ve made a tiny modification in my Action method to verify what happens. I wrote this:

public ActionResult EditarPerfil(int id)
{
    var perfil = db.Perfis.Find(id);
    return View(perfil);
}

Then I toggled a breakpoint at the first line of the method. The id
parameter just came from that js code. It queries the database and retrieves the record properly. Then, I supposed, it would simply render the view. But it doesn’t happen this way.

Maybe the buttons elements are not the most suitable elements to achieve that. Maybe I could use a couple of ActionLinks at the list and things would just run more smoothly.

This is my very first application written using MVC. I have much experience with WebForms.

Thanks, again, for your time.

Best regards.

Paulo Ricardo Ferreira.

Hi Paulo Ricardo,

Thanks for your post.

AidyF

If you want the html downloaded from your action to appear somewhere, you have to update the current page to show it

$.get(url, function () {
// in here you need to write code to put the html somewhere in the page
// as you're doing nothing in this function, the html is simply discarded as you're
// not doing anything with it
 });

You should return a partial view as you probably only want the html from the view and not the whole layout.  Not sure though as I’m not really clear exactly what it is you’re trying to achieve.

As AidyF said, you could attach the result in somewhere. Here is a similar issue, you could refer to it.

Best Regards,

Fei Han

Hi Fei Han,

I don’t have a result to attach anywhere. All I want is open a scaffolded view from this action:

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult EditProfile(int id)
{
    var profile = db.Profile.Find(id);
    return View(profile);
}

The parameter id is ok. I can retrieve the profile object.

But it never open the expected view!

I thought it would be a simple issue.

Thanks for your time.

Paulo Ricardo Ferreira

Hi, Paulo

Suppose you want to render edit form in div with id="dvEditContainer" code as:

$(".EditProfile").click(function () {
    var recordToEdit = $(this).attr("data-id");
    var url = "/Admin/EditProfile/" + "id=" + recordToEdit;
    $.get(url, function (data) {
$("#dvEditContainer").html(data);
 });
});

Hi mr.rahulmaurya,

I understand that your suggestion will fill a div in the same view that has the list, but what I want is to open
another view to edit the record. So, your suggestion doesn’t fit in my case.

Thanks for your time.

Paulo Ricardo Ferreira

Hi,

Finally I got what I wanted from the start.

The code for the jQuery function now is like this:

$(".EditProfile").click(function () {
    var recordToEdit = $(this).data("id");
    var url = "/Admin/EditProfile/?id=" + recordToEdit;
    window.location.href = url;
});

And the action code is:

public ActionResult EditProfile(int id)
{
    var profile = db.Profiles.Find(id);
    return View(profile);
}

Just this. Simple.

I want to thank every those who have contributed to me so I could achieve what I finally accomplished.

Paulo Ricardo Ferreira

jquery ui cdn miss file

the  lastest jquery ui version on aspnet cdn is miss?

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.2/themes/cupertino/jquery-ui.css

taicomjp

the  lastest jquery ui version on aspnet cdn is miss?

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.2/themes/cupertino/jquery-ui.css

As an alternative You can use the css file from Jquery online CDN available.

https://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css

EDIT: Corrected the URL

Yup, it appears that none of the 1.12.1 themes are working.

Hi,

Here I found by googling http://cdnjs.com/libraries/jqueryui

Have fun

I know there are some othe cdn

but it needs to report the issue

http://www.asp.net/ajax/cdn/jquery-ui/cdnjqueryui1112

as you see

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.2/jquery-ui.js it exist

but .css not

Copy Gridview1 column value to another Gridview2

I have 2 Gridviews. Gridview1 & Gridview2 have 10 columns.

Gridview2 has always 1 row while Gridview1 has more than one.

There are textboxes in the Gridview ItemTemplates.

When I write a value in   a cell, say Gridview1.row2.column3, then this value should copied to Gridview2.row1.column3.

Pseudo code:

 

Gridview2.row1.column(j) = Gridview1.row(i).column(j)

 

I need to do this in javascript.

This looks to be fairly uncommon. Could you elaborate why do you want to copy paste the content on-the-fly? Probably the UI can be re-designed such that, it will be more flexible rather than copy-pasting the input controls, which would create more confusion
to the users.

Also, note, GridView is a server-side control and will generate it’s column Ids dynamically and will produce the html tags with it’s in-built logic – so grabbing the control Ids from javascript would be quite complex too as there is no inbuilt functions
to do it so I believe, and would need to write your own to accomplish this task.

And if you want to copy paste the content for each key press on a input control, that would still become running more client side javascript functions.

So would recommend to share few more details and to aim towards redesigning the UI, for better user experience and for better performance.

Hi mnmhemaj,

Thanks for your post.

mnmhemaj

When I write a value in   a cell, say Gridview1.row2.column3, then this value should copied to Gridview2.row1.column3.

If you’d like to automatically add user input text in textbox from Gridview1 to Gridview2, you could try the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#GridView1").find(":text").each(function () {
                $(this).change(function () {
                    var mes = $(this).val();
                    //alert(mes);

                    $("#GridView2").find(":text").val(mes);
                })
            });

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="col1" HeaderText="col1" SortExpression="col1" />
                    <asp:BoundField DataField="col2" HeaderText="col2" SortExpression="col2" />
                    <asp:BoundField DataField="col3" HeaderText="col3" SortExpression="col3" />
                    <asp:TemplateField HeaderText="UserInfo">
                        <ItemTemplate>
                            <asp:TextBox ID="txtinfo" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

            <br />
            <br />
            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="col1" HeaderText="col1" SortExpression="col1" />
                    <asp:BoundField DataField="col2" HeaderText="col2" SortExpression="col2" />
                    <asp:BoundField DataField="col3" HeaderText="col3" SortExpression="col3" />
                    <asp:TemplateField HeaderText="UserInfo">
                        <ItemTemplate>
                            <asp:TextBox ID="txtinfo" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            
        </div>
    </form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("col1");
        dt.Columns.Add("col2");
        dt.Columns.Add("col3");
        dt.Rows.Add("1", "Sam", "USA");
        GridView2.DataSource = dt;
        GridView2.DataBind();

        dt.Rows.Add("2", "Allen", "UK");
        dt.Rows.Add("3", "Tonny", "Fr");

        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
} 

If you have any question about my reply, please let me know freely.

Best Regards,

Fei Han

 I do not know how to iterate through a gridview rows and copying the values from one gv to another using javascript.

Actually I need to do the following:

 

In the Gridview1 at the bottom of every column, I need to show different images. So I have added Gridview2 at the bottom of the Gridview1 with single row.

When the sum of the entered values in a column is under 50, I need to show an image, say img1. When it exceeds 50, I have to show img2.

Hi mnmhemaj,

mnmhemaj

When the sum of the entered values in a column is under 50, I need to show an image, say img1. When it exceeds 50, I have to show img2.

You could refer to the following sample code.

<script>
    $(function () {
        $("#Image1").hide();
        $("#Image2").hide();
        $("#GridView1").find(":text").each(function () {
            $(this).change(function () {
                var total = 0;
                $("#GridView1").find(":text").each(function () {
                    var val = $(this).val();
                    if (val != "") {
                        total = total + parseFloat(val);
                    }

                })
                //alert(total);
                if (total < 50) {
                    $("#Image2").hide();
                    $("#Image1").show();
                } else {
                    $("#Image1").hide();
                    $("#Image2").show();
                }
            })
        });

    })
</script> 
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/1.png" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/2.png" />

Best Regards,

Fei Han

read through XML

I’m running into some issues when I’m trying to read through my XML, am I missing something or is there a different way I should be using?

XML File:

<list name="data">
 <DataRow name="10/01/1994-10/01/1995">
   <list name="Attr"/>
   <list name="measures"/>
   <list name="SubRows">
     <DataRow name="http://internalweb">
      <list name="measures">
        <string name="Title">Welcome</string>
        <string name="UlrLink">http://welcome.aspx</string>
      </list>
     </DataRow>
   </list>
</DataRow>  
</list>

I need to get the [Title] and [UrlLink] values out

I;m using something like this http://webtutsdepot.com/2009/12/16/how-to-read-xml-with-javascript/ and I’m unable to get anything out of the XML. 

NOTE; i’m not using an actual file, I’m using a webtrends API that is returning XML

The actual xml makes a huge difference if it is using namespaces etc as the code is different

http://stackoverflow.com/questions/1083565/parsing-xml-namespaces

I’m doing this on the client side via JQuery

There’s no real need to use jQuery, but if you insist you can still read namespaced xml

http://stackoverflow.com/questions/853740/jquery-xml-parsing-with-namespaces

csharpcoder

I’m doing this on the client side via JQuery

You can use the below code to read the xml values using Jquery

function GetValue() {
            $(function () {
                var xml = "<list name='data'> <DataRow name='10/01/1994-10/01/1995'>   <list name='Attr'/>   <list name='measures'/>   <list name='SubRows'>    <DataRow name='http://internalweb'>      <list name='measures'>        <string name='Title'>Welcome</string>        <string name='UlrLink'>http://welcome.aspx</string>      </list>     </DataRow>   </list></DataRow></list>";
                //Parse the givn XML
                var xmlDoc = $.parseXML(xml);
                var $xml = $(xmlDoc);
                // Find List Tag
                var $list = $xml.find("list[name='measures']");
                $list.each(function () {
                    var Title = $(this).find("string[name='Title']").text(),
                    URLLink = $(this).find("string[name='UlrLink']").text();
                    alert("Title: " + Title + " URLLink: " + URLLink);
                });
            });
        }

Sample Working Demo

Hi csharpcoder,

Thanks for your post.

As for your problem, you could refer to the following code to get the [Title] and [UrlLink] values.

books.xml:

<?xml version="1.0" encoding="utf-8" ?>
<list name="data">
  <DataRow name="10/01/1994-10/01/1995">
    <list name="Attr"/>
    <list name="measures"/>
    <list name="SubRows">
      <DataRow name="http://internalweb">
        <list name="measures">
          <string name="Title">Welcome</string>
          <string name="UlrLink">http://welcome.aspx</string>
        </list>
      </DataRow>
    </list>
  </DataRow>
</list>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#btnread").click(function () {

                $.ajax({
                    url: 'books.xml',
                    dataType: "xml",
                    success: function (data) {
                        //alert(data.getElementsByTagName('string')[0].firstChild.nodeValue);
                        var title = data.getElementsByTagName('string')[0].firstChild.nodeValue;
                        var UlrLink = data.getElementsByTagName('string')[1].firstChild.nodeValue;
                        $("#title").text(title);
                        $("#UlrLink").text(UlrLink);
                    },
                    error: function () { alert("Error: Something went wrong"); }
                });
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Title:<span id="title"></span>
            <br />
            UlrLink:<span id="UlrLink"></span>
            <br />
            <input id="btnread" type="button" value="Read" />
        </div>
    </form>
</body>
</html> 

Hope it will be helpful to you.

Best Regards,

Fei Han

A2H

csharpcoder

I’m doing this on the client side via JQuery

You can use the below code to read the xml values using Jquery

function GetValue() {
            $(function () {
                var xml = "<list name='data'> <DataRow name='10/01/1994-10/01/1995'>   <list name='Attr'/>   <list name='measures'/>   <list name='SubRows'>    <DataRow name='http://internalweb'>      <list name='measures'>        <string name='Title'>Welcome</string>        <string name='UlrLink'>http://welcome.aspx</string>      </list>     </DataRow>   </list></DataRow></list>";
                //Parse the givn XML
                var xmlDoc = $.parseXML(xml);
                var $xml = $(xmlDoc);
                // Find List Tag
                var $list = $xml.find("list[name='measures']");
                $list.each(function () {
                    var Title = $(this).find("string[name='Title']").text(),
                    URLLink = $(this).find("string[name='UlrLink']").text();
                    alert("Title: " + Title + " URLLink: " + URLLink);
                });
            });
        }

Sample Working Demo

when I try this I get [invalid xml], I’m looking for any differences between my XML and what you have, but it looks identical

csharpcoder

when I try this I get [invalid xml], I’m looking for any differences between my XML and what you have, but it looks identical

Ensure that your XML if valid format. Like it has all the starting nodes and ending nodes. parseXML wont parse the xml file if its in invalid format. You also need to replace all doublequotes in your xml with single quotes.

I’m unable to tweak or customize the XML due to it’s being returned from the API

Fei Han – MSFT

Hi csharpcoder,

Thanks for your post.

As for your problem, you could refer to the following code to get the [Title] and [UrlLink] values.

books.xml:

<?xml version="1.0" encoding="utf-8" ?>
<list name="data">
  <DataRow name="10/01/1994-10/01/1995">
    <list name="Attr"/>
    <list name="measures"/>
    <list name="SubRows">
      <DataRow name="http://internalweb">
        <list name="measures">
          <string name="Title">Welcome</string>
          <string name="UlrLink">http://welcome.aspx</string>
        </list>
      </DataRow>
    </list>
  </DataRow>
</list>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#btnread").click(function () {

                $.ajax({
                    url: 'books.xml',
                    dataType: "xml",
                    success: function (data) {
                        //alert(data.getElementsByTagName('string')[0].firstChild.nodeValue);
                        var title = data.getElementsByTagName('string')[0].firstChild.nodeValue;
                        var UlrLink = data.getElementsByTagName('string')[1].firstChild.nodeValue;
                        $("#title").text(title);
                        $("#UlrLink").text(UlrLink);
                    },
                    error: function () { alert("Error: Something went wrong"); }
                });
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Title:<span id="title"></span>
            <br />
            UlrLink:<span id="UlrLink"></span>
            <br />
            <input id="btnread" type="button" value="Read" />
        </div>
    </form>
</body>
</html> 

Hope it will be helpful to you.

Best Regards,

Fei Han

Fei, When I run this, it’s not returning me the value of the tag, however, its returning a HASH value such as [omKzeASk057], what is causing that to be returned and not the actual value?

Make sure it returns correct result, e.g. add alert

success: function (data) {
alert(data);

smirnov

Make sure it returns correct result, e.g. add alert

success: function (data) {
alert(data);

If I use

tmp = response.responseText; 

I can see the data coming back, how can I write the data for the tags that I need?

also, the hash code coming back is the first value of the xml coming back ,

well, if you use 0 in 

data.getElementsByTagName(‘string’)[0].firstChild.nodeValue;

then you get the very first element. 

I think you got very good examples above, what is the issue? 

if you use jquery you could also try

success: function(data) {
    //xmlDoc = $.parseXML( data);
    $xml = $( data);
    $userName = $xml.find('USERNAME');  
    var uName = $userName.text();
}

I got it working, however, its pulling the data back in one large string, even in my each(function(), its just one string so I  can’t show the items on separate lines

What is your code and what is your xml.

How to execute two jquery animate function in parallel

i know that we can two jquery animate function in parallel like this way

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });
    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

but my situation is bit different. i have one button and one div whose opacity is set to zero. so div is invisible. i want when a user will click a button then a div will be create dynamically and placed at center. center div size will increase gradually.

so when dynamic div will be placed at center then i need to append my invisible div inside the dynamic div. now i want to increase dynamic div size with animate function and as well as i want to set opacity 1 to invisible child div. so i want these two animation
should run parallel.

because when dynamic div resizing will be completed then child div’s opacity will also reach at 1. guide me with a small sample how to achieve it.

here is my js fiddle link

http://jsfiddle.net/tridip/3jrt48s4/

which anyone can see and understand how i want to animate two div in parallel and those two div’s name as follows "UPSContainer", "UPS_rate_time" thanks

Hi mou_inn,

Thanks for your post.                                                                                                  

As for your problem, if you’d like to make two jquery animate functions complete at the same time, you could try to use setTimeout() Method  to delay increasing size of “UPSContainer” div. Besides, don’t create “UPSContainer” div,  you could just place “UPS_rate_time”
div at center and set opacity 1 to it, after animate function is executed, you could set border to “UPS_rate_time” div.

border: thin solid black;

Hope it will be helpful to you.

Best Regards,

Fei Han

Displaying message while postback

Hi,

How can I display a message to the user while data control (e.g. Grigview, Formview) is populating from server ?

Thanks,

You’ll need to populate your gridview using ajax, updatepanel etc so the work can happen after the actual page has loaded, this lets you show a message until the ajax work has finished.  Or you can show a "please wait" page that redirects to your actual
page so the browser shows the waiting page until the actual page has returned from the server.

Hi shtrudel,

Thanks for your post.

The UpdateProgress control could provide status information about partial-page updates in UpdatePanel controls, and you can customize the default content and the layout of the UpdateProgress control. So you could use UpdateProgress control  to show that
an asynchronus method is working.

For more information about UpdateProgress Control, you could refer to the following link.

Besides, you could refer to this sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #UpdatePanel1, #UpdateProgress1 {
            border-right: gray 1px solid;
            border-top: gray 1px solid;
            border-left: gray 1px solid;
            border-bottom: gray 1px solid;
        }

        #UpdatePanel1 {
            width: 200px;
            height: 200px;
            position: relative;
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }

        #UpdateProgress1 {
            width: 400px;
            background-color: #FFC080;
            bottom: 0%;
            left: 0px;
            position: absolute;
        }
    </style>


    <script runat="server">
        protected void Button_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                <ContentTemplate>
                    <%=DateTime.Now.ToString() %>
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    Update in progress...
                </ProgressTemplate>
            </asp:UpdateProgress>

        </div>
    </form>
</body>
</html>

Hope it will be helpful to you.

Best Regards,

Fei Han

Thank you for your answers,

I prefer not to use the ajax controls… maybe because I do not really understand what’s behind the scene’s

shtrudel

I prefer not to use the ajax controls

You are going to have to use some kind of AJAX-enabled approach to do what you want. If you prefer not to use the AJAX controls, you can use jQuery. 

How to apply jquery to Dynamic Textboxes?

I want to display my data in textboxes dynamically using Jquery.

pls give me reply QUICKLY

$("#" + yourTextBoxId).val(yourData);

  1. This example is how to render data of array into dynamically rows and Text inputs.

 

  • Try this
    <head runat="server">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style type="text/css">
            td {
                border: double;
            }
    
            table {
                border: double;
                background-color: whitesmoke;
            }
        </style>
        <title></title>
        <script type="text/javascript">
            //Inseting new row expire.
            var InsertRow = function () {
                var tblexp = document.getElementById('tableTest');
                var mydata = new Array("A", "B", "C");
                for (var i = 0; i < mydata.length ; i++) {
                    if ((tblexp.rows.length - 1) == mydata.length)
                    { return false; }
                    var currentRow = tblexp.insertRow(tblexp.rows.length);
                    var cell_order = currentRow.insertCell(0);
                    cell_order.innerHTML = '<center>' + parseInt(i + 1) + '</center>';
                    var cell_data = currentRow.insertCell(1);
                    cell_data.innerHTML = '<input type="text" name="txt" id="txt_' + i + 1 + '" class="" title="Test" placeholder="Test"  value="' + mydata[i] + '" />';
                }
            };
        </script>
    </head>
    
    <body>
        <form id="form1" runat="server">
            <div>
                <table id="tableTest">
                    <tbody>
                        <tr>
                            <td>
                                <center>Order</center>
                            </td>
                            <td>
                                <center>Data</center>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <input type="button" value="Add Row" onclick="InsertRow()" />
            </div>
        </form>
    </body>


[RESOLVED]jquery transposer change font

Hi,

I’m using a jquery code on my website that transpose the chords according to the selection but my problem is that I can not change the font, I’ve tried to change css file but no luck also I can not find any code line in the js file that has font attribute.
what can I do? please help it’s very urgent

https://github.com/jessegavin/jQuery-Chord-Transposer

JS

(function($) {

  $.fn.transpose = function(options) {
    var opts = $.extend({}, $.fn.transpose.defaults, options);
    
    var currentKey = null;
    
    var keys = [
      { name: 'Ab',  value: 0,   type: 'F' },
      { name: 'A',   value: 1,   type: 'N' },
      { name: 'A#',  value: 2,   type: 'S' },
      { name: 'Bb',  value: 2,   type: 'F' },
      { name: 'B',   value: 3,   type: 'N' },
      { name: 'C',   value: 4,   type: 'N' },
      { name: 'C#',  value: 5,   type: 'S' },
      { name: 'Db',  value: 5,   type: 'F' },
      { name: 'D',   value: 6,   type: 'N' },
      { name: 'D#',  value: 7,   type: 'S' },
      { name: 'Eb',  value: 7,   type: 'F' },
      { name: 'E',   value: 8,   type: 'N' },
      { name: 'F',   value: 9,   type: 'N' },
      { name: 'F#',  value: 10,  type: 'S' },
      { name: 'Gb',  value: 10,  type: 'F' },
      { name: 'G',   value: 11,  type: 'N' },
      { name: 'G#',  value: 0,   type: 'S' }
    ];
  
    var getKeyByName = function (name) {
        if (name.charAt(name.length-1) == "m") {
          name = name.substring(0, name.length-1);
        }
        for (var i = 0; i < keys.length; i++) {
            if (name == keys[i].name) {
                return keys[i];
            }
        }
    };

    var getChordRoot = function (input) {
        if (input.length > 1 && (input.charAt(1) == "b" || input.charAt(1) == "#"))
            return input.substr(0, 2);
        else
            return input.substr(0, 1);
    };

    var getNewKey = function (oldKey, delta, targetKey) {
        var keyValue = getKeyByName(oldKey).value + delta;

        if (keyValue > 11) {
            keyValue -= 12;
        } else if (keyValue < 0) {
            keyValue += 12;
        }
        
        var i=0;
        if (keyValue == 0 || keyValue == 2 || keyValue == 5 || keyValue == 7 || keyValue == 10) {
            // Return the Flat or Sharp Key
            switch(targetKey.name) {
              case "A":
              case "A#":
              case "B":
              case "C":
              case "C#":
              case "D":
              case "D#":
              case "E":
              case "F#":
              case "G":
              case "G#":
                  for (;i<keys.length;i++) {
                    if (keys[i].value == keyValue && keys[i].type == "S") {
                      return keys[i];
                    }
                  }
              default:
                  for (;i<keys.length;i++) {
                    if (keys[i].value == keyValue && keys[i].type == "F") {
                      return keys[i];
                    }
                  }
            }
        }
        else {
            // Return the Natural Key
            for (;i<keys.length;i++) {
              if (keys[i].value == keyValue) {
                return keys[i];
              }
            }
        }
    };

    var getChordType = function (key) {
        switch (key.charAt(key.length - 1)) {
            case "b":
                return "F";
            case "#":
                return "S";
            default:
              return "N";
        }
    };

    var getDelta = function (oldIndex, newIndex) {
        if (oldIndex > newIndex)
            return 0 - (oldIndex - newIndex);
        else if (oldIndex < newIndex)
            return 0 + (newIndex - oldIndex);
        else
            return 0;
    };

    var transposeSong = function (target, key) {
        var newKey = getKeyByName(key);

        if (currentKey.name == newKey.name) {
          return;
        }

        var delta = getDelta(currentKey.value, newKey.value);
        
        $("span.c", target).each(function (i, el) {
            transposeChord(el, delta, newKey);
        });
        
        currentKey = newKey;
    };

    var transposeChord = function (selector, delta, targetKey) {
        var el = $(selector);
        var oldChord = el.text();
        var oldChordRoot = getChordRoot(oldChord);
        var newChordRoot = getNewKey(oldChordRoot, delta, targetKey);
        var newChord = newChordRoot.name + oldChord.substr(oldChordRoot.length);
        el.text(newChord);

        var sib = el[0].nextSibling;
        if (sib && sib.nodeType == 3 && sib.nodeValue.length > 0 && sib.nodeValue.charAt(0) != "/") {
            var wsLength = getNewWhiteSpaceLength(oldChord.length, newChord.length, sib.nodeValue.length);
            sib.nodeValue = makeString(" ", wsLength);
        }
    };

    var getNewWhiteSpaceLength = function (a, b, c) {
        if (a > b)
            return (c + (a - b));
        else if (a < b)
            return (c - (b - a));
        else
            return c;
    };

    var makeString = function (s, repeat) {
        var o = [];
        for (var i = 0; i < repeat; i++) o.push(s);
        return o.join("");
    }
    
    
    var isChordLine = function (input) {
        var tokens = input.replace(/s+/, " ").split(" ");

        // Try to find tokens that aren't chords
        // if we find one we know that this line is not a 'chord' line.
        for (var i = 0; i < tokens.length; i++) {
            if (!$.trim(tokens[i]).length == 0 && !tokens[i].match(opts.chordRegex))
                return false;
        }
        return true;
    };
    
    var wrapChords = function (input) {
        return input.replace(opts.chordReplaceRegex, "<span class='c'>$1</span>");
    };
    
    
    return $(this).each(function() {
    
      var startKey = $(this).attr("data-key");
      if (!startKey || $.trim(startKey) == "") {
        startKey = opts.key;
      }

      if (!startKey || $.trim(startKey) == "") {
        throw("Starting key not defined.");
        return this;
      }
      
      currentKey = getKeyByName(startKey);

      // Build tranpose links ===========================================
      var keyLinks = [];
      $(keys).each(function(i, key) {
          if (currentKey.name == key.name)
              keyLinks.push("<a href='#' class='selected'>" + key.name + "</a>");
          else
              keyLinks.push("<a href='#'>" + key.name + "</a>");
      });


      var $this = $(this);
      var keysHtml = $("<div class='transpose-keys'></div><br/><br/>");
      keysHtml.html(keyLinks.join(""));
      $("a", keysHtml).click(function(e) {
          e.preventDefault();
          transposeSong($this, $(this).text());
          $(".transpose-keys a").removeClass("selected");
          $(this).addClass("selected");
          return false;
      });
      
      $(this).before(keysHtml);

      var output = [];
      var lines = $(this).text().split("n");
      var line, tmp = "";

      for (var i = 0; i < lines.length; i++) {
          line = lines[i];

          if (isChordLine(line))
              output.push("<span>" + wrapChords(line) + "</span>");
          else
              output.push("<span>" + line + "</span>");
      };

      $(this).html(output.join("n"));
    });
  };


  $.fn.transpose.defaults = {
    chordRegex: /^[A-G][b#]?(2|5|6|7|9|11|13|6/9|7-5|7-9|7#5|7#9|7+5|7+9|7b5|7b9|7sus2|7sus4|add2|add4|add9|aug|dim|dim7|m/maj7|m6|m7|m7b5|m9|m11|m13|maj7|maj9|maj11|maj13|mb5|m|sus|sus2|sus4)*(/[A-G][b#]*)*$/,
    chordReplaceRegex: /([A-G][b#]?(2|5|6|7|9|11|13|6/9|7-5|7-9|7#5|7#9|7+5|7+9|7b5|7b9|7sus2|7sus4|add2|add4|add9|aug|dim|dim7|m/maj7|m6|m7|m7b5|m9|m11|m13|maj7|maj9|maj11|maj13|mb5|m|sus|sus2|sus4)*)/g
  };

})(jQuery);
css

span.c { 
  font-weight: bold; 
  color: #002370;
}

.transpose-keys {
	margin: 10px 0;
	overflow: auto;
	font: normal 11px sans-serif;
    float: right;
    padding: 0em 2em;
    
}
.transpose-keys a { 
	display: block;
	float: left;
	width: 2.25em;
	text-align: center;
	margin: 0 .25em .25em 0;
    border-radius: 0.5em;
	color: #333;
	background: #eee;
	text-decoration: none;
	padding: .4em 0;
	outline: none;
    -webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.75);
}
.transpose-keys a.selected { 
  background: #002370; 
  color: #FFF;
}

thanks in advance :)

 

The class transpose-keys is where the font is defined.

It defines the transpose keys’ fonts and not the lyrics, when I change it it only changes the keys’ font.

Hi Foad,

If you want to change the lyrics font, you need to change the  "jquery.transposer.js " file,also you need to change the css style.

Here is the javascript code:

(function($) {

  $.fn.transpose = function(options) {
    var opts = $.extend({}, $.fn.transpose.defaults, options);
    
    var currentKey = null;
    
    var keys = [
      { name: 'Ab',  value: 0,   type: 'F' },
      { name: 'A',   value: 1,   type: 'N' },
      { name: 'A#',  value: 2,   type: 'S' },
      { name: 'Bb',  value: 2,   type: 'F' },
      { name: 'B',   value: 3,   type: 'N' },
      { name: 'C',   value: 4,   type: 'N' },
      { name: 'C#',  value: 5,   type: 'S' },
      { name: 'Db',  value: 5,   type: 'F' },
      { name: 'D',   value: 6,   type: 'N' },
      { name: 'D#',  value: 7,   type: 'S' },
      { name: 'Eb',  value: 7,   type: 'F' },
      { name: 'E',   value: 8,   type: 'N' },
      { name: 'F',   value: 9,   type: 'N' },
      { name: 'F#',  value: 10,  type: 'S' },
      { name: 'Gb',  value: 10,  type: 'F' },
      { name: 'G',   value: 11,  type: 'N' },
      { name: 'G#',  value: 0,   type: 'S' }
    ];
  
    var getKeyByName = function (name) {
        if (name.charAt(name.length-1) == "m") {
          name = name.substring(0, name.length-1);
        }
        for (var i = 0; i < keys.length; i++) {
            if (name == keys[i].name) {
                return keys[i];
            }
        }
    };

    var getChordRoot = function (input) {
        if (input.length > 1 && (input.charAt(1) == "b" || input.charAt(1) == "#"))
            return input.substr(0, 2);
        else
            return input.substr(0, 1);
    };

    var getNewKey = function (oldKey, delta, targetKey) {
        var keyValue = getKeyByName(oldKey).value + delta;

        if (keyValue > 11) {
            keyValue -= 12;
        } else if (keyValue < 0) {
            keyValue += 12;
        }
        
        var i=0;
        if (keyValue == 0 || keyValue == 2 || keyValue == 5 || keyValue == 7 || keyValue == 10) {
            // Return the Flat or Sharp Key
            switch(targetKey.name) {
              case "A":
              case "A#":
              case "B":
              case "C":
              case "C#":
              case "D":
              case "D#":
              case "E":
              case "F#":
              case "G":
              case "G#":
                  for (;i<keys.length;i++) {
                    if (keys[i].value == keyValue && keys[i].type == "S") {
                      return keys[i];
                    }
                  }
              default:
                  for (;i<keys.length;i++) {
                    if (keys[i].value == keyValue && keys[i].type == "F") {
                      return keys[i];
                    }
                  }
            }
        }
        else {
            // Return the Natural Key
            for (;i<keys.length;i++) {
              if (keys[i].value == keyValue) {
                return keys[i];
              }
            }
        }
    };

    var getChordType = function (key) {
        switch (key.charAt(key.length - 1)) {
            case "b":
                return "F";
            case "#":
                return "S";
            default:
              return "N";
        }
    };

    var getDelta = function (oldIndex, newIndex) {
        if (oldIndex > newIndex)
            return 0 - (oldIndex - newIndex);
        else if (oldIndex < newIndex)
            return 0 + (newIndex - oldIndex);
        else
            return 0;
    };

    var transposeSong = function (target, key) {
        var newKey = getKeyByName(key);

        if (currentKey.name == newKey.name) {
          return;
        }

        var delta = getDelta(currentKey.value, newKey.value);
        
        $("span.c", target).each(function (i, el) {
            transposeChord(el, delta, newKey);
        });
        
        currentKey = newKey;
    };

    var transposeChord = function (selector, delta, targetKey) {
        var el = $(selector);
        var oldChord = el.text();
        var oldChordRoot = getChordRoot(oldChord);
        var newChordRoot = getNewKey(oldChordRoot, delta, targetKey);
        var newChord = newChordRoot.name + oldChord.substr(oldChordRoot.length);
        el.text(newChord);

        var sib = el[0].nextSibling;
        if (sib && sib.nodeType == 3 && sib.nodeValue.length > 0 && sib.nodeValue.charAt(0) != "/") {
            var wsLength = getNewWhiteSpaceLength(oldChord.length, newChord.length, sib.nodeValue.length);
            sib.nodeValue = makeString(" ", wsLength);
        }
    };

    var getNewWhiteSpaceLength = function (a, b, c) {
        if (a > b)
            return (c + (a - b));
        else if (a < b)
            return (c - (b - a));
        else
            return c;
    };

    var makeString = function (s, repeat) {
        var o = [];
        for (var i = 0; i < repeat; i++) o.push(s);
        return o.join("");
    }
    
    
    var isChordLine = function (input) {
        var tokens = input.replace(/s+/, " ").split(" ");

        // Try to find tokens that aren't chords
        // if we find one we know that this line is not a 'chord' line.
        for (var i = 0; i < tokens.length; i++) {
            if (!$.trim(tokens[i]).length == 0 && !tokens[i].match(opts.chordRegex))
                return false;
        }
        return true;
    };
    
    var wrapChords = function (input) {
        return input.replace(opts.chordReplaceRegex, "<span class='c'>$1</span>");
    };
    
    
    return $(this).each(function() {
    
      var startKey = $(this).attr("data-key");
      if (!startKey || $.trim(startKey) == "") {
        startKey = opts.key;
      }

      if (!startKey || $.trim(startKey) == "") {
        throw("Starting key not defined.");
        return this;
      }
      
      currentKey = getKeyByName(startKey);

      // Build tranpose links ===========================================
      var keyLinks = [];
      $(keys).each(function(i, key) {
          if (currentKey.name == key.name)
              keyLinks.push("<a href='#' class='selected'>" + key.name + "</a>");
          else
              keyLinks.push("<a href='#'>" + key.name + "</a>");
      });


      var $this = $(this);
      var keysHtml = $("<div class='transpose-keys'></div>");
      keysHtml.html(keyLinks.join(""));
      $("a", keysHtml).click(function(e) {
          e.preventDefault();
          transposeSong($this, $(this).text());
          $(".transpose-keys a").removeClass("selected");
          $(this).addClass("selected");
          return false;
      });
      
      $(this).before(keysHtml);

      var output = [];
      var lines = $(this).text().split("n");
      var line, tmp = "";

      for (var i = 0; i < lines.length; i++) {
          line = lines[i];

          if (isChordLine(line))
              output.push("<span>" + wrapChords(line) + "</span>");
          else
//here we add a new class named "d" for the lyric output.push("<span class='d'>" + line + "</span>"); }; $(this).html(output.join("n")); }); }; $.fn.transpose.defaults = { chordRegex: /^[A-G][b#]?(2|5|6|7|9|11|13|6/9|7-5|7-9|7#5|7#9|7+5|7+9|7b5|7b9|7sus2|7sus4|add2|add4|add9|aug|dim|dim7|m/maj7|m6|m7|m7b5|m9|m11|m13|maj7|maj9|maj11|maj13|mb5|m|sus|sus2|sus4)*(/[A-G][b#]*)*$/, chordReplaceRegex: /([A-G][b#]?(2|5|6|7|9|11|13|6/9|7-5|7-9|7#5|7#9|7+5|7+9|7b5|7b9|7sus2|7sus4|add2|add4|add9|aug|dim|dim7|m/maj7|m6|m7|m7b5|m9|m11|m13|maj7|maj9|maj11|maj13|mb5|m|sus|sus2|sus4)*)/g }; })(jQuery);

Here is the css style, we add a span style to below:

/*!
 * jQuery Chord Transposer plugin v1.0
 * http://codegavin.com/projects/transposer
 *
 * Copyright 2010, Jesse Gavin
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://codegavin.com/license
 *
 * Date: Sat Jun 26 21:27:00 2010 -0600
 */
span.c { 
  font-weight: bold; 
  color: #2159D6;
}

/* here you can change font for your lyrics*/ span.d { font-family:'Arial Unicode MS'; color:red; font-size:xx-large; font-weight:bold; } .transpose-keys { margin: 10px 0; overflow: auto; font: normal 11px sans-serif; } .transpose-keys a { display: block; float: left; width: 2.25em; text-align: center; margin: 0 .25em .25em 0; color: #333; background: #eee; text-decoration: none; padding: .4em 0; border: solid 1px transparent; outline: none; } .transpose-keys a.selected { background: #2159D6; color: #FFF; }

Best Regards,

Kevin Shen.

wow, thanks :)

Blueimp jQuery File Upload problem

Hi, I am trying to integrate blueimp Jquery file upload from https://blueimp.github.io/jQuery-File-Upload/

There are 5 different types of upload components (in the tabs on demo).

I downloaded the plugin and in local environment only "Basic Plus" tab is resizing the uploaded images.

On the demo site all the tabs are resizing the images on client side.

I checked several times but could not find out the reason.

All the scripts are present in my local project and there are no errors listed in browser console.

Upon further research I found this link stating same problem in this link:

https://groups.google.com/forum/#!topic/jquery-fileupload/bzF8HS5DKmA

Has anyone implemented the Basic Plus UI version of blueimp uploader in asp.net.

There is an article on code project about this however the download source link is not working.

Thanks & Regards