Last post Feb 20, 2012 11:17 AM by Mad-Halfling
Feb 16, 2012 01:40 PM|bonishah|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
Feb 17, 2012 06:14 AM|ignatandrei|LINK
but i'm facing a strange issue with the css being rendered.
How did you register the css?
Feb 17, 2012 08:35 AM|bonishah|LINK
I registered the css in the _Layout.cshtml page inside shared folder under views. The exact code is as shown :
<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" />
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.
Feb 17, 2012 08:46 AM|bonishah|LINK
Feb 17, 2012 08:50 AM|tftr_si|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.
Feb 17, 2012 09:29 AM|bonishah|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
Feb 17, 2012 10:02 AM|mad-halfling|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?
Feb 17, 2012 11:16 AM|bonishah|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...
Feb 17, 2012 11:22 AM|ignatandrei|LINK
What's the generated html from
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
Also, see the link registration here
Feb 17, 2012 11:36 AM|mad-halfling|LINK
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.
Feb 18, 2012 07:16 AM|bonishah|LINK
@ignantandrei : The link generated is : <link
type="text/css" /> and the link does open the relevant file and thanks for the 5 mistakes link.
soon wit findings.
Feb 20, 2012 11:17 AM|mad-halfling|LINK
The web developer plugin for FF is _really_ useful, so even if you're just using FF for debugging, make sure you grab that. I tried to go over to Chrome but I found it too lacking in addons, especially things like NoScript from FF which I find invaluable.
Saying that, I do now use Chromium, but onyl to sandbox Google apps.