Web Development

Re: Jquery fuction not called when I append achor tag .

30-Oct-19 4:29

So initially when I call my view it pulls the files from the database which users have uploaded and it allows users to delete those files if they don't need them anymore , this is done by when they click on the specific Actionlink, it calls a jquery function which calls my ajax which calls my Remove() Function in my controller , when the files are deleted I append the new list back to the customer.

My Issue: When the new list is appended back, the jquery function is no longer called and it goes directly to the method in my controller. I checked my html anchor-tag in my developer tools of both the appended files and the originally uploaded files and they are identical , I am not sure what is causing this issue, and help will be greatly appreciated.

Here is the anchor tags that work initially when the page is loaded:

<div class="portlet-body form " id="attachments">
                                        @if (ViewBag.file != null)
                                        {
                                            foreach (var x in ViewBag.file)
                                            {
                                                if (string.IsNullOrWhiteSpace(x.FileName))
                                                {
                                                    continue;
                                                }
                                                @Html.ActionLink(" ", "Remove", "Chargeback", new { name = (string)x.FileName, filePath = (string)x.FilePath }, new { @class = "fas fa-trash-alt", @id = "uploadsGif" })                                                
                                                @Html.ActionLink((string)x.FileName, "DownloadFile", "Chargeback", new { name = (string)x.FileName, id = "uploads" }, null)
                                                DateTime.Now.ToString("MM/dd/yyyy");
                                            }
                                        }
  </div>

Here is my jquery function which is appending my achor-tag/ActionLink:

$("#uploadsGif").click(function () {

            debugger;

              ...

            debugger;
             $.ajax({
                type: 'POST',
                url: "/Chargeback/Remove",
                dataType: 'json',
                data: {
                    name: name,
                    filePath: filePath
                },
                success: function (data) {

                    debugger;
                    $("#lblresponce").append("File has been successfully removed");

                    setTimeout(function () {
                        $("#lblresponce").empty();
                    }, 5000)
                    debugger;
                    $("#attachments").empty();
                    $.each(data, function (i, item) {
                        $("#attachments").append('<a class="fas fa-trash-alt" href=/Chargeback/Remove?name=' + data[0].FileName + ';filePath=' + data[0].FilePath + 'id="uploadsGif"'+'>' + '</a>'); --> ISSUE                       $("#attachments").append('<a href=/Chargeback/DownloadFile/uploads?name=' + data[0].FileName +'>' + data[0].FileName + '</a>');
                    });

                },
                error: function (data) {

                }

             });
             debugger;
          return false;

        })

Richard Deeming30-Oct-19 5:30

Direct and delegated event handlers | .on() | jQuery API Documentation[^]

30-Oct-19 5:30

Use a delegated event. Replace:

JavaScript

