I'm developing an ASP MVC application with ScrollSpy on one of my pages. I'm having a strange problem where it's working correctly when I run my site from localhost, but when I publish the application to a server, ScrollSpy isn't adding the active class to the <li> items.
This is the script on my page which initializes ScrollSpy.
#section scripts
{
<script>
$(document).ready(function () {
$('body').attr("data-target", "#side-nav");
$('body').attr("data-spy", "scroll");
});
</script>
}
Here's how my ScrollSpy navigation is defined.
<div id="side-nav" class="pull-left">
<ul class="affix nav nav-list nav-pills nav-stacked">
<li>First Section</li>
<li>Second Section</li>
<li>Third Section</li>
</ul>
</div>
Each section has an anchor tag defined like this
<a class="anchor" id="first-section"></a>
I verified that jquery.js and bootstrap.js are referenced correctly on the server by going to View Page Source and clicking on the link to view the .js file. I tried replacing the .min versions of the files with the same .js file that's being used on localhost, but that doesn't work.
I apologize in advance for this being a difficult to recreate problem. Please tell me if I should post any additional data to make it easier to troubleshoot.
Related
My project is asp.net MVC with VB.net. I am trying add feature of drag and drop a file. I have browsed several websites, also downloaded a code which is in C#. C# code works well. However, code in my project doesn't work. I've compared generated HTML code and they are same. Also tried by moving .css files into "/content" folder manually, adding link to .js manually in .vbhtml page [rather than script.render()]. But it didn't work. I'd tried with other JQuery file upload objects too. But none of them works. So, I thought perhaps the issue is with JQuery. So, I uninstalled it and installed it back. However, it didnt'help too. I am using JQuery 3.3.1.
Can you help ?
Main problem : Nothing happens when I drop the file. e.g. if I drop TXT file, browser just opens the TXT file as if I've dropped it in empty browser window.
HTML code is below :
<div class="row">
<div class="col-md-9">
<div id="dropzone">
<form action="/Home/Upload" class="dropzone needsclick dz-clickable" id="uploader">
<div class="dz-message needsclick">
<textarea rows="10" cols="20"></textarea>
Drop files here or click to upload.<br>
</div>
</form>
</div>
</div>
</div>
JS code is below. I can see alert "bingo" on page load.
#section scripts
<script>
$(document).ready(function () {
alert("bingo!");
Dropzone.options.uploader = {
paramName: "file",
maxFilesize: 2,
accept: function (file, done) {
if (file.name == "test.jpg") {
alert("Can't upload a test file.");
}
else {
//Show a confirm alert and display the image on the page.
alert("bingo2!");
}
}
};
});
</script>
end section
I am trying to implement ui-routing in my rails application but it is not able to find the page to which I want to route to.
The tree structure in rails that I followed is
app
assets
javascripts
angular_controllers
menu_controller.js
config
menu_config.js
templates
login.html
code for menu_config.js
angular.module('publishingApp')
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login',
{
url: '/login',
templateUrl: 'templates/login.html'
})
}]);
code for index.html
<div ng-controller="menuController">
<header ng-class="navClass">
<nav><img src="assets/sample_image.png"/>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li><a ui-sref="login">Signin</a></li>
<li>Signup</li>
</ul></nav>
</header>
<section>
<div ui-view></div>
</section>
Error which I received when I run the code on browser and click on signin menu option
GET http://localhost:3000/templates/login.html 404 (Not Found)
Now I know am doing something wrong and I don't understand how to configure rails to load the html page.
Please any help is appreciated..
Update:
I created a template folder inside public folder and removed the template folder from the app/assets/ and now everything works fine. So which way is a better way to create applications and which way should be followed?
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
I am facing a strange issue. I am trying to receive the contents of another file on main page using jquery UI tab ajax method.
jQuery( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Error message." );
});
}
});
and
<div id="tabs" class="jquery_tabs">
<ul>
<li>First Option</li>
<li>Second Option</li>
<li>Third Option</li>
</ul>
<div id="div1">
contents of tab2
</div>
<div id="div2">
contents of tab3
</div>
</div>
as you can see I am calling abc.php on first tab. It contains a form and some validation javascripts.
This works fine on Google Chrome and javascripts of abc.php works without any issue on main page.
The problem comes when I use firefox, javascript of remote file (abc.php) does not work but if I use alert() on the main page from where I am calling abc.php, javascript of abc.php works
I think I found the answer myself. I was using jQuery(document).ready(function(){ to execute Javascripts on both main page and abc.php.
Just removing the jQuery(document).ready(function(){ event from abc.php did the wonder and now It seems working on both Firefox and Chrome.
I created an MVC3 application using jQuery Mobile which has a view with multiple jQuery mobile pages nested in a list like the following.
Main Page
<div data-role="page" id="main">
<ul data-role="listview" id="main" data-divider-theme="a">
<li>
Page 1
</li>
<li>
Page 2
</li>
</ul>
</div>
Other Pages
<div data-role="page" id="page1">
....
</div>
I also created a PhoneGapp application that offers some offline content which has a simple button menu which one directs to my externally hosted MVC site.
<div data-role="page" id="mainMenu">
<div data-role="content">
<ul class="buttonMenu">
<li>
<a href="http://www.thisismymvcsite.com" data-role="button">
<img src="mvcsite.png" alt="MVC Site" />
<span>MVC Site</span> </a></li>
</ul>
</div>
</div>
Now since I am using an External Host I added the domain to the PhoneGap.plist file, like *.thisismymvcsite.* to enable wild cards for sub domains.
The Problem
When I load up the PhoneGap application everything behaves correctly, I can even navigate to my external site and PhoneGap loads up the content within the application window. The issue I am running into, is when i click on my Page 1 the transition to the other page occurs in PhoneGap BUT also spawns a window into Safari like I am navigating to an external host that is not configured. If I go back to the application I see the correct jQuery Mobile page loaded up and if I try to go back to the #mainPage the same thing happens again.
I worked around this issue by altering the AppDelegate file in XCode to detect the #
- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *absoluteUrl = [[request URL]absoluteString];
NSRange range = [absoluteUrl rangeOfString:#"#" options:NSCaseInsensitiveSearch];
if( range.location != NSNotFound ) {
return YES;
}
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
The Question
My hack job works, however there must be something I am missing, is there anything I am doing wrong which is causing this strange behavior?
Note: I am using the latest PhoneGap 1.1 and jQuery Mobile 1 RC2