I'm trying to trigger a click event that will open my href sip/tel link when user clicks the button, but it doesn't trigger the click event after the button has been pressed.
jquery code:
$('#next_button').click(function() {
var num = $(this).val();
$('#call-num'+num).trigger('click');
alert(num);
});
href code:
(999) 888-3333
<button id="next_button" value="1">Next</button>
$('#next_button').on('click', function() {
var num = $(this).val();
var call = $('#call-num'+num).attr('href');
location.href = call;
alert(call);
});
Related
I'd like add a button and let performers to copy some text to their clipboard once they click on the button. However, I found:
the element interface { {button}} does not accept an "on-click" property
the original html button tag may work, but when I add the the function to the on_click property and the js section, the page returns the error "the function does not found".
So, my question is, how I can add a user defined js function to a project? Is there any example code/project I can reference to?
Try to add the following code in TASK INTERFACE in your project:
<div>
{{field type="input" name="whatever" value=link size="L" width="70%"}}
{{button label="Copy text to clipboard" href="#" size="L"}}
</div>
<textarea class="hiddenInput"></textarea>
in onRender() in JS field:
onRender: function() {
var _document = this.getDOMElement(),
button = _document.querySelector('.button'),
hiddenInput = _document.querySelector('.hiddenInput'),
task = this;
button.addEventListener('click',function (e) {
e.preventDefault();
hiddenInput.value = task.getTask().input_values.link;
/*hiddenInput.focus();*/
hiddenInput.click();
hiddenInput.select();
document.execCommand('copy');
button.classList.add('button_disabled');
button.querySelector('.button__label').textContent = 'Done';
setTimeout(function () {
button.classList.remove('button_disabled');
button.querySelector('.button__label').textContent = 'Copy text to clipboard';
},1000)
})
},
I have a master-detail splitapp use for phone browser. Master page display the main list and when I click on an item, it will navigate to detail page.
The problem is, from detail page, I click on BackArrow to back to master page and tap again on the same item, onSelect event won't fire > no go anywhere. But if I tap on another item, it works.
In manifest.json, master viewlevel = 1 and detail viewlevel = 2.
Thanks
Below is the detail page navigation button
<Page
title="Title text"
showNavButton="true"
navButtonPress="onNavBack">
onNavBack function
onNavBack: function (oEvent) {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
// no history handle
}}
onSelect to forward
, onSelect : function(oEvent) {
var oTransferData = this.createTransferData(oContext);
this.transferData.setData(oTransferData);
...
this.getRouter().navTo(
"detail", { ZITEM : oTransferData.ZITEM }
);
}
, createTransferData : function(oContext) {
var oData = {};
oData.ZITEM = oContext.getProperty("ZITEM");
}
the list
<List
id="masterList"
noDataText="no data"
mode="SingleSelectMaster"
selectionChange="onSelect"
includeItemInSelection="true"
>
Try itemPress event instead of select (make sure item has "Active" in its type property). It fires whenever you click on item, and select only fires when the selection changes.
You need to clear the list selection
Code
var oList = sap.ui.getCore().byId("masterList");
if(oList)
oList .removeSelections(true);
Iam working with ionic and i have got a Tags input text box and save button.Whenever i enter a tag in the textbox and click save button the value entered should be saved.
This is my controller`
.controller('SinglePhotoCtrl', function($scope, $stateParams, Friends)
{
var photoDetails = Friends.get($stateParams.friendId);
$scope.displayphoto = photoDetails.url;
angular.forEach(photoDetails.tag, function(value)
{
$scope.tags=[value];
});
$scope.save = function()
{
photoDetails.tag = $scope.tags;
alert("Saved");
};
})`
the alert comes and but the value is not saved in photoDetails.tag.
and this is html code:`
<tags-input ng-model="tags" placeholder="Add Tag" min-length="1" max-length="6" tags:"sampletag" ></tags-input>
<button ng-click="save()"> Save Tag</button>
Any suggestions?
Thanks in Advance.....
I have a working query autocomplete code that completes the full_name when letters are typing. What I am trying to figure out is how to get the user_id for that goes with the full_name. I have JSON that comes back like so:
[{"full_name":"Matt","user_id":"2"},{"full_name":"Jack","user_id":"9"},{"full_name":"Ace","user_id":"10"},{"full_name":"tempaccount","user_id":"11"},{"full_name":"Garrett","user_id":"26"},{"full_name":"Joe","user_id":"29"},{"full_name":"Raptors","user_id":"32"}]
Below is my jQuery code. I am using PHPfox framework.
$(function(){
//attach autocomplete
$("#to").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
//$.getJSON("friends.php?callback=?", req, function(data) {
$.ajaxCall('phpfoxsamplee.auto', 'startsWith='+req.term)
.done(function( data ) {
//create array for response objects
var suggestions = [];
var data = $.parseJSON(data);
//process response
$.each(data, function(i, val){
//suggestions.push(val.full_name,val.user_id); (This works and shows both the full name and id in the dropdown. I want the name to be visible and the ID to goto a hidden input field)
suggestions.push({
id: val.user_id,
name: val.full_name
});
});
//pass array to callback
add(suggestions);
});
},
//define select handler
select: function(e, ui) {
//create formatted friend
alert(ui.item.full_name); //Trying to view the full_name (doesn't work)
alert(ui.item.id); // trying to view the id (doesn't work)
var friend = ui.item.full_name, (doesn't work)
//var friend = ui.item.value, (This works if I do not try to push labels with values)
span = $("<span>").text(friend),
a = $("<a>").addClass("remove").attr({
href: "javascript:",
title: "Remove " + friend
}).text("x").appendTo(span);
//add friend to friend div
span.insertBefore("#to");
$("#to").attr("disabled",true);
$("#to").attr('name','test').attr('value', 'yes');
$("#to").hide();
},
//define select handler
change: function() {
//prevent 'to' field being updated and correct position
$("#to").val("").css("top", 2);
}
});
//add click handler to friends div
$("#friends").click(function(){
//focus 'to' field
$("#to").focus();
});
//add live handler for clicks on remove links
$(".remove", document.getElementById("friends")).live("click", function(){
//remove current friend
$(this).parent().remove();
$("#to").removeAttr("disabled");
$("#to").show();
//correct 'to' field position
if($("#friends span").length === 0) {
$("#to").css("top", 0);
}
});
});
HTML
<div id=friends class=ui-help-clearfix>
<input id='to' type=text name='player[" . $num . "][name]'></input>
</div>
Consider the JQuery Autocomplete Combobox. It is not a standard widget, but you can pretty much paste their source. And it will enable you to capture values corresponding to text selections.
I have some divs that are generated dynamically with content. I add the content id to the class for the div like so:
<div class="div-1"></div>
<div class="div-3"></div>
<div class="div-6"></div>
<div class="div-8"></div>
How do I select the id for a div because I need it as a param to send via ajax. e.g. I need to get the 1 when I click on the 1st div, 3 when I click on 2nd and so on
var id = $(this).attr('class').replace('div-', '');
Or even simple
var id = this.className.replace('div-', '');
Where this points to the dom element you click on inside the click handler.
//Here instead of document it is better to specify a parent container of all divs
$(document).on('click', '[class^="div-"]', function(){
var id = this.className.replace('div-', '');
});
Try this, and remember changing "div" for your selector:
$(document).on("click", "div", function() {
var class_elem = $(this).attr("class").split("-");
var n = class_elem[1]; // This is your number
});
The correct jQuery syntax is:
$("div").click( function() {
var id = $(this).attr('class').replace('div-', '');
});