Paste into text field TideSDK - javascript

I have the following code, I want a user to be able to copy or paste into a text field,
basically imitating a ctrl+c or ctrl+v
My problems are:
how to make sure the context menu only appears in text fields
how to paste the text into the region.
I have been through the docs and so far I have this NOT working:
var menu = Ti.UI.createMenu();
menu.addItem('Copy', function() {
var data =$.("#this").val()
Ti.UI.Clipboard.getData('text/plain',data);
});
menu.addItem('Paste', function() {
var data =Ti.UI.Clipboard.getData('text/plain');
$.("#this").val(data)
});
function showrightmenu(){ Ti.UI.getCurrentWindow().setContextMenu(menu);}
I could call this using oncontextmenu= "showrightmenu()" but now, how to paste something in this line:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
AM GROPING IN THE DARK. I'm a newbie to TideSDK, this is my first project.

Question 1
I'm new to TideSDK as well and might be wrong, but as far as I can tell from the API documentation, context menus are bound to a window, and displaying different context menus when right clicking different parts of the window would require you to each time change the window's context menu...
Example:
//Create different menus
var context_menu = Ti.UI.createMenu();
var copy_menu = Ti.UI.createMenu();
//Add menu items etc.
...
//Change context menus on click events depending on clicked element
$('#some-element').mousedown(function(event){
if(event.which==3){//detect right click
editor_window.setContextMenu(context_menu);
}
});
$('#text-field').mousedown(function(event){
if(event.which==3){//detext right click
editor_window.setContextMenu(copy_menu);
}
});
This way, when you click the element with id some-element, the first context menu is shown, and when you click the #text-field element, the second context menu is shown.
Note that this won't work if one element is inside the other, because then both events are fired.
Question 2
In this code you supplied:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
You want to use Ti.UI.Clipboard.getData and not Ti.UI.Clipboard.setData, since you want to get the text stored in the clipboard and then put it into the text field. Also, you might want to change $.(#this) to $("#this") or $(this).
This should work:
$("#some-element").val(Ti.UI.Clipboard.getData('text/plain'))
Remark
You seem to be confused about how to use jQuery. To select an element, you use $() and not $.(). Also, with $("#example") you select the DOM element with the id example. $(this) is used inside a function called when an event is fired, and refers to the element on which the event was fired. $("#this") is not the same as $(this). Hope that helps a bit...

Related

Link inside jQuery UI Accordion

Using jQuery UI Accordion to create dropdowns for a filter list.
http://89.151.89.43/uk/trade-essentials-column-radiators-1.html#usestorage
Inside the Header there is also a clear button (You need to select an option for it to appear) The CMS is generating this automatically, unfortunately it doesn't function because it's inside the H4 tag surrounding it.
You will see an onclick function on the clear-button, I would like to keep the button where it is but just allow it to function.
To recreate:
Go to the above link
Select an option on the left
Clear button should appear
Try click the 'Clear' button
The accordion should then close
What I want:
The function contained in the 'onclick' to clear all checkboxes that are under that header
Without seeing the source code, I can't give you an exact answer, but in general you want to do something like this:
$("#clear-button").click(function(event){
event.stopPropagation();
event.preventDefault();
log("clicked!");
});
Looking at your example page, there seems to be a lot code missing.
I would suggest something like:
$(".clear-button").on("click", function(event) {
event.preventDefault();
$(this).parent().parent().find(":checked").prop("checked", false);
});
When the button is clicked, after being generated dynamically, you will want to find the input elements that are within the parent div element. Since the button is within the h4, you have to find that parent div.
An example, not working, since I cannot find the OnFilter() function code. You could assign the click callback when the button is added instead of using the .on().
https://jsfiddle.net/Twisty/o4L504ya/

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

Preserve selection after clicking a custom button in tinyMCE issue

Here is my issue :
I have a custom button with a code onClick. This code modify the selection's parent node, and I would like that my selection stays the same after my code, but tinyMCE disable my selection and give me a caret instead.
I tried getRng() and setRng from tinyMCE API but without success, the results are pretty odd. Sometimes it works and sometimes it deactivate my selection and give me a caret instead. Plus, sometimes it works only 2 times and then my button does not respond.
Here is my code which does not work:
onclick : function() {
range_selection = tinymce.activeEditor.selection.getRng();
//Here is my own code which modify my parent node
tinymce.activeEditor.selection.setRng(range_selection);
}
Problem here is that this range is probably not applicable anymore because of a changed DOm structure. I would use a bookmark to overcome this issue:
var bookmark = ed.selection.getBookmark();
// do what you like to do here
ed.selection.`moveToBookmark`(bookmark);

how to pass arguments into an event handler to make it unique?

please run this jsfiddle as an example.
http://jsfiddle.net/AFzqt/11/
in my example, i have a link saying same as above, if you fill out the first box it will copy the value in the second box. look at the code, and look at the display. theres a reiteration of the code just to have the boxes appear twice. well... in my real use of this, i ideally want there to be about 40 of these buttons.
is there a way to do this without copying the code 40 times?
i am new to jquery, usually in another language i would just pass in arguments, but with this syntax I don't see how i can do that? how can i handle this?
feel free to dabble around on my jsfiddle, and hopefully link a new revision, with the goal of reducing the handling of those 2 'same as above' buttons into just one function with the entry id's as parameters
If you add the changeButton class to each of the buttons it will be easier to select each of them to bind the event handler:
Same as Above
Then we can select each of the elements like so:
$(".changeButton").on("click", function(e) {
//select the previous jQuery Mobile select widgets, we will use just the previous two
var $allPrev = $(this).prevAll('.ui-select').find('select');
//change the value of the immediate previous select widget to the value of the one preceding it
$($allPrev[0]).val($($allPrev[1]).val()).selectmenu("refresh");
e.preventDefault();
});
Here is a demo: http://jsfiddle.net/AFzqt/12/
This code will work for umpteen buttons since it works by using intuitive knowledge of the HTML structure (each link uses the previous two select widgets, no matter where on the page the link resides).
What about something like this?
function bind_click(button_id, target_id, origin_id) {
$(button_id).on("click", function(e) {
$(target_id).val($(origin_id).val());
$(target_id).selectmenu("refresh");
e.preventDefault();
});
}
$(function() {
bind_click("#changeButton2", "#entry_20", "#entry_18");
bind_click("#another", "#entry", "#entry2");
// More binding declarations
});

follow url before hiding anchor-tag

I have an autocomplete search form, more or less like the one used on facebook, where I start typing and a list of names shows up.
I made links of each of these names so you can open their profile page.
I also have a function on the search form's input field 'onblur', where I hide the autocomplete div with all the names. So that when I click outside it, it doesn't stay visible. The only problem now is that when I click one of the names, the pages doesn't redirect to the profile page of the anchor tag, even though the cursor does change on hover.
Anybody any idea?
This is because your hide event removes the list before the element can actually be clicked. There are couple of solutions.
First you could use a setTimeout to hide
setTimeout( function() { /* hide list */ }, 500);
In answer to your comment, no, you can't reorder events. So you will have to find a work around. There are a number of methods, but since you are using jQuery I would do it this way.
//you probably have something like this currently
$('element').blur( function() { $('results').hide(); });
//change it to something like this
$('element').blur( function() { $('results').fadeOut(300); });

Categories