My application has a list of indicators, each with its help button. Clicking on each button, brings up a ToolTipDialog with definition for each respectively. The way I have written the code (below), the content does not get refreshed when the user clicks on another help button within the list after having clicked the first one. I have not been able to figure out how to change the "content" dynamically. Any help will be appreciated:
HTML:
<div dojoType="dijit.layout.ContentPane" id="group1" title="Population projection" selected="true">
<table id="popIndTable">
<tr id="someID">
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkCBR" name="checkInd" /></td>
<td id="indCBR">Crude Birth Rate</td>
<td id="infoCBR"><img id="imgCBR" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest1" name="checkInd" /></td>
<td id="indTest1">Test 1</td>
<td id="infoTest1"><img id="imgTest1" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest2" name="checkInd" /></td>
<td id="indTest2">Test 2</td>
<td id="infoTest2"><img id="imgTest2" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
</table>
</div>
JavaScript:
function showToolTipDialog(node,infoId){
var infoText;
var infoElem = dojo.byId(infoId).parentNode.id;
if (infoElem == "infoCBR"){
infoText = "This is the text container for CBR";
}
else if (infoElem == "infoTest1"){
infoText = "This is the text container for Test1";
}
if (!tooltipDialog) {
tooltipDialog = new dijit.TooltipDialog({
content: infoText,
style: "width:200px;height:auto;",
autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
refocus: !dojo.isIE
});
dijit.popup.open({ popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
else {
if (tooltipDialog.opened_) {
dijit.popup.close(tooltipDialog);
tooltipDialog.opened_ = false;
}
else {
dijit.popup.open({popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
}
}
I believe the preferred way to change the value of a dojo widget programatically is to use the .set() method. ie:
this.myTooltipDialog.set("content", newContent);
Rather than:
this.myTooltip.content = newContent;
It looks like you never reset the content of your tooltipDialog. You create it once, but once it's created (new dijit.TooltipDialog({...})) it remains static.
I don't know the Dojo API. But can you just set the content value directly? Perhaps immediately after your first else:
tooltipDialog.content = infoText;
This is just a guess, but if Dojo's API is simple enough, that might do the trick.
If not, you might have to remove your if (!tooltipDialog) { check.
If your content is not too complicate, I suggestion you create a new TooltipDialog every call and clear it when blur, like
var dlgDiv = dojo.create("div");
var dlg = new dijit.TooltipDialog({
content: dlgDiv,
onBlur: function () {
popup.close(this);
this.destroyRecursive();
}
});
// you can create any content within dlgDiv at here dynamicly
dojo.popup.open({
around: yourArondNode ,
orient: ["below", "before", "after", "above"],
popup: dlg
});
dlg.focus();
Related
I am working on a website made with Struts2 and I am facing a problem with a checkbox.
I have a dropdown with a list of companies. If the user does not find his company in the list, he can click a checkbox to replace the dropdown with a text field. Here is the code:
Extract of the JSP:
<tr>
<td align="right" width="49%">
<table>
<sj:select id="company_select" name="company_select" list="company_list" .../>
</table>
</td>
<td colspan="2" align="left">
<table>
<s:hidden name="company_text" id="company_text" label="Company Type" disabled="true"/>
</table>
</td>
</tr>
<tr>
<td align=left>
<s:checkbox name="checkboxCompanyText" id="checkboxCompanyText" label="Company Not in the List"
fieldValue="false" onchange="showCompanyText()"/>
</td>
<td></td>
</tr>
The JS function:
function showCompanyText() {
if(document.querySelector('#checkboxCompanyText').checked = "true") {
document.getElementById('company_text').type = "visible";
document.getElementById('company_text').disabled = false;
document.getElementById('company_select').style.display = "none";
}else{
document.getElementById('company_text').type = "hidden";
document.getElementById('company_text').disabled = true;
document.getElementById('company_select').style.display = "block";
}
}
When the page loads, the checkbox is unchecked, the dropdown is here and the text input field is not visible. Good. When I check the checkbox, the dropdown goes away and the text field appears. Again: good. But when I try to uncheck the checkbox, it just remains checked, impossible to uncheck it.
If anyone has an idea of what's going on, you are welcome.
Sometimes, your error is so obvious that you don't see it. I sincerely spent several minutes looking at the code trying to figure out what was going on. Turns out the the solution was to transform if(document.querySelector('#checkboxCompanyText').checked = "true") into if(document.querySelector('#checkboxCompanyText').checked === true). Sometimes I hate myself.
I want to get a data from listing and retrieve to popup.. when I use getElementById, it will only get a single id from another input. not from listing that i want.. so, I've come an idea to use array.. but I don't know how.. I'm using Java Play Framework
here is my code..
display.html
<script>
function openModifySchedule(staffId) {
if (!checkRequiredField()) {
alert("There Is Error(s) In The Form. Please Fix It Before Proceed.");
return;
}
var staffId = document.getElementById("staffId").value;
if (staffId == "") {
alert("Please Select Doctor Before Proceed");
return;
}
var url = "/DoctorSchedules/modifySchedulePopup?staffId=" + staffId;
mywindow = window.open(url,"mywindow","location=no,resizable=1,width=700,height=650,menubar=no,center=yes");
mywindow.moveTo(420,100);
}
</script>
<input type="hidden" id="staffId" name="staffDetails.staffId" value="${staffDetails?.staffId}">
<tbody>
#{list items:staffScheduleList , as:'stffSchedule'}
<tr id="list" align="center">
<td></td>
<td id="scheduleDate">${stffSchedule.scheduleDate}</td>
<td id="staffId"><a onClick="openModifySchedule()" href="#">${stffSchedule.staffId}</a></td>
<td id="staffName">${stffSchedule.staffName}</td>
<td id="deptName">${stffSchedule.deptName}</td>
<td></td>
<td></td>
<td></td>
<td id="contactNo">${stffSchedule.contactNo}</td>
</tr>
#{/list}
</tbody>
here is the function in controller..
display.java
public static void modifySchedulePopup(String staffId){
StaffDetails staffDetails = StaffDetails.find("byStaffId", staffId).first();
StaffSchedule staffSchedules = StaffSchedule.find("byStaffId", staffId).first();
renderTemplate("DoctorSchedules/doctorScheduleModifyPopup.html", staffDetails,staffSchedules);
}
hope someone can explain.
In the DOM, no two elements may have the same id attribute. Since all of the "td" elements in your table have id="staffId", getElementById() is free to return any one of them.
Since Play! comes with JQuery, you might was well use that instead of straight JavaScript (it's much easier). Briefly, you attach the same "click" event handler to all of the links and the click event handler knows which element was being clicked.
Here's simple snippet that demonstrates this:
<script>
$(function() {
$(".staff-id").click(function() { // attach the click event handler
var staffId = $(this).text();
alert(staffId); // open your new window here
});
});
</script>
#{list items:staffScheduleList, as:'stffSchedule'}
<tr id="list" align="center">
<td></td>
<td>${stffSchedule.scheduleDate}</td>
<td><a class="staff-id" href="#">${stffSchedule.staffId}</a></td>
<td>${stffSchedule.staffName}</td>
<td>${stffSchedule.deptName}</td>
<td></td>
<td></td>
<td></td>
<td id="contactNo">${stffSchedule.contactNo}</td>
</tr>
#{/list}
Basically I am having a table like below:
<tbody>
<tr>
<td><img class="img-thumbnail" src="./images/no_image.png" width="100" height="100"></td>
<td><button class="change_image" data-image_id="1">Change Image</button></td>
<td><input type="text" name="sort[]" size="7" placeholder="Sort order"></td>
</tr>
<tr>
<td><img class="img-thumbnail" src="./images/no_image.png" width="100" height="100"></td>
<td><button class="change_image" data-image_id="2">Change Image</button></td>
<td><input type="text" name="sort[]" size="7" placeholder="Sort order"></td>
</tr>
<tr>
<td><img class="img-thumbnail" src="./images/no_image.png" width="100" height="100"></td>
<td><button class="change_image" data-image_id="3">Change Image</button></td>
<td><input type="text" name="sort[]" size="7" placeholder="Sort order"></td>
</tr>
</tbody>
When click on .change_image button, its opening a modal to change that image.
This is how my modal open:
$('#manage_images').on('click', '.change_image', function(){
window.tr = $(this).parents('tr');
var image_id = $(this).data("image_id")
$('#chage_pro_image_form')
.find('[name="image_id"]').val(image_id).end();
$("#modal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true
});
});
Next thing is I want to submit form (which is in the modal) to change this image. I did it correctly using jquery/ajax
Now I want to replace old image with newly change image on this table row after ajax success.
This is how I tried it in ajax success function:
success: function(json) {
var json = JSON.parse(json);
if (json.success) {
$('#modal.modal').modal('hide');
$('#chage_pro_image_form').formValidation('resetForm', true);
d = new Date();
window.tr.find('img').fadeOut(1000, function() {
$("img").attr("src", json.image+"?"+d.getTime());
}).fadeIn(1000);
} else {
// my errors
}
}
My problem is, its replacing all existing images in the table with new one. I created a global variable window.tr. But it doesn't work for me.
Can anybody help me to figure this out?
Thank you.
Use this to reference the image instance inside the animation callback
window.tr.find('img').fadeOut(1000, function() {
$(this).attr("src", json.image+"?"+d.getTime());
}).fadeIn(1000);
Well obviously the $("img") selector will select all img elements. You need to somewhere store which button you changed as a variable. For instance by pointing to the data-image_id attribute. Then you can select it using:
$('[data-image_id='+image_id+']')
I want to hide a Sharepoint field based on radio button value. When i put my code, this doesn't work (the event on click doesn't trigger). If i don't put the code with the event, when i open my element the script works perfectly.
This is my code:
<p>
<script src="/sites/contsvil/jQuery/jquery-1.5.js">
</script><script type="text/javascript">
$(document).ready(function() {
$("input[name$='Richiesta 1']").click(function(){
var radio_value = $(this).val();
alert(radio_value);
});
var selectedValue = $("input[#name=Richiesta 1]:checked");
//alert(selectedValue.val())
if(selectedValue.val() == "No") {
$("input[Title='" + 'Data 1' + "']").closest('td.ms-formbody').closest("tr").hide();
}else {
$("input[Title='" + 'Data 1' + "']").closest('td.ms-formbody').closest("tr").show();
}
});
</script></p>
Could you help me?
Thank you very much.
Regards,
Francesco
Selecting radio buttons isn't as easy as other types on inputs on SharePoint. The following chunk of code gets all the radio buttons on a SharePoint New / Edit page and prints the label to the console.
$(":radio").each(function() {
var radioId = $(this).attr("id");
var lblText = $("label[for=\""+radioId+"\"]").text();
console.log(lblText);
});
Here is an example of attaching a click event to each radio button:
$(":radio").each(function() {
$(this).click(function() {
console.log($(this).attr("id"));
});
});
This should get you close enough to move forward. For others who wish to jump in, here is the rendered HTML for a radio input on SharePoint (ugly!):
<table cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #1"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" checked="checked"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00">Enter Choice #1</label></span>
</td>
</tr>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #2"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01">Enter Choice #2</label></span>
</td>
</tr>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #3"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl02" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl02"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl02">Enter Choice #3</label></span>
</td>
</tr>
</tbody>
</table>
Here you go:
$("td[id='tdApproved'] input:radio[name*='ff4']").change(function(){
// do something});
"tdApproved" is the ID of the Radio button
For more information, read this article - Accessing Radio Buttons using JQuery in SharePoint
What I'm trying to accomplish is to have the user type into a textarea, and then be able to edit certain parts of what they typed by highlighting what they want to edit, then clicking a button just outside the textarea. (e.g, bold/color change, etc)
I'm using getSelection() to find the part that they have selected, however when they click on the button to change the text, it cancels out the selected text.
Is there a way that I can keep the text highlighted even if they click on one of the buttons?
Thanks!
EDIT: So the two things I'm unsure on are:
How to keep the highlighted part highlighted after the user clicks one of the buttons on a different part of the page.
I know that right now this code would change the entire textarea, so how would I get it to just affect the selected text?
Javascript
var bold = 0
function boldText()
{
if (bold == 0)
{
var selected1 = getSelection()
document.getElementById('default').style.fontWeight="bold";
bold = 1
}
else
{
var selected1 = getSelection()
document.getElementById('default').style.fontWeight="normal";
bold = 0
}
}
HTML
<table>
<tr>
<td class="smallCell" onClick="boldText()"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
</tr>
<tr>
<td colspan="10">
<textarea id="default">Type your message here</textarea>
</td>
</tr>
</table>
First of all, considering your second point, you probably won't be able to use a textarea to achieve what you want: you will have to create DOM nodes inside the text itself, which is not supported by textarea.
However, this should help you with your first question: http://jsfiddle.net/noziar/2hV3X/
HTML:
<p><button type="button" onclick="boldText()">Bold!</button></p>
<p><textarea id="default" rows="4" cols="40" onselect="saveSelection()">
Some sample text here. Try selecting part of it and clicking on the button!
</textarea></p>
JS:
var start, end, bold;
function saveSelection() {
var element = document.getElementById('default');
start = element.selectionStart;
end = element.selectionEnd;
}
function setSelection() {
var element = document.getElementById('default');
element.selectionStart = start;
element.selectionEnd = end;
}
function boldText() {
var element = document.getElementById('default');
element.style.fontWeight="bold";
if (bold == 0){
element.style.fontWeight="bold";
bold = 1;
} else {
element.style.fontWeight="normal";
bold = 0;
}
setSelection();
}