0

I have a line in my database which represents a banking transaction. On screen, the user sees either a red cross, or a green tick, depending on the value in a table.

I want the user to be able to click an image (It's actually a Twitter Bootsrap GLYPHICON), send a call off to my database to toggle the boolean flag (bit) in the database, and refresh the screen with the updated data.

However, I want it to be quick! So, I am happy with client side toggling of the image, while an javascript function goes and does the update.

I have this so far:

The on screen image:

<td><a href="#"><span data-key="@line.Id" class="toggle glyphicon @(line.IsOnStatement ? "glyphicon-ok credit_colour" : "glyphicon-remove debit_colour")"> </span></a></td>

So, an href (to allow the click), the data key of the row I am on, some code to show if it should show the OK or the Cross.

When I click it, I then call this javascript:

$(function () {
        $('.toggle').on('click', function () {
            var data = { transactionId: $(this).data('key') };

            $.ajax({
                url: '@Url.Action("ToggleOnStatement", "Transaction")',
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                cache: false,
                async: true,
                success: function (result) {
                    if (result.Success == 'true') {
                        window.location = '@Url.Action("Transactions", "Transaction", new { bankAccountId = Model.BankAccountId })';
                    } else {
                        alert(result.Message);
                    }
                },
                error: function () {
                    alert(id);
                }

            });


        });

This works! However, I am reloading my transactions screen with the line:

window.location = '@Url.Action...

What I want to do instead, is make the call, but not refresh the whole screen. Instead, I want to check if the row is currently false, change to true and refresh the glyph, else, show false.

Can I do that from within this function? Toggle the icon? I guess the function doesn't know the state at the moment. My current implementation gets the state from the database, and returns the new state. I'd prefer to stick client side. Can I store the state in the row, or in a data-field or something?

Additionally, the '' is causing my screen to shoot back to the top of the page. Can I have a clickable object, and not make the screen move? I'm assuing the # is the anchor, and at the top of the screen?

Edit: I have found a solution, which works 100% - but I am NO idea why it works.

I found an example online, and modified it a bit:

var state = $(e.target).toggleClass('glyphicon-ok glyphicon-remove');
            var colour = $(e.target).toggleClass('credit_colour debit_colour');
            $("i.indicator").not(state).removeClass("glyphicon-ok").addClass("glyphicon-remove");
            $("i.indicator").not(colour).removeClass("credit_colour").addClass("debit_colour");

This works perfectly. BUT... no idea why. What is 'indicator'? What is 'i.indicator'? Why does this work? I have no class called indicator on my screen. It should fail.

Solution was found here: bootstrap 3 glyphicon swap state on click

Edit: OK, I see. It's the toggleClass that does the work. The rest was useless, and only pertained to the example. Removing the rest, works. Seems it's solved. Awaiting any comments.

Community
  • 1
  • 1
Craig
  • 18,074
  • 38
  • 147
  • 248
  • Sure, but all that code and explanation left me wondering what you're basing the toggle on. It seems that you're looking to act independently of the ajax call, so why include it here? – isherwood Apr 23 '14 at 01:44
  • Highly possible. I'm pretty new to this, and I am maybe over complicating things? I just want to do a client side update of the tick/cross, and send a 'fire-and-forget' call to my code to update the database. – Craig Apr 23 '14 at 01:48
  • And sorry - might not have answered you correctly. Basically, the user sees a list of items on the screen, and has to tick them off when they seem them in another system. A visual cue that the item has been verified. This sends the ID of the transaction back to the database, and toggles a bit field. The function calls an MVC controller method, passing it the transaction id. – Craig Apr 23 '14 at 01:57
  • 1
    Just fire and forget it then. :) Toggle on user click and hope for the best. Though 'banking transaction' makes me wonder if fire-and-forget is the best idea. – Will Apr 23 '14 at 02:21
  • If an error occurs, I am hoping to handle that in the bit where I show an alert. So they can continue doing their thing, and if something bad happens, I will display it on the screen. The transactions it's self are all handled in the usual fashion. It's just thing 'check' screen where this is done. – Craig Apr 23 '14 at 02:23
  • Tried to find some posts on 'hopeful ajax' but couldn't. Basic premise: say 'yay' to the user right away (toggle the color) and only bother them with the ajax callback if something went wrong. In which case, just toggle the clicked item back to red/other icon. – Will Apr 23 '14 at 02:23

0 Answers0