Adding HTML Button to Dynamics CRM 2016 Form - javascript

What I'm attempting to do is add an HTML button that will trigger as really simple javascript function.
Essentially onclick, I want to see if a field contains a value of 0.00 - if so remove that value. Or, if the field does not contain data, add in the value of 0.00 so it should alternate between those two values.
<html>
<head>
</head>
<body>
<button onclick="ReCalc">Re-Calculate Balance</button>
<script>
function ReCalc() {
var BalanceWriteOff = Xrm.Page.getAttribute("jucy_balancewriteoff").getValue();
if ((BalanceWriteOff) ==null)
Xrm.Page.getAttribute("balancewriteoff").setValue("0");
Xrm.Page.data.entity.save();
if ((BalanceWriteOff) =="0")
Xrm.Page.getAttribute("jucy_balancewriteoff").setValue(null);
Xrm.Page.data.entity.save();
return;
}
</script>
</body>
</html>
When I try to run this on the form where the HTML element has been placed. Nothing is happening. I've thrown in some break points at the var and both if statements and I'm not getting a break when I'm triggering the onclick event.
I'm kind of stumped here. If anyone has any insights for me that would be awesome

Oops! In your onclick attribute you forgot to invoke the method.
To fix this, simply change onclick="ReCalc" to onclick="ReCalc()".
Here's a code pen to show you it works now - https://codepen.io/trentrand/pen/Jyomgr

To access CRM form fields from an HTML web resource, add this script to the HTML:
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
and prepend "parent" to the Xrm.Page object:
parent.Xrm.Page.getAttribute("jucy_balancewriteoff").getValue();

Related

How to use keypress event in an iframe input from its parent page?

Assume I have an iframe in my HTML webpage that contains a part of my HTML data. It has an input for a search text box. I want, when I write something inside the input, using onkeypress event, I can show the data in the span.
How can I do this?
I read many different suggestions but none of them worked correctly for me!
Note that pages are at same domain but I don't have access to the iframe page code!
Can anyone help me writing it?
Here is the simplified code of what I need:
$(document).ready(function() {
$('#iframeDoc').ready(function(){
$(this).contents().on('keypress', function(event) {
// add pressed keys to span });
});
$('#iframeDoc').attr("src","JavaScript:'iframe content'");
});
Main page HTML:
<html>
<body>
<iframe id="iframeDoc" src="iframepage.html"></iframe>
</body>
</html>
iframepage html:
<html>
<body>
<input type="text" />
<span id="result"></span>
</body>
</html>
A generic function to capture any keyup events within the iframe, e.g.
$(document.getElementById('frame-id').contentWindow.document).keyup(function(e){
//code here
});
Separately you can access elements in iframes with code like (note that I added an ID to your input element):
$('#iframe').contents().find('#element_id');
So putting them together, could you not do something like:
$(document.getElementById('frame-id').contentWindow.document).keyup(function(e){
if($('#iframe').contents().find('#element_id').is(":focus")){
//code here
}
});
Fiddle of what I think is working example for your code:
https://jsfiddle.net/42j45kmn/7/

click a button on a web site automatically with javascript

I modify a code like that, for click a checkbox.
Such as,
Is there a any problem about button name or id. I could see just name and class. Is this a problem for work?
<html>
<head>
</head>
<body>
<button>Giris</button>
</body>
<script type="text/javascript">
var chkA5 = "button" class=formCheckBox type=checkbox value=ON name=chkA5
window.onload = function() {
document.getElementById("chkA5").checked = true
});
}
</script>
</html>
I copied all chechbox button properties on web site (F12 + Slect Element + click to check box) and pasted in my script. But I really confused, when I write a code in script, describing works for new things which I add or create. On this web site which I want to click a chechbox on has already buttons and text/check box. How can I create a connect with each other my scrips and web site.
In brief; I couldn't connect my scripts to web site's button and because of that I couldn't do any operation. Am I right?
How can I solve this problem? On picture which I shared, there are some code marked in a red square. This code works for desciribe some element in my scribs?
When we use document.get.ElementById().checked =true, on web site's element properties's has not a id? It has name and class.
Problem 1: getElementById should be getElementByName
Based on your screenshot, the input item you are trying to reference is:
<input name="chkA5" class="formCheckBox" type="checkbox" value="ON"></input>
and you are trying to getElementById()
document.getElementById("chkA5").checked = true
However, there is no id declared, so you will have to get the item by the name, using getElementByName():
document.getElementsByName("chkA5")[0].checked = true;
Problem 2: Your javascript has errors
This line will cause your script block fail:
var chkA5 = "button" class=formCheckBox type=checkbox value=ON name=chkA5
If you require a complete code sample, here is an example:
<html>
<head>
</head>
<body>
<input name="chkA5" class="formCheckBox" type="checkbox" value="ON"></input>
</body>
<script>
(function() {
document.getElementsByName("chkA5")[0].checked = true;
})();
</script>
</html>
Note: Make sure that the script block is at the end of your html, like in your example code provided.

