I tried gmaps4rails on jQueryMobile Framework.
One page is only link to gmaps page.
Two page is gmaps4rails page.
jQueryMobile ajax page enabled.
From one page to two page don't display gmaps.
But Two page direct access is success display gmaps.
This is my repository.
https://github.com/y-hirasawa/sample-jqm-map
I want to use ajax pages, and display gmaps.
Help me.
You need to include the googlemaps javascript files in your layout:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
the map is created thanks to a window.onload callback. Since the page is already loaded, it fails. So you have to add a jquery mobile callback in your application.js:
$('#gmaps').live('pageshow',function(event){
Gmaps.loadMaps();
});
If you want this to work, you have to set an id to the page containing the google map:
<div class="page" data-role="page" id="gmaps">
Last, you must prevent double loading of scripts, so change your call to the gmaps4rails helper:
<%= gmaps4rails(#json, false, false) %>
Related
I am a newbie to MVC application development. I'm trying to add functionality to a EF table using datatables. I created my table and can access it fine (without any functionality). I followed the instructions found at: https://datatables.net/examples/basic_init/. In summary here's what I did:
I added the following lines to the <head> section of _Layout.cshtml
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<script type="text/css" src="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.css"></script>
Then I assigned an ID to the table on the Index view generated by the MVC controller:
<table id="tblServer"class="table">
Finally I added the following block of code at the end of the tag on _Layout.cshtml
<script>
$('#tblServer').dataTable();
</script>
I disabled all other references to JQuery so they're not loaded multiple times. I commented out the following sections:
#* #Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")*#
#* #Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)*#
I'm able to see the table, but no styling is available. No filtering, search functions are available either. Please help.
See screenshot here -
You need to include the JQuery library which you have commented out. Also the JQuery library should load before the JQuery.Datatable.js file. Jquery is the dependency for the jquery.datatable.js file.
So you may want to do something like in exact order:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<script type="text/css" src="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.css"></script>
I am facing a very strange problem where my javascript code does not run the first time the page is loaded. If I reload/refresh the page, the script runs fine.
After some hit-and-trial's I realized that if I remove the jquery.mobile-1.4.3.min.js library from the previous page (which redirects to my current page) then the script is running as expected.
Can anyone please help on why this is occurring and how can I resolve it ?
Update:
On opening the hpme page (which contains the link to the page containing the JS), I can see the following error in console:
Uncaught TypeError: Cannot set property 'mobile' of undefined .
Please note that this home page is basically a simple code with library declarations and html links.
Edit :
I had missed the jQuery lib earlier and hence the Uncaught TypeError.
Now, my libraries are in the following order :
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
Now there are no errors in my console, but still the JS in the next page does not run in the first load. Oddly, if I remove the jquery.mobile-1.4.3.min.js library, the JS works fine.
Single Page Model
jQuery Mobile loads external pages via Ajax; when you have a link to another page, jQM loads first page div <div data-role="page"> in that page and neglects other tags outside that div.
If you have JS code that you want to run in the loaded page, you have to place it inside page div.
<div data-role="page">
<!-- JS code -->
</div>
I have this index.html and login.html and I use a href to link from index to login. and in each index.html and login.html I import the javascript. However, it seems that only the ones come from index.html that is being loaded. so if I place the js in index.html for the login.html, it works fine. but then, we I place it separately ( another js for login.html that is not in index.html) , it doesnt work
TIA
When JQM(jQuery mobile) loads a page it uses ajax to accomplish this. When this happens all code in the <head> section is ignored. JQM looks for the data-role="page" part and inserts it into the same dom as index.html. So basically you are doing it the correct way when you add your js in the index.html page.
If you would like to compartmentalize your js code to work for certain pages use this example:
$(document).on('pageinit', '#page1', function(){
// code for #page1
});
$(document).on('pageinit', '#page2', function(){
// code for #page2
});
$(document).on('pageinit', '[data-role=page]', function(){
// this code will execute for every page that is data-role="page"
});
So go ahead and put all your code in one file. Split your code into appropriate pages like above and include that in your index.html file.
Also if you are using JQM version 1.0.1 with jQuery version 1.6.4(recommended with 1.0.1) use .delegate() instead of .on(). i.e.
$(document).delegate('#page1', 'pageinit', function(){ // notice that pageinit and #page1 are switched around for delegate
// code for #page1
}); // interesting to note that if you use delegate in jQuery 1.7.x it actually just calls the .on() method.
Note If you were making a web application instead of a phonegap app you would be smart to put your javascript in that one file and include that in every page. This way if someone is following a link or bookmarked your page they will still get the correct javascript file they need.
Anyways I hope that helps you out. Good luck!
If you are doing a window.location.href then it will load the new HTML(In you case it is login.html) If you are using this approach then you have to reload all you scripts again and hence add these scripts in all your .html pages.
<script src="cordova-1.6.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
However if you use the approach recommended by #deadlock then you will just need to load the script once. The later approach is the best one.
Please post your code, specifically how the pages link to each other, and the global config settings you set for app, if any. Like much with jQM, there are multiple practices and strategies supported for page arch.
You can also learn by using desktop browser tools and view the "Resources" to see what and when your resources are being loaded.
I don't know how to use CKEditor in Mvc2 Framework.
I tried but it will not work
<%= Html.TextAreaFor(model => model.ABSTRACT) %>
<script type="text/javascript">
$(document).ready(function() {
$("$ABSTRACT").ckeditor();
});
</script>
Change the $ with # and it should definitely works
$("#ABSTRACT").ckeditor();
also be sure to have this 2 scripts referenced in your page.
<script type="text/javascript" src="#Content.Url("~/yourpath/ckeditor/ckeditor.js")"></script>
<script type="text/javascript" src="#Content.Url("~/yourpath/ckeditor/adapters/jquery.js")"></script>
You can also consider to associate ckEditor to a class instead of the Id of controls. so with only one call you can set the editor for all the control that have that class in your apps.
Is there any way you could just use the asp.net usercontrol for ckeditor?
http://ckeditor.com/download 3rd one down.
I have not tried it in mvc but I do not see why it would not work in MVC.
I want to open the the .html file from my .js file. So I Used the $.mobile.changePage("file.html"). In the file.html have file.js. But The file.js does not call when the file.html in invoked.
THanks in advance.
first.js
$.mobile.changePage ("file.html");
file.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script src="../Scripts/file.js"/> // Could not imported
<script src="../Scripts/helperArrays.js"/> // Could not imported
<script src="../Scripts/globalVariables.js"/> // Could not imported
</head>
<body>
<div data-role="page">
<div data-role="header" data-nobackbtn="true">
<h1>Vaults</h1>
</div>
<!-- <div data-role="content" data-theme="c" id="contentVault">
Sample Vault
My Vault
</div> -->
<div data-role="content" id="content">
<ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">
<li id="listdiv" data-role="list-divider">List of Items</li>
</ul>
</div><!-- /content -->
</div>
</body>
</html>
Please help me..
When jQM loads another page through AJAX it only pulls in anything within your div[data-role="page"] and nothing else, like the head
So you can if you wanted to, include any JS/CSS within this div, the problem is that if this page is accessed multiple times any CSS will accumulate, but the problem is much worse for JS.
You are basically getting every page appended to the DOM, so the JS runs on the entire DOM (every page you loaded) if you use a global selector like $('div.someClass'), even using an ID isn't a perfect solution because if you can link to the same page twice.
For Smaller Sites
I've solved this by moving all the CSS into one file and for JS code that I want to run each time the page is loaded, I bind to the pageinit and pageshow jQM events:
<script type="text/javascript">
$("div:jqmData(role='page'):last").bind('pageinit', function(){
//your code here - $.mobile.activePage not declared
});
$("div:jqmData(role='page'):last").bind('pageshow', function(){
//your code here - $.mobile.activePage works now
});
</script>
The pageinit event runs when the page is loaded, only ever once (after it's loaded it stays in memory if you navigate back to it, even via a back button this isn't fired again), pageshow on the other hand fires everytime the page is shown, even when you navigate back to it via the back button on the browser for example.
The pageinit runs when the DOM is there, the pageshow event is only if you have some code that depends on the DOM being rendered and you need a quick reference to the active page through $.mobile.activePage or some data changed and you need to refresh this back everytime it's shown. For most purposes I only use the pageinit as a document.ready for jQM and bind my events there. Use bind for static elements, and on instead of live for dynamic elements, because live events listen at the document root, you want to listen at the page div.
For Larger Sites
For larger sites there are advantages to binding a live event to any pages and handling types of pages, this way js code isn't loaded more than once.
If you have external js files with say helper functions that you only need once put that in the head of all your pages (if there aren't too many), if you had a very big site you could probably do better by tracking which JS files have been loaded server side.
All this can be avoided by just not using AJAX to load new pages, so think about whether that transition/loading effect is worthwhile
*Here's how I handle large jQM sites: *
bind a live event to all pages/dialogs pageinit and pageshow events:
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
I reference each page with a name: <div data-role="page" data-mypage="employeelist">
In this live event you can basically have a switch statement for each page "name", and then check event.type for pageinit/pageshow or both and put your code there, then every time a page is created/shown this event will be fired, it knows what page triggered it and then calls the corresponding code
I eventually had too much code, so I built a handler object where each page's js is included in a separate js file and can register handlers with the live event
The drawback is that all your js for your entire site is loaded on the first page the user reaches, but minified even a large site is smaller than jQuery or jQM so this shouldn't be a concern. The advantage is you are no longer loading all your JS for each page through AJAX each time the user navigates to a new page.
*note: now RequireJS can make this even more manageable
Jquery mobile gets pages via AJAX and adds their content to the current page.
I saw some notices about changing the page title to the incoming one, so they are (planning?) accessing the head, but at the moment jquery mobile doesn't seem to load external js when loadin a page.
More importantly - if you use $(document).ready() it will not be triggered, because it was AJAX