I am attempting to update the div of my dialog with new content from a json array and am encountering issues and am requesting some guidance.
I output a json array which has labels for a 'Name' and a 'Definition'. A user is presented with a list of radio buttons. When a user clicks a radio button which has the following structure:
<input type="radio" value="23" name="statistic" id="stat-23" />
I take the value of the radio button and use this to identify which 'Name' 'Definition' pair I am referring to from my json array.
I then use the 'Name' 'Definition' pair to populate a div which typically updates dynamically. To accomplish this I use the following code:
$('input[type=radio]').live( 'change', function(){
if ( ! $(this).is(':checked') )
return false;
var stat_id = $(this).attr( 'id' ).replace( /stat-/, '' );
refreshDefinition( stat_id );
} );
function refreshDefinition( stat_id ) {
var definition = definitions[ stat_id ];
var div = $("<div id='definition'>"+definition.name+": "+definition.definition+"</div>");
$('#definition').replaceWith( div );
}
This works fine without a dialog (it updates just fine as is), however, it would look a lot better if there were some way to incorporate a dialog so that when a user clicks a button, the dialog will appear and they can see the 'Name' 'Definition' pair and then can exit out of it when they are satisfied.
$('#definition').dialog();
I would like the above code to show the updated data, but it does not appear to allow it.
If you have any guidance on how I could go about solving this problem or any alternative approaches, I would really appreciate it!
Thanks.
Have you tried updating the dialogs content?
$('#definition').html(definition.name+": "+definition.definition);
Here's an example.
EDIT:
unnecessary .dialog('widget') made this answer wrong.
Related
I have an academy platform where the section assessment test is a combination of the following type of questions
Single Answer ( radio button)
Multiple choice ( checkbox)
True or false ( radio button)
reorder ( where I have listed the answers as a drop-down)
I have initialized the following on to the final assessment view:
We are trying to achieve that a user should be able to answer the question as well as at the same time the answer should be validated/checked.
If the user has the right answer to the question then they can move to the next section.
Currently, we are trying to achieve the above-said goal by using the below jquery
var checkedValues = [];
$('.next').click(function() {
var $form = $(this).parent().parent();
var $checked = $(this).parent().parent().find('input[type=radio]:checked')
var isChecked = $checked.length > 0;
if(!isChecked){
alert('Please Choose an option.');
return;
}
checkedValues.push($checked.val());
console.log($checked.val());
$form.hide().next().show(); //hide parent and show next
});
$('.back').click(function() {
console.log('back');
$(this).parent().parent().hide().prev().show(); //hide parent and show previous
});
However, we are unable to achieve to move the user to the next section and also validate the answer. can anyone please help?
PS I have already tried the fieldset method but it does not work in terms of validation and moving to sections. Sections are dynamic. We have to make sure that a user should answer the section assessment before moving to the next section.
I have created a page which contains some text boxes, radio buttons and check boxes. I am using this page to save new data or edit the existing one. I am able to save new data but for editing the data, the page should show some predefined values that it is getting from a variable. I am able to get and set the values for text boxes and radio buttons from that variable. But I am not able to check the check boxes. I have plenty of check boxes so I am using ng-repeat for the values to be displayed on page. I am setting the values of selected check boxes to an array and passing that value to my service layer.
Below are my code snippets:
HTML:
<div id="activityCheckboxList" class="checkboxList">
<div ng-repeat="activity in activities">
<label>
<input type="checkbox" ng-true-value="activity" ng-checked="selection.indexOf(activity) > -1" ng-click="toggleSelection(activity)"/>
<span>{{activity.activityName}}</span>
</label>
</div>
</div>
app.js:
$scope.selection=[];
$scope.getActivities(); //this sets values in $scope.activities which is a list coming from service layer
//Get Selected Activities from Check Boxes
$scope.toggleSelection = function toggleSelection(activity){
var idx = $scope.selection.indexOf(activity);
if(idx > -1){
$scope.selection.splice(idx, 1);
}
else{
$scope.selection.push(activity);
}
};
After this, while clicking on submit, I am passing $scope.selection which will contain my activity objects.
For editing the data, I can put the data in selection[]. But how to check the check boxes using that and after that user should be uncheck/check them again. I tried using foreach loop but it didn't help.
Thanks in advance
As "activity" is an object, indexOf is not right way to find the index. I have made few changes to your code
html
<input type="checkbox" ng-true-value="activity"
ng-checked="checkInSelectionList(activity)" ng-click="toggleSelection(activity)"/>
<span>{{activity.activityName}}</span>
js
$scope.checkInSelectionList = function (item) {
for(var i=0; i<$scope.selection.length;i++){
if($scope.selection[i]['ID'] == item['ID']){
return true;
}
}
}
You can also use underscore to find the index of an object.
https://jsfiddle.net/nors536b/
I have an array of divs which can be selected (change background colour on click to signify that to the user).
I want a way to submit the ids of all of these divs to my app, though can't see a 'nice' way of doing this; at the moment the only thing I can see to do is have a button that onclick triggers a javascript function that gets the id's and sends them back to my server in a POST.
Is there a way of creating a multiple select input on a form which uses divs instead of checkboxes or a multi-select list, or a better way of doing what I'm attempting?
Assuming you add the class selected when a user 'selects' the div:
var data = {};
$(".classOfDivs.selected").each(function(){
data[$(this).prop('id')] = 'true';
}
$.ajax({
url : 'ajaxPage.php',
type : 'POST',
dataType : 'text',
cache: false,
data: data,
success : function(text){alert('Saved: '+text);},
error: function(){alert('Did not reach server');}
});
Use the success function to process the returned text as needed. dataType can be changed to html, JSON, etc. See the .ajax() documentation.
Have a hidden input for each div, all with the same name but with a different id. When a div is clicked update the corresponding hidden input with the id. Then when you submit through a standard form POST all of those values will be available through the name you specified.
Since this is an app, what you could do is store everything in HTML5 localstorage using the JQuery javascript library.
Here's how to do it step by step:
Create a jquery array
on click, get div id and store it in the array with a key/value pair
if clicked again, remove it from the array
have some event listener like a "submit" button to store the value of your array to localstorage
Here is a jsfiddle I had that has exactly what you are talking about: http://jsfiddle.net/CR47/bqfXN/1/
It goes into a little more depth but the jquery should be exactly what you need.
The reason this is better than submitting with POST or using ajax is because since you say this is an app, you will be able to use this method offline, where as post or ajax would require a connection to a server running php.
var skinCare=[]; //the array
$('.skinCare').click(function(){ //onclick
var value = event.target.className.split(" ")[0]; //get classname, you would get id
var index = skinCare.indexOf(value); //gets where the location in
//the array this code is
if($(this).hasClass('selected')){ //when a div is clicked it gets
//$('.skinCare').removeClass('selected'); //the class "selected" and adds
skinCare.splice(index, 1); //to array, then another click
} else if($.inArray(value, skinCare) == -1){ //removes it from array
skinCare.push(value);
}
});
$('.submitbutton').click(function(){
localStorage.setItem('Skin Care', JSON.stringify(skinCare));
});
In the the ckeditor init, to remove dialog tabs, it is possible to do something like:
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're interested in
if ( dialogName == 'link' )
{
dialogDefinition.removeContents( 'advanced' );
}
});
This will remove the "advanced" tab from the link dialog.
It also possible to remove specific attributes from a tab, doing something like:
var infoTab = dialogDefinition.getContents( 'info' );
// Remove unnecessary widgets from the 'Link Info' tab.
infoTab.remove( 'linkType');
infoTab.remove( 'protocol');
So this works fine, but my problem is I could not find a detailed list of the attributes names, like 'linkType' or 'protocol' in the example above.
Basically I would like to remove, from the image dialog for example, the width, height, the css class and id from the advanced tab etc, but I cannot find a the names of these attributes in the ckeditor documentation, does someone know where I can find this ?
Or give a list?
You can use the Developer tools plugin as explained in the HowTos: http://docs.cksource.com/CKEditor_3.x/Howto/Field_Names
So I currently have a table that's generated by ajax and json file.
The table has 3 segments, a name, an ID and the third column is a link for more details of each result.
Example of how my table looks
PATO:0001243 light blue Details
PATO:0001246 light brown Details
PATO:0001247 light cyan Details
the current code I have to generate the table is:
$.each(data.matches, function(i, item){
var this_row_id = 'result_row_' + next_row_num++;
$('<tr/>', {"id":this_row_id}).appendTo('tbody');
$('<td/>', {"text":item.label}).appendTo('#'+this_row_id);
$('<td/>', {"text":item.value}).appendTo('#'+this_row_id);
$(''+ 'Details' +'').appendTo('#'+this_row_id);
});
Ideally, I would like to be able to click on the "Details" and it would pass the ID value to another ajax call and then create a dialog/modal to display the results of that ajax call.
EXAMPLE
From the list above, clicking on "Details" from the first entry will pass the values "PATO:0001234" to my "test.cgi" script which will use that value to process and spit back out a JSON for me to display in a dialog.
I'm not asking for someone to write my code for me, just some direction about how to approach this.
I think I'm probably wrong to link directly to my cgi script from the <a href>. But I don't know how to link that to an ajax call from a text link.
Update
Left the page loaded too long; #floatless has posted a cleaner approach with chaining, didn't think of that.
You could change the last few lines to something like what's below. The idea is to attach a handler to each link when it's created which will call the loadDetail function with the appropriate item label. In loadDetail, it's then a simple matter of making an ajax request with the label as the parameter.
Note that you don't need to use ./test.cgi - test.cgi will suffice.
...
$(''+ 'Details' +'').appendTo('#'+this_row_id);
$('#detail_' + this_row_id).click(loadDetail(item.label));
}
function loadDetail(label){
$.get('test.cgi', {label: label}, function(data){
//create your dialog to display the response data
});
}
You could append click event handler while generating table:
$(''+ 'Details' +'').appendTo('#'+this_row_id).click(function()
{
$.getJSON("./test.cgi", {label: item.label}, function(data)
{
//Do something with received data
});
return false;
});