OK.....this is a strange issue that i'm facing. I am trying to use the file uploader plugin for jquery (https://github.com/blueimp/jQuery-File-Upload) . I am refering a project which has been coded for ASP.NET and have been able to port it to MVC but i'm
facing a strange issue with the css being rendered. I am not getting the same css layout in mvc as i can see in ASP.NET project.
Also the progressbars and the files selected table is not getting rendered in the MVC project which are visible in the .NET project, however the files are getting uploaded so i know that the functionality is working. Can anyone tell me what i'm doing wrong
??
I have uploaded the files, if anyone wants to refer them : http://dl.dropbox.com/u/62587930/File_Upload_Project.rar
Also, i know that the css file is properly registered bcos on viewing the source i can see all the css files. All the classes of the respective div tags and buttons are same(in MVC project and .NET Proj) yet the styles are not properly applied.
Also, i know that the css file is properly registered bcos on viewing the source i can see all the css files. All the classes of the respective div tags and buttons are same(in MVC project and .NET Proj) yet the styles are not properly applied.
All obvious things I'm sure you've checked but I would make sure (in Firebug) that none of the css in question is being heirarchically overwritten.
I'd also take the set of styles for the uploader and paste them with inline <style> tags in the view itself rather than use the <link> tag....just to be sure.
If the same thing occurs then I'd try other browsers to eliminate that from the mix.
I have checked for those heirarchical styles but none for the elements in question....however that inline suggestion does have some merit in it and i will try that and see whether it works or not...thanks tftr for the suggestion
Have you compared the rendered HTML from each app to see if there are any glaringly obvious differences in what's being output? Are the paths to your CSS files getting generated correctly, and have you tried (temporarily, as a test) embedding the CSS directly
in your MVC page?
Please remember to mark replies as answers if you find them useful =8)
yes...i have tried that, there is a file "jquery.fileupload-ui.js" which is supposed to insert the classes like " ui-widget" inside the style of each element when the proj is run but i dont know why, it just does not do so....i came to know this by trying
to embed the css code which worked btw but the progress bar is still not being created..it has come to my notice that the jquery scripts that i'm embedding in my code are not working....any ideas....and before anyone says...the paths for the scripts are getting
generated properly....i opened the source of html files and accessed the scripts and they come properly...
Are you getting any javascript errors that might be stopping code execution? To check this, I'd use Firefox and bring up the error console with <ctrl><shift>J (I use FF as the javascript debugging and logging is a lot better than IE).
If that doesn't show up any problems, backup then edit the .js file and maybe put some alerts in the initialisation functions to see if they are firing and failing, or not firing at all - at least that way you will narrow down your problem a bit. If they
don't fire, then maybe declare a test function in the file that you can call to double-check the file is being loaded properly.
Please remember to mark replies as answers if you find them useful =8)
bonishah
Member
8 Points
7 Posts
MVC File Upload Plugin with Progress bar CSS issue
Feb 16, 2012 12:40 PM|LINK
OK.....this is a strange issue that i'm facing. I am trying to use the file uploader plugin for jquery (https://github.com/blueimp/jQuery-File-Upload) . I am refering a project which has been coded for ASP.NET and have been able to port it to MVC but i'm facing a strange issue with the css being rendered. I am not getting the same css layout in mvc as i can see in ASP.NET project.
You can see the difference in this pics which i have uploaded here : http://imageshack.us/g/859/aspnet.jpg/
Also the progressbars and the files selected table is not getting rendered in the MVC project which are visible in the .NET project, however the files are getting uploaded so i know that the functionality is working. Can anyone tell me what i'm doing wrong ??
I have uploaded the files, if anyone wants to refer them : http://dl.dropbox.com/u/62587930/File_Upload_Project.rar
Thanks in advance
ignatandrei
All-Star
134491 Points
21566 Posts
Moderator
MVP
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 05:14 AM|LINK
How did you register the css?
bonishah
Member
8 Points
7 Posts
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 07:35 AM|LINK
I registered the css in the _Layout.cshtml page inside shared folder under views. The exact code is as shown :
<head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/jquery.fileupload-ui.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.fileupload.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.fileupload-ui.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/application.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.iframe-transport.js")" type="text/javascript"></script> </head>Also, i know that the css file is properly registered bcos on viewing the source i can see all the css files. All the classes of the respective div tags and buttons are same(in MVC project and .NET Proj) yet the styles are not properly applied.
bonishah
Member
8 Points
7 Posts
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 07:46 AM|LINK
I registered the css in the _Layout.cshtml page inside shared folder under views. The exact code is as shown :
<head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/jquery.fileupload-ui.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.fileupload.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.fileupload-ui.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/application.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.iframe-transport.js")" type="text/javascript"></script> </head>Also, i know that the css file is properly registered bcos on viewing the source i can see all the css files. All the classes of the respective div tags and buttons are same(in MVC project and .NET Proj) yet the styles are not properly applied.
</div>tftr_si
Member
713 Points
215 Posts
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 07:50 AM|LINK
All obvious things I'm sure you've checked but I would make sure (in Firebug) that none of the css in question is being heirarchically overwritten.
I'd also take the set of styles for the uploader and paste them with inline <style> tags in the view itself rather than use the <link> tag....just to be sure.
If the same thing occurs then I'd try other browsers to eliminate that from the mix.
bonishah
Member
8 Points
7 Posts
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 08:29 AM|LINK
I have checked for those heirarchical styles but none for the elements in question....however that inline suggestion does have some merit in it and i will try that and see whether it works or not...thanks tftr for the suggestion
Mad-Halfling
Participant
1438 Points
729 Posts
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 09:02 AM|LINK
Have you compared the rendered HTML from each app to see if there are any glaringly obvious differences in what's being output? Are the paths to your CSS files getting generated correctly, and have you tried (temporarily, as a test) embedding the CSS directly in your MVC page?
bonishah
Member
8 Points
7 Posts
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 10:16 AM|LINK
yes...i have tried that, there is a file "jquery.fileupload-ui.js" which is supposed to insert the classes like " ui-widget" inside the style of each element when the proj is run but i dont know why, it just does not do so....i came to know this by trying to embed the css code which worked btw but the progress bar is still not being created..it has come to my notice that the jquery scripts that i'm embedding in my code are not working....any ideas....and before anyone says...the paths for the scripts are getting generated properly....i opened the source of html files and accessed the scripts and they come properly...
ignatandrei
All-Star
134491 Points
21566 Posts
Moderator
MVP
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 10:22 AM|LINK
What's the generated html from
?
Also, see the link registration here
http://bit.ly/asp5Mistakes
Mad-Halfling
Participant
1438 Points
729 Posts
Re: MVC File Upload Plugin with Progress bar CSS issue
Feb 17, 2012 10:36 AM|LINK
Are you getting any javascript errors that might be stopping code execution? To check this, I'd use Firefox and bring up the error console with <ctrl><shift>J (I use FF as the javascript debugging and logging is a lot better than IE).
If that doesn't show up any problems, backup then edit the .js file and maybe put some alerts in the initialisation functions to see if they are firing and failing, or not firing at all - at least that way you will narrow down your problem a bit. If they don't fire, then maybe declare a test function in the file that you can call to double-check the file is being loaded properly.