Extjs prefers your app to be a single page app, but I'd still like to be able to do things like refresh my page and keep my current location in the app, and enter a url to get directly to a particular point in the app. Is there a solution for this?
Yes, I do the same in my app. You can use the Ext JS history mechanism to do so. Have a look at this example from Sencha.
You can listen to the history change event like this
Ext.History.on('change', function(token) {
// you navigate-to-target code goes here, e.g. change the viewport content
}
You can then initiate navigation by setting the browser hash to some navigation target
document.location.hash = yourNavigationToken;
This gives you also the ability to use deep-linking and forward/backward navigation with the browser buttons.
You need to init the history:
// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();
and add an iframe and a hidden input field to your page, like in the example:
<form id="history-form" class="x-hide-display">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
Related
Salesforce interaction/console methods not executed after redirecting to other URL in CTI console softphone. I have mapped the CTI Adapter URL(for ex: http://domain1:port1/xyz/test.jsp) in softphone layouts of the call center, the interaction/console methods get executed on that particular page.
Method Like :
sforce.interaction.runApex(...);
On click event I redirect to some other URL (for ex: http://domain1:port2/abc/test1.jsp) on this page interaction/console methods not executed.
Methods Like :
sforce.console.setCustomConsoleComponentPopoutable(...);
sforce.interaction.runApex(...);
On console - "Service Cloud Toolkit API cannot be used with your browser" appears after page redirects.
Please help with the scenario
This error is caused by the validation of sfdcOriginIframe and nounce properties when sending out the window message to the top window.
Actually this two properties are populated from the window.location.search field once the softphone loaded.this search field goes like :
?sfdcIFrameOrigin=https%3A%2F%2Fap5.salesforce.com&nonce=3c1d1c360732e6754323247e711324b86d027c3c2809abb163754069d02365c5&isAdapterUrl=true&
I think they come from the src of the iframe tag
<iframe
id="SoftphoneIframe"
name="SoftphoneIframe"
allow="camera *; geolocation *; microphone *"
src="/loadSoftphone.html?sfdcIFrameOrigin=https%3A%2F%2Fap5.salesforce.com&nonce=3c1d1c360732e6754323247e711324b86d027c3c2809abb163754069d02365c5&isAdapterUrl=true"
style="display: block;"
width="100%"
height="650"
frameborder="0"
></iframe>
if you redirect the location of your softphone frame, the search field is gone, and you can't use any methodes in interaction.js anymore.
so maybe there are two approaches to resolve this problem:
retain your search field in a hidden field and bring it ot your next page as a searchQuery string;
refresh your top window just before you redirect your softphone
sforce.interaction.refreshPage();
Finally I used the second solution to fix my problem.
Code sample
I am new in angular2.I am working with angular 2 and facing issue as follows
1]I have been designed 2-3 template like email template,sms template which will take predefined data and display that data
2]I have been designed screen which contains dropdown with name like email,sms etc
email option has link to email template and same for sms.
The main thing is i want to show the selected template view as a preview of that template.Means if i select sms then the sms template will be shown in given section of the same page.(like upload image preview.)
is it possible?
Thanks ..
Yes obviously, you have to use Routuing for the same, by using routing in angular2 you will be able to
navigate throughout the pages and you can show whatever page you want to display
see also :-
https://angular.io/docs/ts/latest/guide/router.html
latest Updated to angular2 RC1 (wroth reading)
https://coryrylan.com/blog/introduction-to-angular-2-routing
Angular 2 router examples + #Routes typing support
How to use child routes in Angular 2.
I am trying to do userLogin through a webservice. The project is using Bootstrap for css and angular in the backend.
I am having a login Screen with a hidden div that is shoown when user click login button.Its a animated login icon.
Everything is working fine.I just want to make the background that is whole page including the userId, password uneditable as well as signin button unclickable.
When you hit the login button you can make the input(s) and button(s) disabled to make sure they remain unchanged.
When you get a result from your REST call you can re-enable them all.
You probably already have a variable $scope.loginIn on your controller scope since you are showing an animated login icon while login. If you don't, add it to your login function, something like :
$scope.login = function(...) {
$scope.loginIn = true;
loginService.login(...).finally() {
$scope.loginIn = false;
}
}
then just use it on your input and buttons to disable them :
<div class="login">
<input enable="!loginIn">...</input>
<button enable="!loginIn">...</button>
</div>
(That might be off the context, if you give me some code I could probably be more accurate in my answer)
How can i save the textfields and checkboxes to the DB without reloading the page?
Just to click on the button and then its in the DB. Nothing more. I don't get it. This means when I have a textfield where I type in a content -> then click the button, the content from the textfield should be in the DB and should do nothing more (not reloading the page, or go to top for example).
I don't get it.
EDIT:
When I have a a <div> tag with the id="testid" in the standard create.gsp:
def create() {
def mytestInstance = new Mytest(params)
}
and the <g:remoteLink> which should save this part looks like:
<g:remoteLink class="button" name="myForm" update="testid"
url="[controller:'mytest', action: 'create']" value="....." />
That does not work because the page is refreshing or something like this and the things are not stored in the DB, plus they are not in the textfields any more.
Use <g:formRemote> or <g:submitToRemote> to do the form submission with an Ajax call.
You should be able to use the formRemote tag to send the data to a controller via Ajax
Edit
As it says on that page;
This tag also requires the use of either the <g:javascript/>(link) or <g:setProvider/>(link) tags. See the AJAX section of the user guide to find out more.
Have you done that?
I've been trying to get this to work for 4 days now, with no luck.
I have a very simple jquery mobile app.
The app has a header, content and footer.
The footer is being generated dynamically on the 'pagecreate' event because it is always the same and I don't want to have its HTML in every page.
So I do something like this:
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));
});
DrawHeader() and DrawFooter() simply prepent the header div to the page and append the footer div.
SetFooterEvents() sets the onclick events of the footer navbar buttons and SetActiveFooter() is SUPPOSED to set the ui-btn-active to the current active footer link.
To do this, I've added the data-active-footer attribute to the page div and the data-name attribute to the navbar elements. I'm searching for the current element according to the data-active-footer in the page and apply the ui-btn-active class.
function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");}
So far so good.
Now, say I've changed to a page and the navbar is lit (it has successfully recieved the ui-btn-active class), and I'm clicking on the previous page, the lit item in the navbar doesnt change back!
If i click on the the page again (ie: changed to second page [corrent lit], changed back to first page [second page is still lit], then clicked on first page again) it does light the navbar button.
What I found out was that jqm also changed the navbar of the previous page when I'm changing the navbar of the current page in the 'pagecreate' event.
I've tried to overwrite this behaviour using the 'pageshow' event, that is, trying to apply the ui-btn-active class to the current element in the navbar but the problem is that $(this) and e.currentTarget objects in the 'pageshow' event DO NOT CONTAIN THE FOOTER ELEMENT!!!
$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0
alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});
Any ideas?!
Thanks.
Before delving into more detail, please try adding .ui-state-persist together with .ui-btn-active
This makes sure active buttons stay active when you changePage and the footer is the same. Also make sure, all your footers have the same data-id attribute.
On a sidenote: check the latest blog post about upcoming features for jqm 1.1 - it will include a fetch link utility, which allows to ajax-update portions of a page. So you could use this functionality to grab and insert a footer on every page. I'm trying the same right now with a login form, which I need on every page.
Have you tried "ui-state-persist"?
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Home</li>
<li>Favorite</li>
</ul>
</div>
I still dont know why but jqm moves the footer from page to page, eventhough I assign a new footer to each page.
Maybe because I set the same ID to all of them.
Anyhow, I used this workaround to solve the problem:
On the 'pagebeforeshow' event, I set the button I want active to all the footers in the documents. I've set a special data-name attribute to each navbar button, I give it the 'ui-btn-active' class after removing it from the rest of the items.
var $footers = $(document).find('div[data-role="footer"]');
$footers.find('a').removeClass("ui-btn-active");
$footers.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");