CODEWITHSUNDEEP
javascriptc#jqueryhtmlasp.net
Dan Hastings
Dan Hastings

Reputation: 3280

jQuery code not working when called from aspx file with a master file

I have created a blank asp.net forms website. I have taken the default.aspx page and replaced the default code with the code from

https://blueimp.github.io/jQuery-File-Upload/jquery-ui.html

So it looks like 

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
HTML / Javascript from the link above. 
</asp:Content>

If i strip out the master file content and just paste the content of the page it works perfectly. So for some reason the

When i click add files and browse the files do not show up on the page, but when i have no master file stuff it will show up fine.

I understand this isnt great debug information. If anyone knows a good way i cold even debug this it would be great.

If i were to guess it appears the following code is the cause of the error.

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
      {% console.log(file.name); %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress"></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="start" disabled>Start</button>
            {% } %}
            {% if (!i) { %}
                <button class="cancel">Cancel</button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

When i have a look at the html through the browser the following form is missing from the page when i load it with the master file

<form id="fileupload" action="sendfiles" method="POST" enctype="multipart/form-data">

Upvotes: 0

Views: 324

Answers (2)

Dave 5709
Dave 5709

Reputation: 625

Now that you've identified the missing form - Asp.Net webforms does not allow multiple elements. It's an annoyance that comes with webforms, but there are some workarounds that can be found on the first answer here, along with a good discussion about the issue: Can we use multiple forms in a web page?

Previous answer - Check out the source of the generated HTML in your browser (F12). My guess, with what little information is available, is that the IDs of elements that you are targeting with jQuery are being changed in children of the master page.

Upvotes: 0

Ryan Mann
Ryan Mann

Reputation: 5357

When dealing with ASPX never use raw html id's in your javascript, you need to look up their real id via,

<script>
    var controlId = '<%= this.SomeControl.ClientId %>'
    var things = $(controlId);
</script>

The <%=... %> logic is an ASPX expression, the server side aspx engine will see it and convert it into what you are asking for when it spits it out to the response.

Upvotes: 1

Related Questions