I have an Ajax request that returns search results, and I am dynamically creating DOM elements to display those results. This is working as expected in all the browsers I've tested except for IE8.
The request is returning fine, the JavaScript is running successfully, and the elements are being created, but the elements are not being displayed in the page. They only appear after a mouse-click somewhere on the page.
I ran a quick test that ran the callback code without the Ajax request, and it behaved as expected there. So I'm wondering if this has something to do with the way IE8 is managing the callback thread. Has anyone else seen behavior like this, or have insight on it?
The callback is fundamentally very simple. I have reproduced with this:
function catchResults(response) {
var contentBlock = document.getElementById('divResults');
var divResults = document.createElement('div');
var txt = document.createTextNode("Results");
divResults.appendChild(txt);
contentBlock.appendChild(divResults);
}
I am using JQuery.ajax to make the call.
I have seen the proper behavior in FireFox and Chrome.
Thanks for the help!
I ran into this problem not so long ago on IE8.
I think this might be a problem with IE8 not re-rendering the elements in question.
An easy way to confirm this is to add a class to the parent element and then remove it. This should trigger IE8 to re-render the element.
If contentBlock is the parent element then you could test with the following:
Javascript version:
// Variable storing the test class name
var testClass = "testClass";
// Add test class to element
contentBlock.className += " "+testClass;
// Remove test class from element
var reg = new RegExp('(\\s|^)'+testClass+'(\\s|$)');
contentBlock.className=contentBlock.className.replace(reg,' ');
jQuery version:
// Variable storing the test class name
var testClass = "testClass";
// Add test class to element and then remove it
$('#divResults').addClass(testClass).removeClass(testClass);
Just put it at end of the function after you appendChild. Hopefully this should fix your issue.
Reference: http://www.openjs.com/scripts/dom/class_manipulation.php
Related
I am facing an odd problem. I im trying to parse the following html:
The problem is that when I do
response.xpath('//div//section//div[#id="hiring-candidate-app"]')[0].extract()
I only get
'<div id="hiring-candidate-app"></div>'
instead of all the content under hiring-candidate-app.
I would like to get, for instance, inside-content, but it looks like I am not even getting that in the response. This webpage requires to be logged in, which I am.
Thanks in advance!
It looks like your Xpath is grabbing the right thing. But your issue might have to do with the '[0]' part of the call. I would remove that to get the full content of the div.
It looks like the elements in question sit on an <iframe>, and therefore live in a different context. You need to activate or switch to the context of the iframe, eg. using JavaScript to interact with an iframe and the document inside of it, e.g.
//Note: Assigning document.domain is forbidden for sandboxed iframes, i.e. on stacksnippets
//document.domain = "https://stacksnippets.net";
var ifrm = document.getElementById("myFrame");
// reference to iframe's window
//var win = ifrm.contentWindow;
// reference to document in iframe
var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
// reference an element via css selector in iframe
//var form = doc.getElementById('body > div > div.message');
// reference an element via xpat in iframe
var xpathResult = doc.evaluate("/html/body/div/div[1]", doc, null, XPathResult.ANY_TYPE, null);
<iframe id="myFrame" src="https://stacksnippets.net" style="height:380px;width:100%"></iframe>
However, as you can see when you run the snipped, cross-document interactions are only possible if the documents have the same origin. There are other, more involved methods like the postMessage method that provide the means of interacting cross-domain.
Question edited:
I wrote a page with jquery-bootgrid data API.
Its should be calling with AJAX to my NancyFX REST API, but it isn't.
Client side:
I'm serving the bootgrid from a local repo:
<script src="~/scripts/jquery.bootgrid.min.js"></script>
Maybe I shouldn't be using the .min.js file but rather the open one for debugging? If so, could you walk me through what to do, or point me in the direction?
The page code is
...
data-toggle="bootgrid" data-ajax="true"
data-url="/cars/0" data-method="GET"
Server side:
I have the html page served by NancyFx and is seen ok, except for the grid which is empty. There's an API module with a breakpoint in Visual Studio (running on localhost), with the following:
Get["/cars/{status:int}?current={current}&rowCount={rowCount}"] = parameters => ...
This code is never called. How can I force the debugger to catch ANY call before the routing is checked, and show me what's coming into the server?
I'm using the chrome debugger.
The current URL is not valid by Nancy standards. We don't add query string params to the route.
You would want to write something along the lines of:
Get["/cars/{status:int}"] = parameters =>
{
var status = (int)parameters.status;
var current = (string)parameters.current.TryParse("");
var rowCount = (int)parameters.current.TryParse(10);
...
}
Along those lines. (written off the top of my head)
An alternative approach is to bind the request like so:
Get["/cars/{status:int}"] = parameters =>
{
var request = this.Bind<MyRequest>();
...
}
public class MyRequest
{
public MyRequest()
{
RowCount = 10;
}
public int Status {get;set;}
public string Current {get;set;}
public int RowCount {get;set;}
}
Changing the nancy to Get["/cars/{status:int}"] = parameters => did the trick of catching the request.
The ajax wasn't being called because I lost the JQuery first line...
$(document).ready(function() {
To get the current and rowCount you need to use
var current = (int)Request.Form["current"];
var rowCount = (int)Request.Form["rowCount];
By the way, the Get wasn't working (I think its a Bootgrid bug) so I changed it to POST.
The simplest way to debug any jQuery library is by using the in-built debugger, it's kinda difficult for me to use chrome for that , so I use Firefox but if you are habitual of chrome then use it, the functionality is almost the same, but with Firefox you can directly switch to the events associated with any element in the html (in the inspect section)
Once you get into the debugger, set the breakpoint and refresh the page either by F5 or Ctrl+F5 if you selected the valid breakpoint you can see all the values associated with every variable also with every function.
Secondly, use the step-in option in the debugger to see where the exact line is pointing, if it's refering to any other file it will pop open automatically in the debugger menu. Firefox's spider monkey is much good at debugging and relating codes (that's totally my opinion).
3- for the api calls, the reason for data not being processed or not displayed, very much lies within the structure of the library,(on what parameters the data is called/fetched/retrieved), for this try to use the "watch expressions" option in debugger and try implementing the code on loaded dom in console section with trigger on the node which you think is bugged or which should display the value.
I have 2 select controls. One change event updates the other. Also, it updates a grid inside update panel.
On page load, I call an ajax method to get the drop down values for both select. I populate the control and trigger a button click event which then updates the grid inside the update panel.
Everything works fine in all browsers, except in Firefox. Any idea as to why this might be happening?
Upon using break point i discovered that in other browsers the server side method is called first and then the ajax method while in Firefox its the other way around.
I narrowed down the issue to when using EndRequestHandler. I use EndRequestHandler event to change the class for a control. I remove that functionality and its perfect. The code for it is below:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler()
{
var type = $('[id$=ddlType]').val();
$('a[data-categoryid="' + type + '"').parent().addClass('selected');
}
Finally, there was a typo in my code. I forgot the closing square bracket in the EndRequestHandler. Surprisingly, the other browsers didn't care about it!
Updated code.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler()
{
var type = $('[id$=ddlType]').val();
$('a[data-categoryid="' + type + '"]').parent().addClass('selected');
}
I am using the following directive to create a ckEditor view. There are other lines to the directive to save the data but these are not included as saving always works for me.
app.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: function ($scope, elm, attr, ngModel) {
var ck = ck = CKEDITOR.replace(elm[0]);
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
setTimeout(function () {
ck.setData(ngModel.$modelValue);
}, 1000);
}; }
};
}])
The window appears but almost always the first time around it is empty. Then after clicking the [SOURCE] button to show the source and clicking it again the window is populated with data.
I'm very sure that the ck.setData works as I tried a ck.getData and then logged the output to the console. However it seems like ck.setData does not make the data visible at the start.
Is there some way to force the view window contents to appear?
You can call render on the model at any time and it will simply do whatever you've told it to do. In your case, calling ngModel.$render() will grab the $modelValue and pass it to ck.setData(). Angular will automatically call $render whenever it needs to during its digest cycle (i.e. whenever it notices that the model has been updated). However, I have noticed that there are times when Angular doesn't update properly, especially in instances where the $modelValue is set prior to the directive being compiled.
So, you can simply call ngModel.$render() when your modal object is set. The only problem with that is you have to have access to the ngModel object to do that, which you don't have in your controller. My suggestion would be to do the following:
In your controller:
$scope.editRow = function (row, entityType) {
$scope.modal.data = row;
$scope.modal.visible = true;
...
...
// trigger event after $scope.modal is set
$scope.$emit('modalObjectSet', $scope.modal); //passing $scope.modal is optional
}
In your directive:
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
scope.$on('modalObjectSet', function(e, modalData){
// force a call to render
ngModel.$render();
});
Its not a particularly clean solution, but it should allow you to call $render whenever you need to. I hope that helps.
UPDATE: (after your update)
I wasn't aware that your controllers were nested. This can get really icky in Angular, but I'll try to provide a few possible solutions (given that I'm not able to see all your code and project layout). Scope events (as noted here) are specific to the nesting of the scope and only emit events to child scopes. Because of that, I would suggest trying one of the three following solutions (listed in order of my personal preference):
1) Reorganize your code to have a cleaner layout (less nesting of controllers) so that your scopes are direct decendants (rather than sibling controllers).
2) I'm going to assume that 1) wasn't possible. Next I would try to use the $scope.$broadcast() function. The specs for that are listed here as well. The difference between $emit and $broadcast is that $emit only sends event to child $scopes, while $broadcast will send events to both parent and child scopes.
3) Forget using $scope events in angular and just use generic javascript events (using a framework such as jQuery or even just roll your own as in the example here)
There's a fairly simple answer to the question. I checked the DOM and found out the data was getting loaded in fact all of the time. However it was not displaying in the Chrome browser. So the problem is more of a display issue with ckEditor. Strange solution seems to be to do a resize of the ckEditor window which then makes the text visible.
This is a strange issue with ckeditor when your ckeditor is hidden by default. Trying to show the editor has a 30% chance of the editor being uneditable and the editor data is cleared. If you are trying to hide/show your editor, use a css trick like position:absolute;left-9999px; to hide the editor and just return it back by css. This way, the ckeditor is not being removed in the DOM but is just positioned elsewhere.
Use this java script code that is very simple and effective.Note editor1 is my textarea id
<script>
$(function () {
CKEDITOR.timestamp= new Date();
CKEDITOR.replace('editor1');
});
</script>
Second way In controller ,when your query is fetch data from database then use th
is code after .success(function().
$http.get(url).success(function(){
CKEDITOR.replace('editor1');
});
I know, that this thread is dead for a year, but I got the same problem and I found another (still ugly) solution to this problem:
instance.setData(html, function(){
instance.setData(html);
});
I am trying to copy the image from one canvas to another canvas. I have seen an answer saying that an easy way to do it is:
var Scanvas = $("#sourceCanvas");
var Scontext = Scanvas.get(0).getContext("2d");
var Dcanvas = $("#destinationCanvas");
var Dcontext = Scanvas.get(0).getContext("2d");
//draw something in Scanvas
Dcontext.drawImage(Scanvas, 0 ,0);
However, whenever I try this I keep getting a Type Error.
The browser I am using is an up-to-date version of Google Chrome, so I don't think that is the problem.
You are using a jQuery object as the first parameter of drawImage().
It needs to be a pure DOM object.
You can access the underlying DOM objects in jQuery by calling get() and specifically get(0) if there is only one object in jQuery selection, as mentioned in the comments.
DContext.drawImage(Scanvas.get(0),....)