$("#uploadsGif").click(function () {

with:

JavaScript

$(document).on("click", "#uploadsGif", function() {

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Jquery fuction not called when I append achor tag .

KGr2830-Oct-19 8:03

Re: Jquery fuction not called when I append achor tag .

30-Oct-19 8:03

Thank you so much, I originally doing it this way ("#uploadsGif").on("click",function(){

})

.

Leanbridge Technologies1-Nov-19 22:24

Leanbridge Technologies

1-Nov-19 22:24

When appending elements dynamically you have to attach the event to a static parent element, and supply a filter which you wish to delegate events to, like this:

This was my solution:

$("#mainDiv").on('click', '.interested', function(){
       alert("working");
   });

Member 1463762428-Oct-19 19:29

Member 14637624

28-Oct-19 19:29

how to create the login page using php and html code and how i get the information?

Re: Login Information

Richard MacCutchan28-Oct-19 21:54

Richard MacCutchan

28-Oct-19 21:54

Google for "login php" and you will find many examples.

Grabbing routeValues from ActionLink with jquery.

KGr2828-Oct-19 9:12

Re: Grabbing routeValues from ActionLink with jquery.

28-Oct-19 9:12

I have an ActionLink:

@Html.ActionLink(" ", "Remove", "Chargeback", new { name = (string)x.FileName, filePath = (string)x.FilePath}, new { @class = "fas fa-trash-alt" , @id = "uploadsGif" })

is there a way to grab the name and filepath with jquery?

ZurdoDev28-Oct-19 9:49

ZurdoDev

28-Oct-19 9:49

Yes, look at the actual hmtl generated and you can find how to parse it with jquery.

Social Media - A platform that makes it easier for the crazies to find each other.

Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.

Re: Grabbing routeValues from ActionLink with jquery.

KGr2828-Oct-19 9:52

Re: Grabbing routeValues from ActionLink with jquery.

28-Oct-19 9:52

Im kind of new to Jquery, here is the code genereted:
Are you able to provide how I would actually do that?

<a class="fas fa-trash-alt" href="/Chargeback/Remove?name=Working.xlsx&filePath=C%3A%5CCbUploads%5C7.xlsx" id="uploadsGif"> </a><a href="/Chargeback/DownloadFile/uploads?name=Working.xlsx">Working.xlsx</a>                            <br />

Richard Deeming28-Oct-19 10:11

Re: Grabbing routeValues from ActionLink with jquery.

28-Oct-19 10:11

If you're using a modern browser - basically, anything except Internet Explorer - you can use the built-in URLSearchParams[^] class.

JavaScript

let link = document.getElementById("uploadsGif");
let query = link.href.substr(link.href.indexOf("?"));
let qs = new URLSearchParams(query);
let name = qs.get("name");
let filePath = qs.get("filePath");

If you need to support Internet Explorer, you could use a library like URI.js[^]. Or, you could use a simple function to extract the variable - for example: Get Query String Parameters with JavaScript[^]

JavaScript

function getUrlParameter(search, name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
...
var link = document.getElementById("uploadsGif");
var query = link.href.substr(link.href.indexOf("?"));
var name = getUrlParameter(query, "name");
var filePath = getUrlParameter(query, "filePath");

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

KGr2828-Oct-19 10:34

Web Site Log Out in Mozilla Firefox on Post back

28-Oct-19 10:34

Thank you , you are a life saver.

Web API and SignlaR Test

Kevin Marois16-Oct-19 6:18

Kevin Marois

16-Oct-19 6:18

I have both a standard ASP.Net Web PI running, as well as a SignalR API, running in IIS.

For the web API, I have been making a call to the API's Test Controller's Test Method. If it succeeds, then I assume it's working, if not, then I assume the site isn't running.
For the SignalR API, I call a method called 'Connect()' via the hub and wait for ConnectionStateChanged to indicated Connection State = Connected. Problem is, this response may never come.

So, what's the right way to test if both of these APIs are running?

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Siddharth Chudasama10-Oct-19 22:52

Siddharth Chudasama

10-Oct-19 22:52

Hi to all,
 
I am having live web application, which some times log out due to post back in firefox only.
At that time Session become null and Log Out.
 
In Other browsers working fine. I am using Firefox 69.0.2 (Latest) version.
 
Log Out happnes into Live Clients or in Production server only. In web developement working fine.
I am having Old Web Application around 12 years old web site (Product) and successfully using 150+ clients.
 
Some clients facing this issue. I have checked at my end. Issue still persist in some pages of web site.
Any one faced same issue?
 
Is there any thing that i can check that issue in otherway ?
 
Thank You

Re: Web Site Log Out in Mozilla Firefox on Post back

ZurdoDev28-Oct-19 9:50

ZurdoDev

28-Oct-19 9:50

Siddharth Chudasama wrote:
which some times log out due to post back

What does that mean? How does a postback cause a session timeout?

Social Media - A platform that makes it easier for the crazies to find each other.

Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.

How to get uploaded file in ajax Post

KGr283-Oct-19 4:17

3-Oct-19 4:17

Currently I want to grab the name of my uploaded file in Ajax and pass it to my APIController and pass it to my parameter.

1.Here is my controller :

public class ApiSampleUploadController : ApiController
   {


       [HttpPost]
       public string Test(HttpPostedFileBase file )
       {

           return "Success";
       }


   }

2.Here is my view:

@using (Html.BeginForm("Submit"))
 {
 /*code*/
     //FileUpload
       <div>
        <input type="file" name="file" id="uploadFile" />
      </div>
/*code*/
 }

3.Here is my ajax

$('#uploadFile').on("change", function () {
    var formdata = new FormData($('form').get(0));

    CallUpload(formdata);
});


function CallUpload(file) {
    console.log(file);
    $.ajax({
        url: '/api/ApiSampleUpload/Test',
        type: 'POST',
        data:  'file=' + file ,
        cache: false,
        processData: false,
        contentType: 'application/json',
        success: function () {
            alert('Success');
        },
        error: function () {
            alert('Error occured');
        }
    });
}

Richard Deeming3-Oct-19 4:33

3-Oct-19 4:33

Two problems:

1) You're missing the enctype on the form:

@using (Html.BeginForm("Test", "ApiSampleUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))

2) You're converting the FormData to a string, so you're submitted data will be file=[object FormData].

You need to pass the FormData directly to the data parameter instead.

You're also specifying the wrong content type for the upload.

JavaScript

function CallUpload(file) {
    console.log(file);
    $.ajax({
        url: '/api/ApiSampleUpload/Test',
        type: 'POST',
        data:  file,
        cache: false,
        processData: false,
        contentType: false,
        success: function () {
            alert('Success');
        },
        error: function () {
            alert('Error occured');
        }
    });
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

KGr283-Oct-19 4:39

3-Oct-19 4:39

1.So should data be like : data: 'file=' + new FormData($('form').get(0))

2.When setting contentType:false I get a 415 (Unsupported Media Type)

Richard Deeming3-Oct-19 4:52

3-Oct-19 4:52

KGr28 wrote:
1.So should data be like : data: 'file=' + new FormData($('form').get(0))

No, it needs to be the FormData object, not a string representation of it:

JavaScript

data: new FormData($('form').get(0))

But in the code you posted, you've already created that FormData object and passed it in as a parameter, so you should just re-use that:

JavaScript

data: file

KGr28 wrote:
2.When setting contentType:false I get a 415 (Unsupported Media Type)

Try explicitly setting it to multipart/form-data then:

JavaScript

contentType: 'multipart/form-data',

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

KGr283-Oct-19 7:12