javascript split text into list of words and then dynamically added to div, form tag messing it up

I was testing this code out in an asp.net webform as I am looking to split a text into a list or words in javascript and have each added to its own div.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_split
However in an asp.net webform, the sample code alone produces strange behavior, and the result appears and disappears. Simply adding the form tags to the online sample reproduces the behavior.
<form id="form1" runat="server">
</form>
Is there a workaround for this or alternative ideas to do this in javascript?
Thanks
The behavior you are experiencing is happening because the button is triggering a postback to the server. This essentially reloads the page which is why it appears as though the text is appearing then disappearing right away.
You can fix this by adding in a return false; after onclick="myfunction()" like this:
<form id="form1" runat="server">
<p>Click the button to display the array values after the split.</p>
<button onclick="myFunction();return false;">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "How are you doing today?";
var res = str.split(" ");
document.getElementById("demo").innerHTML = res;
}
</script>
</form>
However, I do not recommend using the onclick attribute to call a JavaScript function as there are better ways to do this. For the purpose of your example, I provided the simplest solution to the problem, but I want to make you aware that there are better ways to handle this.
As an extension to Howard Renollet's explanation for the form behavior:
A <button> element has different types. W3Schools mentions that "different browsers may use different default types for the element."
When in a form, the submit and reset types will actually do things to the form! In order to put a button into a form without it submitting the form, set the type to button:
<form>
<button type="button">Yay, I won't submit this form!</button>
</form>

How to find active tag formats using jQuery?

I have a situation with sample code as follows:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>
<h1>The header</h1>
<div>
matter ia always matter matter ia <strong>bold matter</strong> matter matter <em>italics matter</em>matter ia <em><strong>bold italics matter</strong></em>lways matter
</div>
</p>
</body>
</html>
I am just trying to retrieve the specific tags like body->p->div->em->strong when I click on "bold italics matter" using jQuery. Is there any standard method to retrieve as per the click event?
If you wan to get the tag name of the element which is clicked, then you can use:
$('*').click(function(e) {
e.stopPropagation();
console.log($(this).prop('tagName'));
});
Fiddle Demo
I'm not completely sure about what you are trying to accomplish. If you are trying to retrieve the tag itself that the text is contained in, i would recommend that you put a <span> tag in around the the text in question and do an onclick="function()" or simply put the onclick right on the <strong> tag.
As far the the JQuery/Javascript goes, if you want to retrieve the content, it looks like
var foo = document.getElementById.innerHTMl("id");
However, this requires you to have an id in your tags which is probably the best, if not
'standard' method of retrieving the content that is within the tag.
After reading your comments, i am editing this post:
The best way to get the parent elements is to use the JQUery .parent() function. I'd imagine that you would just recursively state something like this:
var foo = $("nameofelement").parent();
I hope this is more of what your looking for.
Thanks for contributing everybody. At last I made it myself with the following code.
$(document.body).click(function(e){
var Tags=[], Target=e.target, stat_msg="";
Tags.push(Target.tagName);
while($(Target).parent().get(0).tagName!=="BODY")
{
Tags.push($(Target).parent().get(0).tagName);
Target=$(Target).parent();
}
Tags.push("BODY");
for(i=Tags.length;i>0;i--)
stat_msg=stat_msg+Tags[i-1]+" ";
alert(stat_msg);
});

Newbie to jQuery and get function

I am completely new to jQuery. I can't find any good documentation on the get function and was wondering if I could get some help.
I have an HTML page called me.html with just a single div called me. I want to use the following page to get the contents within the div. Even a google in the right direction would help. Thanks so much
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<form id="form" runat="server">
<div>
<div id="me">
</div>
</div>
</form>
</body>
</html>
you don't need to use get(). This simple script should do it
<script>
var contentsOfMe = $('#me').html();
</script>
get is used for loading data from an url. You seem to be wanting to get the contents of a div
as in $("#me").text()
What about using the great documentation provided at http://api.jquery.com/jQuery.get/
EDIT. If you want to just get the text, use var myText=$('#me').html();, and if the html, use var myHtml=$('#me').html();
You will find the documentation for the function get here : http://api.jquery.com/jQuery.get/
But get is to perform an ajax request get on your server so I don't think that's what you need.
In jquery, most of the time you will "select" an element using jquery selector : $("#id")
This will select $(), this will say you are selecting an element using his id $("#name_of_the_id").
Then, you will have an object which will represent the selected element.
If you want to get all the html inside this element do :
function getHtmlFromElementId(id)
{
var element = $("#" + id);
var html = element.html();
return html;
}
Printing the return of this function will print all html code inside the element selected.
If you are seaching for a good tutorial on jquery, the w3schools' one is really good:
http://www.w3schools.com/jquery/jquery_examples.asp

Categories