Get unique data about clicked button in Phonegap - javascript

I have my simple Phonegap app, which is based on tabbed layout. On one of these tabs I have list of tags (more than one). All of these have buttons to edit and delete. Its like this:
<div class="tag-buttons" uid="TAG_ID">
<button class="edit-tag btn btn-default btn-sm">Edit</button>
<button id="aaa" class="remove-tag btn btn-danger btn-sm" onclick="removeTag()">Remove</button>
</div>
Now I want do handle this removeTag() function. So I have in my JS file this function:
function removeTag()
{
//controller.removeTag($(this).parent().attr("uid"));
console.log($(this));
}
Console.log and commented line are only samples. I want to know which button was clicked (I need uid value). All of buttons have this same class. $(this) is returning Window object.
Any ideas?

I had made stupid error. Now everything is working.
I had to change onclick="removeTag()" to onclick="removeTag(this)" and then in JS function was quite good. I changed function declaration to use additional argument like this:
function removeTag(button)
{
var id = $(button).parent().parent().attr("uid");
controller.popTag(id);
}

Related

Reading/Displaying different text files with one function in jQuery

I'm trying to build a notary of sorts. This notary will have different buttons and with the press of each button a different message of plain text will display in a custom div. I want all buttons to display different messages, but display them in the same div and when a different button is pressed, the former message will fade away and the new message will fade in.
I have a basic understanding of the jQuery.get() and this is my JS and HTML code that I've used to read/display one file in that custom div by clicking the button labeled "First":
function Answer() {
jQuery.get("file.txt", function(text) {
$(".answerBox").text(text);
})
};
<body>
<div class="content">
<div class="buttons">
<button class="button" type="button" onclick="Answer()">First</button>
<button class="button" type="button" onclick="Answer()">Second</button>
</div>
<div class="textBox">
<div class="answerBox">Click Any Question Button</div>
</div>
</div>
</body>
The issue comes when clicking the button labeled "Second", it reads the same file.txt and displays the same message. I am puzzled as to how I can expand this single function to encompass all 300 some odd buttons I will need and yes, each button will display a different message and will be tied to a different txt file. I really don't want to rewrite this small function 300 some times and I know there is a better way I just cannot find it.
So I've just asked this question, but I've been digging a bit more and I think I may have found something useful. I've rewritten my JS function and HTML as:
`function Answer(file) {
let list = [];
url = "files/" + file
list.push(url);
if (list.includes(url)) {
jQuery.get(url, function(text) {
$(".answerBox").fadeOut(() => {
$(".answerBox").text(text);
})
$(".answerBox").fadeIn(2000)
});
<div class="buttons">
<button class="button" type="button" onclick="Answer('file.txt')">First</button>
<button class="button" type="button" onclick="Answer('file1.txt')">Second</button>
</div>
`
This kinda solves my initial problem, but now I will need to make 300 instances of buttons in HTML. Is there any other way or is this the best I can do with what I know?

Access button class in javascript

I have a button class that is placed inside an iframe. Problem is that this button's class has such a long name and I do not understand how to reference it in my script.
<button class="PDF-dmzpd5z6ckdkxkn8 PDF-5rbqp8nfgh6e11 PDF-tma5quj Toolbar-Button Tool-Button" title="SignUp" aria-label="myButton001" type="button"></button>
I am using my javascript to reference this class as:
document.querySelector("iframe").contentWindow.document.querySelector(".PDF-dmzpd5z6ckdkxkn8").click();
The above code does not work. Do I have to provide the complete class name for reference?
I am on right track because I have another button that looks like this:
<button class="PDF-tdsfethgr51stg Next-Button Next-Previous-Button" title="Next" aria-label="Next" type="button"></button>
And I can easily call/reference it via:
document.querySelector("iframe").contentWindow.document.querySelector(".PDF-tdsfethgr51stg").click();
If selecting with class doesn't work, you can try to select with title attribute:
document.querySelector('button[title="SignUp"]');
Using Id in button is the best option
Example:
<button class="PDF-dmzpd5z6ckdkxkn8 PDF-5rbqp8nfgh6e11 PDF-tma5quj Toolbar-Button Tool-Button" title="SignUp" aria-label="myButton001" type="button" id="exbtn1"></button>
document.querySelector("iframe").contentWindow.document.querySelector("#exbtn1").click();
Note: It's best option to define the tags in Query Selector (eg. document.querySelector("iframe")[0]). The index starts from 0.

On click of a send button will trigger a function and the modal dialog is not fading out

