Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Silvija 58 posts 171 karma points
    Aug 27, 2019 @ 11:37
    Silvija
    0

    Trigger the Static method with click on accordion

    I want to do some logic after user click on accordion, but cant get it to work. When i have normal button like this, my controller get hit:

    <a href="@Url.Action("Action", "Controller", new { id = model.Id })">Show Details</a>
    

    But when i have accordion like this, than its not working:

    <a href="@Url.Action("Action", "Controller", new { id = model.Id })" data-toggle="collapse" data-target="#details">Show Details</a>
    <div id="details" class="collapse font-weight-bold">
    Details
    </div>
    
  • Jonathan Distenfeld 105 posts 618 karma points
    Aug 27, 2019 @ 14:12
    Jonathan Distenfeld
    0

    Hi Silvija,

    What could be the problem:

    I assume you have javascript logic running when you click on the link. Possibly this logic calls e.preventDefault()? This method prevents the link to call the url.

    What could be the solution:

    • remove the preventDefault() line
    • add some other javascript logic which calls the url on some click event

    It is hard to provide you with a solution since there are a lot of possible reasons for this problem. An important question is, why are you calling your controller action via native link when user clicks an accordion? User is expecting an accordion to open but instead he gets redirected to some other page

    ~ Jonathan

  • Silvija 58 posts 171 karma points
    Aug 27, 2019 @ 16:08
    Silvija
    0

    Hi Jonathan,

    I dont use any javascript, I think in that case i wouldn't be able to call the controller with normal button too.

    I want to keep default behaviour of accordion (to show more details bellow) but also i want to save the count of clicks on that particual accordion with static method.

    Do you have any other idea how to achieve this?

    Silvija

  • Jonathan Distenfeld 105 posts 618 karma points
    Aug 28, 2019 @ 12:49
    Jonathan Distenfeld
    0

    Hi Silvija,

    Where does the behaviour of the accordion come from? Is it only with CSS?

    To achieve what you are trying to do you'll have to use ajax to call your controller action on click event. Otherwise your page will refresh everytime you click.

    ~Jonathan

  • Silvija 58 posts 171 karma points
    Aug 28, 2019 @ 18:45
    Silvija
    0

    I am using bootstrap 4 accordion. If i remove data-toggle="collapse" than Controller get hit and he redirect me to http://localhost:60493/umbraco/Surface/ClickCounter/Count?DocId=2076 which i dont want. I dont want anything to be returned, I just want to do some logic in that controller, stay on the same page and do normal accordion behaviour.

    This is my controller:

     public void Count(int DocId)
            {
                using (var scope = Current.ScopeProvider.CreateScope(autoComplete: true))
                {
                    var sql = "SELECT * FROM table WHERE DocId = @0";
                    var record= scope.Database.Fetch<tableSchemas>(sql, DocId, DocType).FirstOrDefault();
                    if (record != null)
                    {
                        var count = record.Count + 1;
                        scope.Database.Update(new tableSchemas
                        {
                            Id = record.Id,
                            Count = count
                        }, new string[] { "Count" });
                    }
                    scope.Complete();
                }
            }
    

    Also when i remove data-toggle="collapse" accordion is not working, but i can make some workaround with that.

    I was thinking that Ajax could be my way to go but i never used it before.

    BR

    Silvija

  • Jonathan Distenfeld 105 posts 618 karma points
    Aug 29, 2019 @ 06:32
    Jonathan Distenfeld
    0

    Hi Silvija,

    ajax should solve your problem.

    Here is an example of how to achieve this:

    $(document).ready(function ()
    {
       $("a.triggerCount").on("click", function(event)
       {
          $.ajax(
          {
             url: "SomeUrl - You could get it from element by getting attr-value",
             data: { data you want to send },
             method: "POST"/"GET",
             success: function (data)
             {
                // successfully called the action
             },
             error: function (jqXHR, exception)
             {
                // error occured when calling the action
             }
          });
          // prevent a-tag to call the url which would cause page-refresh (consider to make the element a button (semantic))
          event.preventDefault();
       });
    });
    

    There are some more options you could use if needed. For more information, take a look at the docs: https://api.jquery.com/jquery.ajax/. https://api.jquery.com/event.preventDefault/

    Hope this helps,

    ~ Jonathan

Please Sign in or register to post replies

Write your reply to:

Draft