I am having a major issue with IE8 and the newest versions (beta) of knockout.js and jquery templates. I keep getting the error below. If I remove the <div> in trialogueRun then it doesn't error. It happens at the buildTmplFn(markup) function in jquery.tmpl.js.
SCRIPT1028: Expected identifier, string or number
jquery.tmpl.js, line 317 character 9
<script id="trialogueRun" type="text/html">
<div data-bind="attr: { class: $data.AgentName }"></div>
</script>
Got it to work with IE8. I should have known IE would have problems with the word 'class'.
<div data-bind="attr: { 'class': $data.AgentName }"></div>
Related
First of all, yes I know that there is almost the same question on Stackoverflow, but i still can't get it to work. Even with the provided solution, which I found there:
Getting 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'
I want to get Data into my Grid.
I am using Visual Studio 2017.
Problem:
When I try to run the program I get this error:
Unhandled exception at line 56, column 13 in "Link"
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'
index.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>FlexDatenportal</title>
<link rel="icon" href=".\icon.png">
<link href="~/styles/styles`enter code here`heet1.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script type=text/javascript>
$
(function () {
"use strict";
$("#grid").jqGrid({
colModel: [
{ key: true, name: 'ID', index: 'ID'},
{ name: "Vorname" },
{ name: "Nachname" }
],
data: [
{ Vorname: "Angelk", Nachname: "Merkel" },
{ Vorname: "Vladimir", Nachname: "Putin" },
{ Vorname: "David", Nachname: "Cameron" },
{ Vorname: "Barack", Nachname: "Obama" },
{ Vorname: "François", Nachname: "Hollande" }
]
});
});
</script>
</head>
<body>
<div class="header">
<img class="flexLogo" src="~/styles/Bilder/flexLogo.png" alt="Logo">
<h1 class="Titel">Datenportal</h1>
<p class="UsernameTag">username</p>
<img class="profileimg" src="~/styles/Bilder/profileimage.jpg" alt="profileimg">
</div>
<div class="section">
<div class="Daten">
<p class="DatenHeadline">Daten</p>
<table id="grid"></table>
<div class="inputAButton row">
<div class="col-md-3">
<input class="form-control" type="text" value="" id="in1" maxlength="20">
</div>
<div class="col-md-3">
<input class="form-control" type="text" value="" id="in2" maxlength="20">
</div>
<div class="col-md-3">
<input class="form-control" type="text" value="" id="in3" maxlength="20">
</div>
<div class="col-md-3">
<div class="input-group">
<input class="form-control" type="text" value="" id="in4" maxlength="20">
<span class="input-group-btn">
<button type="button" id="AddButton" class="btn btn-primary">+</button>
</span>
</div>
</div>
</div>
<p class="Signed">by Patrick Korb</p>
</div>
</div>
</body>
</html>
HomeController.cs:
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using MyFirstWebApp.Models;
using System.Web.Mvc;
using System.Data;
using Newtonsoft.Json;
using System.Text;
using System.Data.Entity;
using System.Web.UI;
using System.Diagnostics;
using System.Threading;
using System.IO;
using System.Reflection;
using System.Net;
using System.ComponentModel;
using System.Web.Script.Serialization;
namespace MyFirstWebApp.Controllers
{
public class HomeController : Controller
{
/***Connection***/
SqlConnection sqlCon = new SqlConnection(System.Web.Configuration.WebConfigurationManager.AppSettings.Get("myConnectionString"));
PatrickTestDBEntities db = new PatrickTestDBEntities();
public ActionResult Index()
{
return View();
}
public JsonResult GetMitarbeiter()
{
var testQuery = (from a in db.tbl_PatricksMitarbeiter
select new
{
a.ID,
a.Vorname,
a.Nachname
}).Distinct();
return Json(testQuery);
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
I tried Oleg's free jqGrid.I pretty much copied Oleg's Javascript from https://free-jqgrid.github.io/getting-started/index.html and changed the GetMitarbeiter method in the Controller.
Let me know if you need any more detail. (my first question)
Please write always which version of jqGrid you use and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7).
In any way the list of JavaScript files and the order of files, which you use
<script src="~/Scripts/JQGrid/jquery-ui.min.js"></script>
<script src="~/Scripts/JQGrid/grid.locale-en.js"></script>
<script src="~/Scripts/JQGrid/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/JQGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/JQGrid/jquery.jqGrid.js"></script>
is wrong.
You should first include jQuery (for example, jquery-1.11.0.min.js) and then all jQuery plugins: jQuery UI (jquery-ui.min.js) and jqGrid. It's required additionally to include jQuery UI CSS additionally to JS file.
If you use old version of jqGrid (or commercial Guriddo jqGrid JS) then you should include grid.locale-en.js before jquery.jqGrid.min.js. If you use free jqGrid fork then you don't need to include grid.locale-en.js because English US locale in included in jquery.jqGrid.min.js by default.
It's wrong to include both minimized (jquery.jqGrid.min.js) and non-minimized (jquery.jqGrid.js or jquery.jqgrid.src.js) JavaScript code of jqGrid. You should use only one version of jqGrid.
If you use Bootstrap CSS on your page, then you should consider to use jqGrid with Bootstrap options too. See here for example. You can load all free jqGrid files from CDN (see the wiki article) or alternatively to use free jqGrid from NuGet package free-jqGrid or npm package (see here).
UPDATED The error in your project is independent from jqGrid. You included in Index.cshtml the whole HTML code of the page starting with <!DOCTYPE html>. ASP.NET MVC combines "~/Views/Shared/_Layout.cshtml" by default with the content of Index.cshtml and you get absolutely wrong HTML page, where the content of Index.cshtml will be placed in the <body> of _Layout.cshtml.
You can fix the problem by adding
#{
Layout = null;
}
at the beginning of Index.cshtml (before the line <!DOCTYPE html>).
If you use Guriddo jqGrid Please check the detailed installation documentation here
The documentation on source binding has an aside which states:
Important: A single root element should be used in the template when
binding to an array. Having two first level DOM elements will result
in an erratic behavior.
However, I'm finding that this is the case even for non arrays.
I have the following HTML, which sets up two div's populated by two templates. The only difference is that the working template wraps that databound spans in a div.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<title>JS Bin</title>
<script id="broken-template" type="text/x-kendo-template">
Foo: <span data-bind="text: foo"></span><br/>
Foo Again: <span data-bind="text: foo"></span>
</script>
<script id="working-template" type="text/x-kendo-template">
<div>
Foo: <span data-bind="text: foo"></span><br/>
Foo Again: <span data-bind="text: foo"></span>
</div>
</script>
</head>
<body>
<div id="broken-div" data-template="broken-template" data-bind="source: this">
</div>
<br/>
<br/>
<div id="working-div" data-template="working-template" data-bind="source: this">
</div>
</body>
</html>
And the JavaScript simply creates a view model with a single property and binds it to both divs:
var viewModel = kendo.observable({foo: "bar"});
kendo.bind($("#broken-div"), viewModel);
kendo.bind($("#working-div"), viewModel);
In both cases, only the first root element and it's children are being bound properly. This suggests that every time I databind to template with more than one element I need to make sure it is wrapped in a single root.
Is this behavior documented somewhere? Is there a bug in Kendo or in my sample code? An explanation for why Kendo requires a single root would be great to hear as well.
(Sample code as a jsfiddle)
It's not documented except in the one place you mentioned. Such is the state of Kendo UI documentation - it's less than complete. I've been using Kendo UI for three years and as far as I can tell you, this is its default behavior and not a bug. Unfortunately, it's one of the many quirks you simply learn (stumble upon) from experience.
I have one question.
I use CKEditor 4.1 for replace textarea. When open page with CKEditor then text in CKeditor disappears.
Like this:
Before loading:
Afrer loading:
After loading CKEditor not work.
Any idea why?
I have solve the problem with setTimeout function
<script type="text/javascript">
setTimeout(function(){
CKEDITOR.replace('textarea');
},1000);
</script>
You can set text within Html tag calling ckeditor.js
<div class="columns">
<div class="editor">
<div cols="10" id="editor1" name="editor1" rows="10" contenteditable="true">
"Your Text Here...."
</div>
</div>
Then load you will see the text element inside of "div" Element.
So to keep it simple, im trying to update my select list with a new list of items that i get from an ajax-call. The list has the items. I set the model to the new list and do a $scope.$apply(). This works great in firefox, but not in IE. What am I doing wrong? Is there some IE9-thing that I'm missing? (I've been looking for a few hours now and am ready to give up). Appreciate all the help I can get.
HTML:
<select
ng-model="SelectedParameter"
ng-options="Parameter.Name for Parameter in AllParameters">
</select>
JS:
$.getJSON("/Cont/GetList", {id: id},
function (result) {
var allParameters = result.Data.AllParameters;
$scope.AllParameters = allParameters;
$scope.$apply();
}
);
You'd be way better off doing this the "Angular way". No JQuery required! In fact, if you find yourself doing things the "JQuery way" you're probably doing it wrong. Mark Rajcok had a really good question (and answer) about this same thing on StackOverflow a while ago:
app.js
//declare your application module.
var app = angular.module('myApp', []);
//declare a controller
app.controller('MainCtrl', function($scope, $http) {
//function to update the list
$scope.updateList = function () {
$http.get('/Cont/GetList', function(data) {
$scope.allParameters = data;
});
};
//initial load
$scope.updateList();
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<button ng-click="updateList()">Update</button>
<ul>
<li ng-repeat="parameter in allParameters">{{parameter | json}}</li>
</ul>
<!-- EDIT: Because you requested a select.
or if you wanted to do a select list
assuming every object in your array had a "name" property
you wanted to display in the option text, you could do
something like the following:
(NOTE: ng-model is required for ng-options to work)
-->
<select ng-model="selectedValue" ng-options="p as p.name for p in allParameters"></select>
<!-- this is just to display the value you've selected -->
<p>Selected:</p>
<pre>{{selectedValue | json}}</pre>
</div>
</body>
</html>
EDIT: A common problem in IE
So first of all, if you're having a problem in IE, I'd recommend hitting F12 and seeing what errors you're getting in the console.
The most common issue I've seen that breaks things in IE relate to commands such as console.log() which don't exist in IE. If that's the case, you'll need to create a stub, like so:
//stub in console.log for IE.
console = console || {};
console.log = console.log || function () {};
I think it's an IE issue. Try setting display:none before you update, then remove the display setting after you update.
I believe it is this bug that is ultimately the problem. I've been pulling my hair out for a couple of days on something very similar, a select filtered off of another.
At the end of the day OPTIONS are being added dynamically and IE9 just chokes on it.
<div class="col-lg-2">
<div class="form-group">
<label>State</label>
<select data-ng-model="orderFilter.selectedState"
data-ng-options="s.StateAbbr for s in states"
data-placeholder="choose a state…"
class="form-control">
<option value=""></option>
</select>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label>County</label>
<select data-ng-model="orderFilter.selectedCounty"
data-ng-options="c.CountyName for c in filteredCounties | orderBy:'CountyName'"
data-ng-disabled="orderFilter.selectedState == null"
data-placeholder="Choose a county…"
class="form-control">
<option value=""></option>
</select>
</div>
</div>
Regards,
Stephen
I made a simple example showing the problem: the form below submits to another page using jQuery .post().
Form
$('form').submit(function(){
$.post(
$(this).attr('action'),
$(this).serialize(),
function(data) {
var ret = data;
var final_data = $(ret).find('#holder-1').html();
alert(final_data);
}
)
return false;
})
Action
<div id="holder-1">
<h1>Content 1</h1>
</div>
<div id="holder-2">
<h1>Content 2</h1>
</div>
<div id="holder-3">
<h1>Content 3</h1>
</div>
The log shows that the content of data looks fine. But once i try to find #holder-1 with .find(), it returns undefined.
This is almost the same as the last example in the jQuery api page: http://api.jquery.com/jQuery.post/
Here is the full (not) working example hosted in my website, with some console.log() along the code:
Form: http://www.peixelaranja.com.br/tmp/post.php
I tried nearly anything: passing the dataType as 4th parameter, using $.ajax() instead of .post(), using .filter() instead of .find(), different versions of jQuery... Nothing seems to work.
All the files are UTF-8.
Any ideas?
I know you mentioned that you used filter instead of find, however, that should work. jQuery is stripping out the html, head,body tags, etc. Once this is done, #holder-1 is now at the top level of the hierarchy.
This fiddle demonstrates that filter does work:
http://jsfiddle.net/68jEt/
var html = '<!doctype html><html dir="ltr" lang="pt-BR"><head> <meta charset="UTF-8"> <title>Return Test</title></head><body> <div id="holder-1"> <h1>Content 1</h1> </div> <div id="holder-2"> <h1>Content 2</h1> </div> <div id="holder-3"> <h1>Content 3</h1> </div></body></html>';
alert($(html).filter("#holder-1").html());