JQuery with ASP.Net Master Page -
i have been searching answer problem hours , tried every example google search.
i trying upload file using jquery , part of asp.net master page. when test script on regular page works fine. when put in master page nothing happens.
here master page
<head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script> <link href="css/grid.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href='https://fonts.googleapis.com/css?family=open+sans:400,600,700,300' rel='stylesheet' type='text/css'> <style> .progressbar { width:400px; height:15px; } .progressbarlabel { width:400px; height:15px; position:absolute; text-align:center; font-size:medium; color:red; } </style> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> </head> <body> <form id="form1" runat="server"> <asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder> </form> </body> here content page (default.aspx)
<asp:content id="content1" contentplaceholderid="head" runat="server"> <script> $(document).ready(function () { $("<%= uploadfile.clientid %>").click(function (evt) { var xhr = new xmlhttprequest(); var data = new formdata(); var files = $("#singlefile").get(0).files; (var = 0; < files.length; i++) { data.append(files[i].name, files[i]); } xhr.upload.addeventlistener("progress", function (evt) { if (evt.lengthcomputable) { var progress = math.round(evt.loaded * 100 / evt.total); $("#progressbar").progressbar("value", progress); } }, false); xhr.open("post", "uploadblob.ashx"); xhr.send(data); $("#progressbar").progressbar({ max: 100, change: function (evt, ui) { $("#progresslabel").text($("#progressbar").progressbar("value") + "%"); }, complete: function (evt, ui) { $("#progresslabel").text("upload complete!"); }, }); evt.preventdefault(); }); }); </script> <style> .progressbar { width:400px; height:15px; } .progressbarlabel { width:400px; height:15px; position:absolute; text-align:center; font-size:medium; color:red; } </style> </asp:content> <asp:content id="content2" contentplaceholderid="contentplaceholder1" runat="server"> <asp:fileupload id="singlefile" cssclass="btn-button" allowmultiple="false" clientidmode="static" runat="server" width="350px" /> <br /> <asp:button id="uploadfile" runat="server" text="upload picture" clientidmode="static" /> <br /> <br /> <div id="progressbar" class="progressbar"> <div id="progresslabel" class="progressbarlabel"> </div> </div> <asp:regularexpressionvalidator id="regularexpressionvalidator1" runat="server" controltovalidate="singlefile" errormessage="only .jpg,.png,.gif files allowed" font-bold="true" font-size="medium" validationexpression="(.*?)\.(jpg|png|gif|jpg|png|gif)$"></asp:regularexpressionvalidator> </asp:content> here source code when viewed in internet explorer 11
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script> <link href="css/grid.css" rel="stylesheet" type="text/css" /><link href="css/style.css" rel="stylesheet" type="text/css" /><link href="https://fonts.googleapis.com/css?family=open+sans:400,600,700,300" rel="stylesheet" type="text/css" /> <style> .btn-facebook { background-color: hsl(246, 74%, 19%) !important; background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startcolorstr="#6051e5", endcolorstr="#130c54"); background-image: -khtml-gradient(linear, left top, left bottom, from(#6051e5), to(#130c54)); background-image: -moz-linear-gradient(top, #6051e5, #130c54); background-image: -ms-linear-gradient(top, #6051e5, #130c54); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6051e5), color-stop(100%, #130c54)); background-image: -webkit-linear-gradient(top, #6051e5, #130c54); background-image: -o-linear-gradient(top, #6051e5, #130c54); background-image: linear-gradient(#6051e5, #130c54); border-color: #130c54 #130c54 hsl(246, 74%, 8.5%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.69); -webkit-font-smoothing: antialiased; } .progressbar { width:400px; height:15px; } .progressbarlabel { width:400px; height:15px; position:absolute; text-align:center; font-size:medium; color:red; } </style> <script> $(document).ready(function () { $("uploadfile").click(function (evt) { var xhr = new xmlhttprequest(); var data = new formdata(); var files = $("#singlefile").get(0).files; (var = 0; < files.length; i++) { data.append(files[i].name, files[i]); } xhr.upload.addeventlistener("progress", function (evt) { if (evt.lengthcomputable) { var progress = math.round(evt.loaded * 100 / evt.total); $("#progressbar").progressbar("value", progress); } }, false); xhr.open("post", "uploadblob.ashx"); xhr.send(data); $("#progressbar").progressbar({ max: 100, change: function (evt, ui) { $("#progresslabel").text($("#progressbar").progressbar("value") + "%"); }, complete: function (evt, ui) { $("#progresslabel").text("upload complete!"); }, }); evt.preventdefault(); }); }); </script> <style> .progressbar { width:400px; height:15px; } .progressbarlabel { width:400px; height:15px; position:absolute; text-align:center; font-size:medium; color:red; } </style> </head> <body> <form method="post" action="test_master.aspx" onsubmit="javascript:return webform_onsubmit();" id="form1" enctype="multipart/form-data"> <div class="aspnethidden"> <input type="hidden" name="__eventtarget" id="__eventtarget" value="" /> <input type="hidden" name="__eventargument" id="__eventargument" value="" /> <input type="hidden" name="__viewstate" id="__viewstate" value="glgqpmwqpejyyksp3n0ne40yibqrlolte3q3tamhixiwsqotodwu9osijeshe7rjn5kpfvu8zk/9elbrleyj6h8nub3kp1nrvfgfibgk646ypywqqbvq0wugibj5vuv2zku37houtt/a0djlnn33ymlh3u0mbiwftkrfdbkl9lueuaf/1oaeawml3sztdjmcho1lowfthjxar5bbbdfcs8ofe48pm+ccxwlwffbuicxkppcn4+a7tg15cbtxrmeio+pcpdvj1rekpujskssisa==" /> </div> <script type="text/javascript"> //<![cdata[ var theform = document.forms['form1']; if (!theform) { theform = document.form1; } function __dopostback(eventtarget, eventargument) { if (!theform.onsubmit || (theform.onsubmit() != false)) { theform.__eventtarget.value = eventtarget; theform.__eventargument.value = eventargument; theform.submit(); } } //]]> </script> <script src="/webresource.axd?d=pyngkmcfuv13he1qd6_tziw17xfpa72zfs-xrpfjas8oloo4xadi9kxfskwqaikprqeqgnttjzx4c0lhpr-xua2&t=635589255571259667" type="text/javascript"></script> <script src="/webresource.axd?d=x2nkrmjgxkmelz33nwnakhkreree4fvaxio7xufaqicwfxpudlnpjbhxbfb1m-mvgxv8j2yp0jlwxbfasc8c-djxgqbcrj0x7cous4wukr01&t=635589255571259667" type="text/javascript"></script> <script type="text/javascript"> //<![cdata[ function webform_onsubmit() { if (typeof(validatoronsubmit) == "function" && validatoronsubmit() == false) return false; return true; } //]]> </script> <div class="aspnethidden"> <input type="hidden" name="__viewstategenerator" id="__viewstategenerator" value="3571f23d" /> <input type="hidden" name="__eventvalidation" id="__eventvalidation" value="pssgfqyjblbzikaorbqdkdjdqzgutccyxhvtdhfxxsoidqh/c7pnpjxg639x0oxqrz2jkchidxv53slmtuicmmvrysetyl34ecjbni8f3zyhcpzxryyzi4khppfr0yrshvacqcfabsfmaj7shbvxgg==" /> </div> <div id="wrapper"> <!--begin: wrapper--> <header id="header"> <!--begin: header--> <div class="row top-bar"> <div class="medium-6 columns"> <div id="logo" class="logo"> <a href="/"><img src="images/logo.png" /></a> </div> </div> <div id="fb_logout"> <input type="button" name="ctl00$facebookbuttonlogout" value="log out" onclick="javascript:webform_dopostbackwithoptions(new webform_postbackoptions("ctl00$facebookbuttonlogout", "", true, "", "", false, true))" id="facebookbuttonlogout" class="btn-facebook" /> </div> </div> </div> <nav id="navigation"><!-- begin: navigation --> <div class="row"> <ul class="medium-12 columns"> <li> <a href="profile_page.aspx">profile</a> </li> <li> <a href="my_rewards_page.html">my rewards</a> </li> <li> <a href="shopping_cart_page.html">shopping cart</a> </li> <li> <a href="test_master.aspx">services</a> </li> <li> <a href="#">careers</a> </li> <li> <a href="#">contact us</a> </li> </ul> </div> </nav> <!-- end: navigation --> </header> <!--end: header--> <input type="file" name="ctl00$contentplaceholder1$singlefile" id="singlefile" class="btn-button" style="width:350px;" /> <br /> <input type="submit" name="ctl00$contentplaceholder1$uploadfile" value="upload picture" onclick="javascript:webform_dopostbackwithoptions(new webform_postbackoptions("ctl00$contentplaceholder1$uploadfile", "", true, "", "", false, false))" id="uploadfile" /> <br /> <br /> <div id="progressbar" class="progressbar"> <div id="progresslabel" class="progressbarlabel"> </div> </div> <span id="contentplaceholder1_regularexpressionvalidator1" style="font-size:medium;font-weight:bold;visibility:hidden;">only .jpg,.png,.gif files allowed</span> <footer> terms & conditions | privacy policy | copyright © 2015 fingers crossed erie. rights reserved. </footer> <!--end: campus tour--> </div> <!--end: wrapper--> <script type="text/javascript" src="js/fastclick.js"></script> <script type="text/javascript" src="js/modernizr.js"></script> <script type="text/javascript" src="js/plugins.js"></script> <script type="text/javascript" src="js/site.js"></script> <script type="text/javascript"> //<![cdata[ var page_validators = new array(document.getelementbyid("contentplaceholder1_regularexpressionvalidator1")); //]]> </script> <script type="text/javascript"> //<![cdata[ var contentplaceholder1_regularexpressionvalidator1 = document.all ? document.all["contentplaceholder1_regularexpressionvalidator1"] : document.getelementbyid("contentplaceholder1_regularexpressionvalidator1"); contentplaceholder1_regularexpressionvalidator1.controltovalidate = "singlefile"; contentplaceholder1_regularexpressionvalidator1.errormessage = "only .jpg,.png,.gif files allowed"; contentplaceholder1_regularexpressionvalidator1.evaluationfunction = "regularexpressionvalidatorevaluateisvalid"; contentplaceholder1_regularexpressionvalidator1.validationexpression = "(.*?)\\.(jpg|png|gif|jpg|png|gif)$"; //]]> </script> <script type="text/javascript"> //<![cdata[ var page_validationactive = false; if (typeof(validatoronload) == "function") { validatoronload(); } function validatoronsubmit() { if (page_validationactive) { return validatorcommononsubmit(); } else { return true; } } //]]> </script> </form> </body> </html> 
server controls id changes when used in master page lay out used.
you can of following things make code work.
- use
html controlinstead ofserver control: since not using code behind methods can change controls corresponding html control retain id property. using html control put less load on server. controls
<asp:fileupload id="singlefile" cssclass="btn-button" allowmultiple="false" runat="server" width="350px" /> <asp:button id="uploadfile" runat="server" text="upload picture" /> changes
<input type="file" id = "singlefile" class = "btn-button" width="350px" /> <input type="button" id= "uploadfile" test="upload picture" /> - use clientidmode static using property retains original id of server control.
<asp:fileupload id="singlefile" cssclass="btn-button" allowmultiple="false" runat="server" width="350px" clientidmode="static" /> <asp:button id="uploadfile" runat="server" text="upload picture" clientidmode="static" /> note: if using inside repeater or grid, need use clientidmode = "predictatble" have unique id in each row.
- use clientid mode expression in javascript on same page.
instead of using $("#uploadfile") use $("<%= uploadfile.clientid %>") , use similar pattern control ids. dynamic id using in javascript/jquery.
Comments
Post a Comment