Rails How to render dynamic javascript - ruby-on-rails
I'm trying to use gridify grid control from: https://github.com/linoj/gridify
I did everything as said in https://github.com/linoj/gridify but I'm getting javascript code on my view page. any ideas?
I've written <%= #grid %> on my index.html.rb. it looks like rails escapes javascript tags, i'm seeing this code on the view page instead of actual grid:
<script type="text/javascript"> function gridify_fluid_recalc_width(){ if (grids = jQuery('.fluid.ui-jqgrid-btable:visible')) { grids.each(function(index) { gridId = jQuery(this).attr('id'); gridParentWidth = jQuery('#gbox_' + gridId).parent().width(); jQuery('#' + gridId).setGridWidth(gridParentWidth); }); } }; jQuery(window).bind('resize', gridify_fluid_recalc_width); function gridify_action_error_handler(r, data, action){ if (r.responseText != '') { return [false, r.responseText]; } else { return true; } } jQuery(document).ready(function(){ grid = jQuery("#contacts_grid").jqGrid({"beforeSelectRow": function(){ false; },"resizeStop": gridify_fluid_recalc_width,"autowidth":true,"rowNum":-1,"gridview":true,"restful":true,"url":"/contacts","hidegrid":false,"xmlReader":{"total":"contacts>total_pages","row":"contact","id":"id","root":"contacts","page":"contacts>page","records":"contacts>total_records","repeatitems":false},"forceFit":true,"datatype":"xml","postData":{"grid":"grid"},"colModel":[{"label":"Id","name":"id","sorttype":"integer","align":"right","index":"id","hidden":true},{"label":"Title","name":"title","sorttype":"text","index":"title"},{"label":"Address","name":"address","sorttype":"text","index":"address"},{"label":"Phone1","name":"phone1","sorttype":"text","index":"phone1"},{"label":"Phone2","name":"phone2","sorttype":"text","index":"phone2"},{"label":"Fax","name":"fax","sorttype":"text","index":"fax"},{"label":"Registration Number","name":"registration_number","sorttype":"text","index":"registration_number"},{"label":"Identity Number","name":"identity_number","sorttype":"text","index":"identity_number"},{"label":"National Code","name":"national_code","sorttype":"text","index":"national_code"},{"label":"Father Name","name":"father_name","sorttype":"text","index":"father_name"},{"label":"Birthday","name":"birthday","sorttype":null,"index":"birthday"},{"label":"Contact Type","name":"contact_type_id","sorttype":"integer","align":"right","index":"contact_type_id"},{"formatoptions":{"srcformat":"UniversalSortableDateTime","newformat":"FullDateTime"},"label":"Created At","name":"created_at","formatter":"date","sorttype":"date","index":"created_at"},{"formatoptions":{"srcformat":"UniversalSortableDateTime","newformat":"FullDateTime"},"label":"Updated At","name":"updated_at","formatter":"date","sorttype":"date","index":"updated_at"},{"label":"City","name":"city_id","sorttype":"integer","align":"right","index":"city_id"}],"hoverrows":false}) .addClass("fluid") .jqGrid('gridResize', {"minHeight":80,"handles":"s","minWidth":150}); grid[0].toggleToolbar(); });</script>
I got the answer, i needed to use <%= raw #grid %>
but I have no idea why it's not on the documentation of gridify.
Related
Angular JS custom directive not working on iOS devices
I have deployed my app on Azure, I have a C# backend and AngularJS front end.
I am using a custom directive (called bgSrc) which sets the image source based on the given url (either a background-image or a src) depending on which element the directive is used.
Here is the directive:
app.directive('bgSrc', ['preloadService', function (preloadService) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.hide();
preloadService(attrs.bgSrc).then(function (url) {
if (element[0].tagName === 'DIV' || element[0].tagName === 'MD-CONTENT' || element[0].tagName === 'MAIN' || element[0].tagName === 'FORM') {
element.css({
"background-image": "url('" + url + "')"
});
element.fadeIn();
}
else if (element[0].tagName === 'IMG') {
attrs.$set('src', url);
element.css({
'display': 'block'
});
element.fadeIn();
}
});
}
};
}]);
Here is my preloadService:
app.factory('preloadService', ['$q', '$rootScope', function ($q, $rootScope) {
return function preload(url) {
var deffered = $q.defer(),
image = new Image();
image.src = url;
if (image.complete) {
deffered.resolve(image.src);
$rootScope.loading = false;
} else {
$rootScope.loading = true;
image.addEventListener('load', function () {
deffered.resolve(image.src);
$rootScope.loading = false;
});
image.addEventListener('error', function () {
deffered.reject();
$rootScope.loading = true;
});
}
return deffered.promise;
};
}]);
Here is an example of how I use it on html.
<div ng-if="!loading" bg-src="assets/build/img/ocean_bg.png">
<form name="model.form" ng-submit="login()" bg-src="assets/build/img/scroll.png">
<h1>Log In</h1>
...
</form>
</div>
It works perfectly well on Chrome and Android but keeps failing on iOS devices. I have pinpointed the issue to be my custom directive, if I remove it the page loads fine, if I include it the page is caught in an endless loop not loading my images and stick in the "$rootScope.loading" state which simply displays a circular progress bar.
Any help on the matter is much appreciated
The issue was in my preloadeService, where the loading of the image was stuck in an infinite loop.
How to put kendo validator message span element underneath the input being validated?
I'm trying to figure this out for a while.
All the examples I saw, use the html with input and span elements manually inserted
I have the following code that generate form and its datepicker elements dynamically:
#using (Html.BeginForm("Reload", "FileDate", FormMethod.Post, new { returnUrl = this.Request.RawUrl, id = "DateForm", onsubmit = "return ValidateDate();" } ))
{
#(Html.Kendo().DatePicker()
.Name("Date")
.Value(Session["FileDate"] == null ? DateTime.Now : Convert.ToDateTime(Session["FileDate"].ToString()))
.Events(e => e
.Change("datepicker_change")
)
)
#Html.Hidden("returnUrl", this.Request.RawUrl)
<script>
function datepicker_change() {
if(ValidateDate()){
$("#DateForm").submit();
}
}
</script>
}
When form is generated, I have the following code on the page:
This is a validation:
<script>
$(document).ready(function() {
$("#mainMenu").kendoMenu();
$("#Date").attr('required', 'required');
$("#Date").attr('data-WrongFormat-msg', 'Date Format is Wrong');
var validator = $("#container").kendoValidator({
rules: {
WrongFormat: function (input) {
if (input.is("[data-role=datepicker]")) {
var dateBox = input.data("kendoDatePicker");
return input.data("kendoDatePicker").value();
} else {
return true;
}
}
}
})
});
function ValidateDate()
{
var validator = $("#container").data("kendoValidator");
if (validator.validate()) {
return true;
}
else
{
return false;
}
}
</script>
When I provide the incorrect input or no input at all, I get the correct message in the span. However, this span section modifies the layout of the page:
How can I fix that, so my error span is placed underneath my form, the way it is shown in some examples like here: http://dojo.telerik.com/ikUfu:
I have the exact same issue. The problems seems to be that the validation message span element is in the wrong place for DatePickers. It is inside this element: but, in all other widgets, it's inside the spam element one level higher: So, it seems this is a bug in Telerik at the moment. It works for other widgets, but not for DatePicker. I'll see and find if this bug is already reported, and if not, report it. If you desperately need it fixed asap, I assume you could try some jquery magic to move the span element.
I've faced it too. Is there any proper solution for this issue?
My workaround in a nutshell:
Delete all possible old error messages
Move the new one into the proper HTML container
<div id="div_id">
<input id="input_id" type="text">
</div>
<script>
var validatable = $("[id='input_id'").kendoValidator({
rules: {
minimumLengthRule: function (input) {
var trimmedInputValue = $.trim(input.val());
return trimmedInputValue.length > 0 ;
}
},
messages: {
minimumLengthRule: "The input length is too short."
}
}).data("kendoValidator");
validatable.bind("validateInput", function (e) {
$("#div_id > span").not(':first').remove(); // 1.
if (!e.valid) {
$("[id='input_id_validationMessage'").appendTo('#div_id'); // 2.
}
});
</script>
pass Ckeditor value to div text without html tags?
I have Ckeditor in my view and I dynamicly get editor value and show them in divs. I tried many combinaiton of defining(val,html,tex, etc) like this:
CKEDITOR.on('instanceCreated', function (e) {
e.editor.on('contentDom', function () {
e.editor.document.on('keyup', function (event) {
var str = CKEDITOR.instances['editor1'].getData();
$("#mirror1").text(str);
$("#mirror2").val(str);
$("#mirror3").html(str);
$('#mirror4').val($('<div/>').html(str).text());
}
);
});
});
my divs
<div id="mirror1">
</div>
<div id="mirror2">
</div>
<div id="mirror3">
</div>
<div id="mirror4">
</div>
for exaple When I wrote <pre>int i=0;</pre>
mirror1 text= <pre>deneme</pre>
mirror2 text= null
mirror3 text= <pre>int i=0;</pre>
mirror4 text= null
I m expecting output: int i=0;
How may I do this.What is the correct syntax?. Thanks.
If you skip the jQuery part, you can do it with simple javascript:
CKEDITOR.on('instanceCreated', function (e) {
e.editor.on('contentDom', function () {
e.editor.document.on('keyup', function (event) {
var str = CKEDITOR.instances['editor1'].getData();
document.getElementById("mirror1").innerHTML = str;
}
);
});
});
But using the DOM keyup event might not be enough if you want a good mirror, I suggest you to use the onChange plugin for CKEditor (disclaimer: I wrote it) and now the mirror will update whenever the content changes:
CKEDITOR.on('instanceCreated', function (e) {
var mirror2 = document.getElementById("mirror2");
e.editor.on('change', function () {
mirror2.innerHTML = CKEDITOR.instances['editor1'].getData();
});
});
changing stylesheet in MVC view
I have two actionlinks on my MVC view like this:
<%= Html.ActionLink
("click me","Partial1","Temp",new { s = "0" },new { id = "mylink" }) %>
<%= Html.ActionLink
("click me second link","Partial1", "Temp", null,
new { id = "mysecondlink" }) %>
and I have four style for these two links. if mylink is slected i want to apply #mylinkselected style to it and #mysecondlinknoselected to mysecondlink and if mysecondlink is selected, I want to apply #mysecondlinkselected to it and #mylinknotselected to mylink
I can not change the ids as I have code related to these links at top of view
<script type="text/javascript">
$(function() {
$('#mylink').click(function() {
$('#resultpartial1').load(this.href);
return false;
});
});
$(function() {
$('#mysecondlink').click(function() {
$('#resultpartial1').load(this.href, { s: "1" });
return false;
});
});
</script>
how to change styles ?
Regards,
Asif Hameed
Your best bet is probably to just set an A:active style for the links. This will apply that style to whichever link is clicked. http://www.echoecho.com/csslinks.htm
Sortable with scriptaculous problems
Im following a few tutorials to sort a list, but i can't get the DB to update. The drag drop side of things is working, also, i javascript alert() the serialize list onUpdate and the order is printed out as follows:
images_list[]=20&images_list[]=19 etc...
So the sorting and dragging is working fine, i just cant get the database to update, this is my code.
<script type="text/javascript">
Sortable.create("images_list", {
onUpdate: function() {
new Ajax.Request("processor.php", {
method: "post",
parameters: { data: Sortable.serialize("images_list") }
});
}
});
processor.php code:
//Connect to DB
require_once('connect.php');
parse_str($_POST['data']);
for ($i = 0; $i < count($images_list); $i++) {
$id = $images_list[$i];
mysql_query("UPDATE `images` SET `ranking` = '$i' WHERE `id` = '$id'");
}
Any ideas would be great, thankyou!
Perhaps you have other tags in your elements for sorting. i would add tag: '':
<script type="text/javascript">
Sortable.create("images_list", {
onUpdate: function() {
new Ajax.Request("processor.php", {
method: "post",
parameters: { data: Sortable.serialize("images_list") }
});
},
tag: 'span'
});
</script>
Further i would check the path to your processor.php. I use:
new Ajax.Request("/youdir/processor.php", {
(Starting from DocumentRoot)