We Keep Coding

How to get value from a function in JavaScript

I'm trying to run a function when my page id is true, which is working well and good, but I'm not able to get the values of the function.
What I wanted to achieve is I wanted to load the image URL from the calendar data, into the page which id is true for example if (page1) is true then I wanted to do a query search of image id in that page and load the image from the calendar data.
The getImageUrl(events[0].img); gives me the image URL correctly but when I run this function inside the if (page.id === "page1") {getImageUrl()} the image URL is undefined. Is there a way or a different workaround for this? Is this possible to do? Please advise me. I'm quite new to the development.
document.addEventListener("init", function (event) {
let page = event.target;
if (page.id === "page1") {
// if page id is true this function will execute but im not able to get the image says undefined how do i get the function working right.
getImageUrl();
} else if (page.id === "page2") {
//do something
}
});
//The below Queryselector id is avialble only for PAGE 1 where i want to run this function.
function getImageUrl(url) {
document.querySelector("#image-div").innerHTML += `<img src="${url}" />`;
}
//LOAD Calender and passing json ImageURLdata into the getImageUrl function
function loadCalender() {
$("#container").simpleCalendar({
onCalendarLoad : function (date, events) {
getImageUrl(events[0].img);
console.log(events[0].img);
}
}

I am not quite sure what you want. But I believe this is what you are trying.
document.addEventListener("init", function (event) {
let page = event.target;
var setImage = function (url) {
var imgDiv = document.getElementById("image-div");
var img = document.createElement('img');
img.src = url;
imgDiv.appendChild(img);
}
$("#container").simpleCalendar({
onCalendarLoad : function (date, events) {
if (page.id === 'page1') {
setImage(events[0].img);
} else if (page.id === 'page2') {
// do something else
}
}
}
}

I don't really get what you try to do here.
the getImageUrl(url) function is more a setImageUrl... you are setting a value
the getImageUrl does not return any value so again something which does not make sense at all please provide a better code

AJAX call not firing from inside if statement

I have the following code. There is a button in the UI that when clicked executes the if statement. I pass in a URL from a database and compare it to the current URL the user is on. If they match I want to run the code below, else I want to open the correct tab then run the code below.
With this code below I mean everything below starting from $('#sceanrioDropdownList').change(function () {...}. The code then checks a drop down and gets the selected Id from which an AJAX call is made to my web API that uses that Id in a stored procedure to return the results. The returned data is then iterated over and stored in variables which I am using to append to specific inputs, buttons and drop downs.
This is what I have so far and I think I have developed this correctly. The issue that I am currently having is that the UI wants everything from ... to be run if the if statement is true. I have tried CTRL+C and CTRL+V to copy the code into the if statement. I have also tried putting it in a new function and referencing that function n the if statement. Both do not work and I was using console.log to inspect the returned data.
It does however when I attempt to call it from inside i statement it doesn't return any data or error. It just doesn't seem to fire.
Is there a way in which I can achieve the functionality I desire? Do you have any suggestions as to if I have done something wrong. Thanks in advance.
$('#automate').click(automateButton);
function automateButton() {
if (webpageUrl == activeTabUrl) {
// do nothing
} else {
// Window opens
window.open(webpageUrl);
}
}
$('#scenarioDropdownList').change(function() {
var scenarioId = $('#scenarioDropdownList option:selected').prop('id');
getData(scenarioId);
});
function getData(scenarioId) {
$.ajax({
type: "GET",
url: 'http://localhost:54442/api/scenariodatas/GetScenarioData',
data: {
scenarioId: scenarioId
},
dataType: 'JSON',
success: scenarioData,
error: function() {
console.log("There has been an error retrieving the data");
}
});
}
function scenarioData(response) {
$.each(response, function(key, val) {
var fieldType = val.fieldType;
var fieldName = val.fieldName;
var fieldValue = val.fieldValue;
var field = $(fieldName);
if (field != undefined) {
switch (fieldType) {
case "Input":
$(field).val(fieldValue);
break;
case "Button":
$(field).click();
break;
case "Select":
$(field).val(fieldValue);
break;
}
}
})
}

onChange don´t work well with buttons because onChange detect a change in the value of your component, because of this, it´s highly recommended to use onClick when you use a button.
$('#scenarioDropdownList').click(function() {
var scenarioId = $('#scenarioDropdownList option:selected').prop('id');
getData(scenarioId);
});
I recommend you to put alerts when you are trying to test this sort of JS
EJM:
$('#scenarioDropdownList').change(function() {
alert('button active');
var scenarioId = $('#scenarioDropdownList option:selected').prop('id');
getData(scenarioId);
});
this alert allow you to know if the code is firing or not

CRM Javascript lookup

I have some JavaScript that runs when the ContactId is changed on a Custom Entity and populates the fax number field from the Contacts entity into mh_fax field of the custom entity. This code works fine:
function contact_onchange () {
// get contactid
var vContactid = Xrm.Page.data.entity.attributes.get("mh_contactid").getValue()[0].id;
try { var Fax= getAttributeValue (vContactid , "contact", "contactid", "fax", false); } catch (e) { }
Xrm.Page.data.entity.attributes.get("mh_fax").setValue(Fax);
}
I am trying to write similar code to run when the parentcontactid field is updated on the Leads entity, but this code does not work.
function contact_onchange () {
// -----get contactid
var vContactid = Xrm.Page.data.entity.attributes.get("parentcontactid").getValue()[0].id;
alert(vContactid)
try { var Fax= getAttributeValue (vContactid , "contact", "contactid", "fax", false); } catch (e) { }
alert (Fax);
Xrm.Page.data.entity.attributes.get("telephone1").setValue(Fax);
}
The 1st alert that I have inserted in the code, shows that vContactid is being set to the correct value.
The problem seems to be with the "Fax= getAttributeValue " line, as the 2nd alert returns undefined and "telephone1 field is blanked out.
Can anyone see why this code works for a custom entity but not for the Leads entity?
Thanks

why JavaScript form works in Chrome but not in Firefox

i need following function to be execute in Firefox.., but it is working fine in chrome. the problem was when i do 'Inspect Element With Firebug' it is working fine. the method 'EditEncounterBillStatus' is also hitting correctly. but when i don't use 'Inspect Element With Firebug' the method EditEncounterBillStatus is not hitting.. i tried a lot to sort out this. but still i can't can any one help me to find solution thanks in advance.
else if (element.trim() == "Approved") {
var TestPin = prompt("Please Enter your PIN");
if (TestPin != null) {
if (isNaN(TestPin)) {
alert("Please Enter a Valid Pin");
return;
}
else if (TestPin == pin) {
var postVisitData = { VisitId: vid};
$.post("/Emr/WaitingRoom/EditEncounterBillStatus", { VisitId: vid }, function (data) {
});
window.location = "/Emr/Patients/Show?PID=" + pid;
}
else {
alert("Your Entered PIN Is Incorrect");
}
}
else {
return;
}
}

I would recommend doing it like this
else if (TestPin == pin) {
$.post("/Emr/WaitingRoom/EditEncounterBillStatus", { VisitId: vid }, function (data) {
window.location = "/Emr/Patients/Show?PID=" + pid;
});
return; // in case of side effects in unseen code
}
i.e. wait until the $.post has finished before changing the window.location
As the rest of your code is unseen there could be side effects of performing this in this way - hence the return where it is - but even then, not knowing the full call stack there could still be side effects - you have been warned

You should change location upon the success of the post call, so put that in your callback function body:
$.post("/Emr/WaitingRoom/EditEncounterBillStatus", { VisitId: vid },
function (data) {
window.location = "/Emr/Patients/Show?PID=" + pid;
});
This way you are sure you only change location when the post action was executed. Otherwise you risk that you change location before the post happens. In debug mode, and certainly when you step through the code, there is enough time for the post to finish in time, and so your original code then works.

jquery get variable from another function

I am using jquery raty rating plugin and would like to grab the score on click and pass it to to the second function which will send it via ajax to php to insert in to database along with a feedback. can someone help me out?
$(function() {
$('.rate').raty({
click: function(score, evt) {
var rate = score;//this is the variable I want to pass
},
path : '../img',
size : 24,
half :true,
cancel : true,
cancelOff : 'cancel-off-big.png',
cancelOn : 'cancel-on-big.png',
starHalf : 'star-half-big.png',
starOff : 'star-off-big.png',
starOn : 'star-on-big.png',
starOn : 'star-on-big.png',
score: function() {
return $(this).attr('data-score');
}
});
//the below function is in included js file
$(function() {
$("#submit" ).click(function() {
//how can I access the above var here?
if(rate == "")
{
$(".error").html("Score is missing");
}
else{
$.ajax({
//send data
});
}
});
});

Prefixing a variable with var makes it accessible only within that scope. By doing this, you're only making it available inside the click handler for .rate.
Instead, make the scope wider;
// define here, in a scope both functions can access!
var rate = null;
$(function () {
$('.rate').raty({
click: function (score, evt) {
rate = score;
},
path: '../img',
size: 24,
half: true,
cancel: true,
cancelOff: 'cancel-off-big.png',
cancelOn: 'cancel-on-big.png',
starHalf: 'star-half-big.png',
starOff: 'star-off-big.png',
starOn: 'star-on-big.png',
starOn: 'star-on-big.png',
score: function () {
return $(this).attr('data-score');
}
});
//the below function is in included js file
$(function () {
$("#submit").click(function () {
if (rate == null) {
$(".error").html("Score is missing");
} else {
$.ajax({
//send data
});
}
});
});
You'll notice I've changed your rate == "" to rate == null; I've looked at the raty docs, and the only valid values I could find for the click handler is either a number, or null (in the event "cancel" is clicked). So the comparison against null will work for both the user not choosing a value, or the user clearing the value (if you have that setting enabled).

Variable rate is defined in callback function. If it's defined inside of function it means it's local variable and it's valid and exist only in this function. You must define this variable out of this function.
If you can't do so - becouse of external file with jQuery Raty code which you can't edit - so in such case - I think the only one possibility is to read DOM and take value of hidden input which is generated by jQuery Raty.
But input doesn't fire change event when the value is programmatically changed so I have no idea how to detect that user clicked rating icon .......