I'm creating an extension for a site so that when a user types :) it changes to a graphical emotion. It all works fine when I refresh the page.
The problem is, when a user on the site types a message it's done using ajax, so there is no page load. I need a way to reload the content script, or to change the ASCII emotion to an image without reloading the page.
Is this possible?
You can listen for keyup events on the textarea or form submits if you only want to change the emotion at the end. jQuery().on() should let you do this. For example $('#textarea').on('keyup', changeEmot) or $('#form').on('submit', changeEmot). You may have to play around with the selectors and the events you get the gist.
Related
I have a form with action attribute and within: input text and submit. When the user presses submit, the information they provided will be used to send a text message using Twilio. My question is how do I do this without reloading the page or going to another a page? Instead, I would rather have a cool small animation that displays whether it sent successfully or not, with the page remaining the same.
Thank you for your help. Much appreciated!
I basically did what zeronone said with listener on submit event, but instead wrote "return false;" preventing the page reload. I then included ajax, and the rest of the code remained basically the same.
I have an issue with the dynamic content control in ExtLib. Every time I compile my xpage the dynamic content control flips out if I do not reload the page. I need a way to control this, like an onerror event on the control.
this is wahat's happening
I open my webpage, the dynamic content control works fine
I do some changes to my xpages and build (webpage still open)
I click a link on my webpage to reload the content in the dynamic content control.
the webpage flips out and starts to reload constantly using a partial refresh url.
I use various ways to update this control. sometimes it is through a csjs link and somtimes it is per interval using XSP.partialRefreshGet() so I guess I need a way to know if the dynamic content control is available before calling it, or let the control notify me somehow that is is not available
any idea?
Thanks
Thomas
When you change an XPage you must do a manual full reload of that page in any browser. Executing any call from the stale page will not work.
I have two pages, one page for input, another page for the options, how to send value form page to another page on xPages Mobile Controls, or is there another way to make like this.
See my sample page:
1. Page 1:User Input
http://i1248.photobucket.com/albums/hh490/dannysumarnach/page_1_form_user_input.jpg
Page 2:Picklist
http://i1248.photobucket.com/albums/hh490/dannysumarnach/page_2_user_choice_PickList.jpg
note: the built-in typeahead not posible
Regards,
Danny
The in built type ahead is missing the dojo tundra.css file when using the single page app control. This file comes with Dojo its just not being included. Import this file to get the type ahead to work.
I'm unsure as to what you mean about passing value from one page to another, you can submit data to a document and open it in another page, add it to a scoped variable, add a parameter to the URL. All of these options will work.
Have a look at my blog post on this topic. There are a couple of gotchas to get around, most notably, ensuring the the page with your document datasource gets recalculated at the correct time. I'm working on a NotesIn9 on it.
Part 3 covers a couple of amendments to get it working with existing documents and includes a sample page that will work in the Extension Library Demo db. Note the extra view that needs to be created and other details in Part Two.
http://www.intec.co.uk/xpages-mobile-controls-and-value-pickers-part-three-client-side-approach-extended/
I created a Chrome extension that adds links to items (things your friends share with you) on your facebook feed. Facebook loads about 10 or 20 items on the feed on page load, and then the rest are loaded via ajax when you scroll down.
I managed to get my content script to work for the first items, but not for the rest. I've read everything i could find, and it seems that I have to reload my content script.
How can i do that considering that the URL does not change?
You can use document.addEventListener with the DOMNodeInserted event to listen for new items getting rendered in the feed. The callback will have to check each node insertion to see if it is a feed item or not. Something like the following should work.
function nodeInsertedCallback(event) { console.log(event); });
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);
Well, you can hang some time driven listener that runs every XX seconds, to verify if there's new items to work with.
Unfortunately there's no event you can hang from, fired when the page's code do some Ajax.
May be you can figure out what evet you can han from to detect the user has reached the end of the loaded item's list, knowing that de page's code will do some Ajax to retrieve more items. Then you start you time driven listenter.
I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.