I have a Microsoft Sharepoint 2010 installation and when I search items with the integrated search, I see that the results have the following javascript call:
<a id="SRB_g_b60c4a68_5348_49ec_846c_b9d069d6774d_1_Title" href="javascript:openDialogSearch('https://example.com/xyz/DispForm.aspx?ID=1');" title="This is just a test"><strong>Test</strong></a>
Now I need to call the same call js function (openDialogSearch) from an external site in the same intranet.
I've seen that this funcion is defined in a inpage script which calls the following function passing the url of the resource:
SP.UI.ModalDialog.showModalDialog(url)
How could I call the same function from an external HTML page not inside Sharepoint?
I don't recommend trying to recreate the dialog infrastructure from SP:
Instead, use a dialog like jQuery dialog:
https://jqueryui.com/dialog/
You'll need to change this code to access your SP URL.
You'll also have a configuration change. You'll need to allow access to SP from your URL, otherwise, you'll get Access-Control-Allow-Origin errors. That's an update to the SP web.config file for the given site collection.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/dialog/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$("#dialog").load("PUT YOUR URL HERE").dialog({modal:true});
//$("#dialog").dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Related
I assume this is a CSS error. I downloaded the jqueryui dialog example code, (which displays as advertised in the jquery site) store it in notepad and point to it with various browsers, but the styling is wrong. There is no title bar, there is no X button, however the title text does appear and a button labeled "close" appears. There is no surrounding box either. Looks like the text and close button are sitting on top of the existing content. Is is draggable,close button works, so functionality is ok.
Here is the code take from the jqueryui site.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
The X button is showing fine here, if you'r using jquery ui locally you must add images folder
So I have an index.html file with the following text:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Wade Game Engine</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="wade_1.5.js"></script>
<script src="wade.ifx_1.0.js"></script>
<script src="wade.particles_1.0.1.js"></script>
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
</head>
<body>
<div id="container" style="border:0; width:800px; height:600px;">
<div id="wade_main_div" width="800" height="600" tabindex="1"></div>
</div>
<div id="chromeFix"></div>
<div id="chromeFix2"></div>
</body>
</html>
When I try to run this using a browser (tried with google chrome and internet explorer) it just pops a window saying:
unable to load main app script app.js
So I assume the problem is here:
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
But I can't understand what's the problem...
Could anyone help me with this? It's driving me insane!
It could be that there is an error in app.js (so it isn't a valid .js file), or it could be that your browser is not allowing you to load local scripts asynchronously.
With Chrome, you could add --allow-file-access-from-files as a command line argument. Note that you only need to do this if you're using local files - if the files are hosted on a web server, it should just work without all this.
Alternatively, you can include app.js with the other script tags that you have in your HTML file, and just call wade.init() without passing 'app.js' to it
Do you have an app.js file? I haven't used this game engine but looking at its documentation, it appears that the init() method takes a mandatory parameter appScript, containing the filename of the app. In your case this would be app.js.
Make sure that you have the file app.js included in the same directory as your index.html file.
Hope this helps.
I have an issue with cordova that i don't understand how to handle relatively to the opening of the same page more than once.
Suppose that i have two basic html files like this with cordova and jquery mobile support:
index.html
<!DOCTYPE html>
<html>
<head>
<title>
ciao
</title>
<meta charset="UTF-8">
<!-- cordova -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<!-- jquery mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.css" />
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jquery-mobile/jquery.mobile.js"></script>
<!-- initialization files -->
<script src="js/mainjs.js"></script>
</head>
<body>
<section id="index" data-role="page" data-fullscreen="true">
<div data-role="content">
/*...*/
<a href="mappa.html">
<img src="img/map.png" />
</a>
/*...*/
</div>
</section>
</body>
</html>
mappa.html
<!DOCTYPE html>
<html>
<head>
<title>
mappa
</title>
<meta charset="UTF-8">
<!-- cordova -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<!-- jquery mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.css" />
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jquery-mobile/jquery.mobile.js"></script>
</head>
<body>
<section id="mappa" data-role="page" data-fullscreen="true">
<div data-role="content">
/* code*/
</div>
</section>
</body>
</html>
Now i need to load data in the mappa.html file so i use an handler that i choose to load in the mainjs.js file included in the index like this.
$(document).ready(function() {
console.log("deviceready");
$(document).on("pageshow","#mappa",function(){ //pageshow is thrown each time
/*code*/
});
});
If i use the code above each time i load the page all the handler start again and it's very user unfriendly in case of long operation like data downloading.
So i tried this handler
$(document).one("pageshow","#mappa",function(){ });
But the second time i enter in the mappa.html page simply is blank because the handler does't work 2 times.
So how can i maintain the page loaded?
EDIT: In this specific case i need to load a map and with this code
$(document).on("pageshow","#mappa",function(){ //pageshow is thrown each time
console.log("dentro script");
//setting div height
$("#map_canvas").height( $(window).height() - $("div[data-role='header']").height() - 32 );
//since page show is thrown each time i use a session storage variable
//so i make the init map only one time
if( !sessionStorage.mapinit ) {
console.log("----------mapinit is not set");
sessionStorage.mapinit=1;
console.log("----------mapinit=1");
// Initialize the map plugin
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);
map.setMyLocationEnabled(true);
var pisaCenter = new plugin.google.maps.LatLng(43.723072, 10.396585);
map.setCenter(pisaCenter);
map.setZoom(13);
map.one(plugin.google.maps.event.MAP_READY, onMapInit);
} else {
console.log("----------map already set");
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);
}
});
and it works fine thanks to
map.one(plugin.google.maps.event.MAP_READY, onMapInit);
that execute the onMapInit function only once.
But in a case like this one
<body>
<script>
$.support.cors=true;
$.mobile.allowCrossDomainPages = true;
$.getJSON('http://.../prestazioni.php?prestazioni=tutto&callback=?',function(data){
$.each(data, function(i, dat){
$("#listview").append('<li>'+dat.rep+'</li>');
});
$('#listview').listview('refresh');
});
</script>
</body>
it's absurd that i need to download data every time i open the page
The main issue is related to jquery mobile and how it load pages.
So in my case i use multiple html files and jquery does't cache the open pages; this behavoour can be overwritten adding data-dom-cache="true" at the page like this
<section id="prestazioni" data-role="page" data-fullscreen="true" data-dom-cache="true">
This works very well. The page remains loaded but it's also possible to modify it using the handler.
There is also an easy route that simply consist in the creation of a single html files with multiple pages. in this case the DOM is always the same and the pages are all cached.
Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});
I'm quite new in html5 & js and i have some troubles to develop a jQuery Mobile exemple.
From this, i'm just calling another header (partial) when a product is selected to render.
_header2.php:
<!DOCTYPE html>
<head>
<title>h2: <?php echo $_GET['product']; ?> </title>
<meta charset="UTF-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<link rel='stylesheet' href='assets/css/styles_mob.css'/>
<link rel='stylesheet' href='assets/css/styles.css' />
<link href='assets/css/jquery-mobile.css?<?php echo filemtime("assets/css/jquery-mobile.css");?>' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js'></script>
</script>
<script type='text/javascript'>
function mymessage(msg)
{
if(!msg) msg="?";
alert(msg);
}
</script>
</head>
<body onload="mymessage('onload !')">
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
Home
<h1> <?php echo $title?></h1>
</div>
<div data-role="content">
Header code appair correctly on the generated page but js call of mymessage() in body tag doesn't work. Same problem when i try to call it from another partial code (_product.php) :
<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>
...concole return: referenceError: mymessage is not defined
Everything rock only when a refreshing the current page !!
I've rode some posts (1, 2, 3) with similar problem but i'm still lost.
Any idea please ?
You're missing the <html> tag. You also have an extra </script> closing tag. This could potentially lead to your error.
There are all sorts of strange coding styles and errors like missing the <html> tag, an extra </script> closing tag, missing the closing tag on your anchor in <li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>, and list items should be inside <ul></ul>.
Try this code, it should work. Then analyze it and learn!
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>h2: <?php echo $_GET['product'];?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<link rel="stylesheet" type="text/css" href="assets/css/styles_mob.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<!-- this next line makes me wonder.. why?! -->
<link rel="stylesheet" type="text/css" href="assets/css/jquery-mobile.css?<?php echo filemtime('assets/css/jquery-mobile.css');?>">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript">//<![CDATA[
function mymessage(msg){
msg=msg||'?'; //the usual way to provide defaults
alert(msg);
}
window.onload=function(){ //setting your onload event.
mymessage('onload !');
};
//]]>
</script>
</head><body>
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
Home
<h1><?php echo $title;?></h1>
</div>
<div data-role="content">
<ul> <!-- Here is your link, working -->
<li>...</li>
</ul>
<!-- added some closing tags for demo-sake -->
</div></div>
</body></html>
PS: since all the beginner errors and the fact that this is just part of your code, I strongly assume the rest of your code has such strange error's to.
Good Luck!!
UPDATE:
Depending on what you'd like to accomplish on page-load, jQuery Mobile might completely change the ballpark.
As can be read in jQuery Mobile's documentation:
By default all navigation within jQuery Mobile is based on changes and
updates to location.hash. Whenever possible, page changes will use a
smooth transition between the current "page" and the next, whether it
is either already present in the DOM, or is automatically loaded via
Ajax.
Another quote from the documentation:
Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This means that the regular techniques described will only fire when you first visit the page, not while navigating the page ajax-style.
Thus in jQuery mobile you must use pageinit or pageshow or one of the other events that are explained in the documentation that suit your exact purpose.
Example how to get pageinit fire for every page (tested live on your site):
$(document).on('pageinit','[data-role=page]', function(){
mymessage('hihi');
});
Or alternatively you could turn off ajax in jQuery Mobile, like this (depends on version):
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});