I am developing a hybrid application in IBM worklight using jQuery Mobile.
My application folder structure is like this:
carbikepooling.html (default file created in jquerymobile app)
pages folder, contain files: ownerProfile.html, passengerProfile.html, createPool.html
Also validateForm.js is associated with carbikepooling.html, ownerProfile.js with ownerProfile.html, createPool.js with createPool.js
From carbikepooling.html, I change page to ownerProfile.html placed in the pages folder:
validationForm.js (associated with carbikepooling.html)
function redirectToProfile(profileId, profileType){
if(profileId == null || profileId == ""){
$("#failMessage").fadeIn();
}
else if(profileType == "Owner"){
var dataurl = '?profileID='+profileId;
$("#failMessage").fadeOut(200, function(){$("#loginSuccess").fadeIn(function(){$.mobile.changePage('pages/ownerProfile.html'+dataurl, {transition: "slide"});});});
}
else{
var dataurl = '?profileID='+profileId;
$("#failMessage").fadeOut(200, function(){$("#loginSuccess").fadeIn(function(){$.mobile.changePage('pages/passengerProfile.html'+dataurl, {transition: "slide"});});});
}
}
This works fine.
Now, I am in the ownerProfile.html file, from this file, when I change page to createPool.html file placed in the same pages folder as:
ownerProfile.js (associated with ownerProfile.html file)
$(document).undelegate('#crtPool', 'click').delegate('#crtPool', 'click', function() {
if(update1 == 1 && update2 == 1){
var dataurl1 = '?profileID='+profileId+'&name='+userName;
$.mobile.changePage('pages/createPool.html'+dataurl1, {transition: "slide"});
}
else{
alert("Oops! You have not updated all of your information. To create pool, first update your info (click the settings icon on the right top)");
}
});
Problem is that this time, the createPool.html file is not loaded because the path created to locate the file is wrong as:
GET http://192.168.42.239:10080/CarBikePooling/apps/services/preview/CarBikePooling/common/0/default/pages/pages/createPool.html
As you can see that the pages in the URL is shown two times, I don't understand why.
You did not specify in the question where is the pages folder in the app structure.
Assuming it is like this:
apps\
--- yourApp\
------ android\
------ iphone\
------ common\
--------- css\
--------- js\
--------- my.html
------ pages\
--------- my1.html
--------- my2.html
--------- my3.html
I think it's because once you changePage from the main HTML file, which is at apps\yourApp\common you are now in apps\yourApp\pages...
So when you want to move from a file in pages\ to another file in pages\, since you are already in pages\, simply call to the HTML file. Meaning,
Change this:
$.mobile.changePage('pages/createPool.html'+dataurl1, {transition: "slide"});
To this:
$.mobile.changePage('createPool.html'+dataurl1, {transition: "slide"});
Alternatively, go a level up and back in, meaning: ../pages/createPool.html.
Related
This is so simple I don't get how it could possibly go wrong. I'm trying to get a simple intra-page link to behave.
(If it's relevant, this is an angular 2 app, using routing.)
Here is a typical page:
Skip to main content
<div class="page-body">
<main>
<div class="content-body" id="content-start">
<h1>Employee Search</h1>
</div>
<main>
</div>
The URL of this page (in my dev env) is
http://localhost:49974/app/employee/search
When I click (or focus then press enter) on Skip to main content it should go to
http://localhost:49974/app/employee/search#content-start
but instead goes to
http://localhost:49974/app#content-start
(and then immediately switches to
http://localhost:49974/app/#content-start
)
I can't have messed up the linking itself; this must have something to do with how the routing is working.
It looks like I have to do it this way:
<a href="app/request/timeoff#content-start">
But that doesn't seem correct.
I don't know if this is a the correct way, or the angular way, but it works:
app.component.html:
Skip to main content
app.component.ts
export class AppComponent {
pageURL: string;
ngDoCheck() {
this.pageURL = window.location.href;
var link = this.pageURL.indexOf('#content-start');
if (link > -1) {
console.log(this.pageURL.substring(0, link));
this.pageURL = this.pageURL.substring(0, link);
}
}
}
every-page.html:
<h1 class="content-body" id="content-start">Page</h1>
Not sure if ngDoCheck is the appropriate event use.
Full disclosure: app.component is a wrapper - with header and the 'skip to content' link that contains all the pages and their content.
So, the logic for the 'skip to content' link exists once, while the actual content target #content-start lives in the top of each content page.
EDIT:
The solution I am seeking is a command line to be run to accomplish this from a batch file in Windows.
How would I mimic a browser function to open a URL with a specific target so that if that tab is already open it will load there instead of creating a new tab?
So instead of the default http://url.com with the target "_blank", I could change this to "w00t", etc.
I am using Chrome exclusively, so if this were to be a Chrome specific command, that would be acceptable.
You could create a HTML-page and add the following code like this:
<script>
var url = getQueryVariable("url");
var target = getQueryVariable("target");
window.open(url,target);
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
</script>
I have this script hosted here: scriptcoded.github.io/redirect
You could then call it from a batch-file using this command:
START scriptcoded.github.io/redirect?url=http://www.google.com&target=w00t
Use ?url=http://www.google.com&target=_blank to set the redirect.
The only problems I find with this method is that some browsers blocks the new window and that the tab won't close. Yes, we could use window.close();, but it will only close tabs that were opened by the webpage itself.
Hope it helps!
set name for html tag of target page like this:
<html name="w00t">
Note: A link to URL with target name, sets the name for target window automatically:
Google
I have some code that loads an html file in a ms-webview within a Windows 8 store app (winJS) and I'm having an issue checking the URL src of the ms-webview. Basically, the user is able to navigate within the local html files, but I want to detect when they are back on the "home" screen...
var home = "ms-appdata://local/somefile.html";
myWebView.addEventListener("MSWebViewContentLoading", function(e) {
console.log(myWebView.src); // something like: ms-local-stream://[app_key]/somefile.html
console.log(e.uri); // same as above
if (myWebView.src === home) {
// nope...
}
});
myWebView.navigate(home);
As you can see above, the webview doesn't seem to give me a way to get the URL that I actually navigated to... Thoughts?
And yes, I could inspect the ms-local-stream URL path for the file I'm looking for, but surely there's a way to get the URL that was navigate to from the webview??
I am using the jquery-ui version of Blueimp upload and I like how I can format a table and display files that were just uploaded. But I'd like to use it as a file manager as well so I want to preload existing files and display than as if they were just uploaded. How can I do that? A sample link to where someone else has addressed this would suffice. BTW, I am uploading several different file types, not just images.
Thanks!
Or without an ajax call:
Prepare array containing details of existing files, e.g:
var files = [
{
"name":"fileName.jpg",
"size":775702,
"type":"image/jpeg",
"url":"http://mydomain.com/files/fileName.jpg",
"deleteUrl":"http://mydomain.com/files/fileName.jpg",
"deleteType":"DELETE"
},
{
"name":"file2.jpg",
"size":68222,
"type":"image/jpeg",
"url":"http://mydomain.com/files/file2.jpg",
"deleteUrl":"http://mydomain.com/files/file2.jpg",
"deleteType":"DELETE"
}
];
Call done callback
var $form = $('#fileupload');
// Init fileuploader if not initialized
// $form.fileupload();
$form.fileupload('option', 'done').call($form, $.Event('done'), {result: {files: files}});
I also had the same problem. It is not magic how it works. I recommend to examine the UploadHandler.php file. Then you will be able to modify this plugin accordind to your needs.
The code above in your second post is just an ajax call to the uploader script (by default index.php in server/php/ folder). The call method is set to "get" by default in $.ajax object.
Open the UploadHandler.php file and go to the class method "initialize(...)". You will see how the call with "get" handled. UploadHandler calls the class method this->get(.:.) to prepare and send the list of existing files. If you use other upload directory, you need pass a parameter to the UploadHänder. Simply chage the url property in the $.ajax object like :
url: $('#fileupload').fileupload('option', 'url')+'?otherDir='+myDir,
then you should initialize the option property of the UploadHandler before you create a new UploadHandler object like this:
$otherDir = trim($_REQUEST['otherDir']);
$otherDir_url = [anyURL] .'/'.$otherDir;//so that the files can be downloaded by clicking on the link
$options = array(
'upload_dir'=> $otherDir,
'upload_url'=> $otherDir_url,
);
$upload_handler = new UploadHandler($options);
Found the code in the main js file... It wasn't obvious how it worked. Got it working just fine.
// Load existing files:
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).done(function (result) {
$(this).fileupload('option', 'done').call(this, null, {result: result});
});
If any of you looking at this is doing it in .NET, find this: (for me it is in application.js
For a fairly recent version, there is a function
// Load existing files:
$.getJSON($('#fileupload form').prop('action'), function(files) {
files = somethingelse;
var fu = $('#fileupload').data('fileupload');
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function() {
// Fix for IE7 and lower:
$(this).show();
});
});
Inside the application.js
I'm doing it for .NET though, and actually needed this gone.
Then set your somethingelse to either your files or "" depending on what you want to show. If you remove the line files = somethingelse then it will preload all files from the folder.
I am loading two MVC Partial Views in jQuery UI dialog using following code for editing and adding a record:
$.get(url, function(data)
{
dialogDiv.html(data);
var $form = $(formid);
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
var dat = $form.data("unobtrusiveValidation");
var opts = dat ? dat.options || '' : '';
$form.validate(opts);
//THIS FUNCTION ADDS PLUGINS ETC.
runEditCreateStartScripts();
dialogDiv.dialog('open');
});
Following is the function that wires-up chosen functionality.
function runEditCreateStartScripts(){
$("select.chzn-select").chosen(
{
no_results_text: "no match",
allow_single_deselect: true
});
}
Everything is perfect on first call. After opening one dialog say edit a few times everything is broken. There is only hyperlink available in place of chosen stuff. This also happens if I open one dialog say add and then second dialog. The bindings and other functionality from first one (add) is gone.
Any insights on why this might be happening?
The problem that caused my issue was that the modals I was loading via AJAX had inputs with the SAME ID as an input field that was already on the page (using Django that has generic ID generators for model fields). This caused collision between the two inputs when re-triggering .chosen() on the selector. When I made the ID fields unique, all worked as expected.
Hope this would have helped.