I have tried couple of ways in jQuery for fading out a modal dialog. Please see what I have got
A sendMessage button with a text area.
<div class="sendmessage">
<textarea class="form-control" rows="2"></textarea>
<br>
<button onClick="infoAlert();" type="button" id="sendMessage" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send Message</button>
</div>
On click of the send button will call a JavaScript function infoAlert() and the jQuery fading out function is called with in that. The fading out is not happening at all.
My jsfiddle is here. Could some help to figure out the problem?
function infoAlert(){
$(document).ready (function(){
$("sendmessage").click(function(){
$("#myModal").show();
$("#myModal").fadeOut('slow', 0, function(){
$("#myModal").dialog('close');
});
});
});
}
]
[1]:
The first thing I saw in fiddle is you chose 2 bootstrap js files, which will cause the conflict. So, you have to choose one of them, not both.
The second thing is $("sendmessage").click(function(){}). It should be $('.sendmessage').
The third one is your code does not make any sense when you call div#myModal show then hide it. Bootstrap js should take care all the modal show and hide action.
If you opened up your browser debugger console, you will see that there is an error saying:
Uncaught ReferenceError: infoAlert is not defined
Basically, your infoAlert() function needs to be defined within your $(document).ready like this:
$(document).ready (function(){
function infoAlert(){
$("sendmessage").click(function(){
$("#myModal").show();
$("#myModal").fadeOut('slow', 0, function(){
$("#myModal").dialog('close');
});
});
}
});
You can read more about the $.ready() function here.
Since you have already specified the data-toggle="modal" and data-target="#myModal" HTML attributes, you don't need any javascript to achieve the same effect. Take a look at this updated fiddle with all the Javascript removed.
Also, note that in your original fiddle, you don't need to use both Bootstrap 3.2.0 and Bootstrap 2.3.2.

removing button dynamically

in this fiddle,under appointments tab,there is a add timing button.When this button is clicked then a new row is added along with another add timing button.But I did not want another add timing buttons so i made this fiddle
added a class timing
<button class="btn btn-primary timing" type="button" data-bind="click: $parent.addSlot" value="Add">Add Timing</button>
and
in js
self.addSlot = function () {
//self.schedules.push(new Model.Schedule(null));
console.log('added');
self.doctor.schedules.push(new Schedule(null));
$('.timing:last').hide();
};
now the problem in the above fiddles there is one JSON so initally only one add timing button is added but if the JSON is 2 then 2 add timings button are added like this fiddle
so can any body please tell me how will I have only on add timings button.
You can move the Add Timing button outside the table and access the $root context instead of the $parent context
<!-- ... -->
</table>
<button class="btn btn-primary timing" type="button" data-bind="click: $root.addSlot" value="Add">Add Timing</button>
This way the Add Timing button will not be duplicated with every entry. You must also remove the
$('.timing:last').hide();
Otherwise, the button will be hidden on your first adding.
See updated JSFiddle
Update:
According to Binding context, $data works equally well in this case
data-bind="click: $data.addSlot"
See another JSFiddle

How do I navigate to another page on button click with Twitter Bootstrap?

I have to render a html page residing in templates/home.html
I have a button in index.html as:
<div id="browse_app">
<button class="btn btn-large btn-info" type="button">Browse</button>
</div>
All I want to do is when I click on Browse, it takes me to home.html
I tried to write jQuery as:
// onClick on 'Browse' load the internal page
$(function(){
$('#browse_app').click(function(){
$.load('templates/home.html');
});
});
But this doesn't work since load needs to put data somewhere in current page
How do I get to the home.html on button click?
As far as I can tell you are using Twitter Bootstrap. The documentation for Buttons addresses your point:
Default buttons
Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.
This is what you want:
<div id="browse_app">
<a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>
In the worst case scenario, this way the rendering of the button won't look nice but the link will work. Using JS, your worst case scenario will render the link useless.
Use: onclick="window.location='INSERT HTML FILE HERE'" in your button tag
One I prepared earlier:
<button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">« About HerdMASTER 4</button>
I wanted to go to the directory Learn from another directory in the same folder
It's a more elegant solution using the bootstrap class that is included, meaning you don't have to hack code into your page. I wish there was a bit more functionality documentation about the various classes for bootstrap as I figured this out from the above code rather than finding it by a google search.
Use this:
$(function(){
$('#browse_app').click(function(){
window.location='templates/home.html'
});
});
Use onclick="window.open('YourPage.aspx','_self');"
For Example:
<button type="submit" onclick="window.open('YourPage.aspx','_self');" class="btn btn-default">Your Page</button>

Categories