I'm facing an issue in knock out js,
I'm binding the options of the select control from an observabale array,
If the number of options are more, if I click on the select option, jquery mobile design gets hanged.
I'm using cefsharp form loading chrome page inside cefsharp,
The thing is the select feature works fine in chrome browser but not inside cefsharp,
I'm binding to the select control as follows,
Html,
<select name ="name" id = "name" data-bind ="options:namevalues">
Javascript,
<script>
function viewmodel()
{
var self=this;
self.namevalues = ko.observablearray(['abc','bcd']);
//many name values, say 20, it gets hanged inside cefsharp but works fine in chrome, no error console messages
}
Could someone help.
Have you tried loading the chrome dev tools?? It would enable to use breakpoints etc etc - a sane development experience.
in cefSettings:
PackLoadingDisabled=false
then (after the browserInitialised evennt has fired) call
_browser.ShowDevTools();
make sure you ship the 'pak' file in the bin dir (latest nuget version of cefSharp should take care of this in the targets)
then you should see another window open with the dev tools.
Hopefully that'll help diagnose your issue.
I've tried knockout and angular in there and both worked out fine (although angular needed some awkward route work)
Related
This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
Long story short:
We've had errors being logged concerning a JQuery/JQueryUI based system for some time. At it's core we're doing a pretty basic click link -> JQuery AJAX GET -> Open JQueryUI modal pattern.
The error we were getting appeared simple - "Object doesn't support property or method 'dialog'" - leading us to believe there was an error with JQueryUI. After expending a lot of time ruling out browser incompatibilities, bad code on JQuery's end, bad code on our end, angry code gods... we caught a lucky break. A 100% repro on one of the machines in the office.
Turns out the thing was riddled with adware - specifically [an older version of] easyinline - http://www.easyinline.com. When the user clicked any link a cascade of javascript files would be loaded, including reloading JQuery from Google's CDN.
For most links this isn't really a problem - they take you off the page anyway and everything reloads. But for our modals it meant that every modal link would stamp over our JQuery at the point the request was sent, resulting in the response trying to make use of the 'new' $ which would now be missing JQueryUI and any other plugins.
Initially we thought about making another global var ($$ or something) for 'our' JQuery and explicitly using that in our code instead of just $. The issue with that is that we were using a few other 3rd party tools which rely on $ and the adware-loaded $ is a different (older) version. So it's important that we preserve $ correctly.
Any ideas? I'm aware of JQuery's noConflict() method but after a cursory glance don't think it fits the bill.
Ultimately we've decided to re-establish our JQuery integrity when we receive any ajax responses (i.e. just before the open modal code is executed). All our ajax stuff is wrapped in our own handler so this was fairly easy to inject across the board.
Basically;
We have the original JQuery 'saved' - we've got it in-scope thanks to our handler but it could be easily put into a separate global (like $$) just after it is loaded. In our ajax response handler we've got a fairly straightforward check;
if (window.$ !== $$) {
window.$ = window.jquery = window.jQuery = $$;
}
This will reset the global jquery back to what it should be.
well this is just a work around and not a full fledged solution.
you can try multiple things here
1. if you have control over what the adware loads then just put in something like this if(!$) where they try to load the jquery
2. try loading your plugin at the end of the page
3.even if end of the page is not working. Try injecting the link(a script tag using document.write) to the plugins CDN in the Jquery document ready event. this would ensure that the plugins code would be loaded at the end when all the jquery is already loaded (not a preferred thing).
I have a local jQuery Mobile project going (inside PhoneGap, thus file:// protocol) where I sometimes need to fetch external pages (using http://) from a server where the content too are jQM pages with almost identical markup (except for the content, which is generated from a CMS).
Setting $.mobile.allowCrossDomainPages to true gives me the page, and that is all right. Going Back, however, fails. I get stuck in a place where /www/index.html is not found on the server (like, doh, of course..). Is there a way to "remember" where I came from, taking me back to the local html page I originally came from?
We just added a docs page on PhoneGap in jQuery Mobile for RC3 that should help you out quite a bit:
http://jquerymobile.com/test/docs/pages/phonegap.html
I tried a simple javascript [Example: document.getElementById("mydiv").style.display = "none";] on a web page and tested it on BlackBerry 4.5 simulator browser and it worked.
Now I have an app (JRE 4.5 - Eclipse Plugin) with a BrowserField embedded in a browser and I access the same page in the BrowserField. I do have the following code added to my app
myrenderingSession.getRenderingOptions().setProperty(RenderingOptions.CORE_OPTIONS_GUID, RenderingOptions.JAVASCRIPT_ENABLED, true);
But the java script is not working. Do I need to add custom code to ensure java script executes? Anything in the Event.EVENT_EXECUTING_SCRIPT? Please help!
I simply can confirm I have the same code on OS 4.5 to enable JS, and the page with JS works OK for me. However should also say I don't hide anything on the page via JS, so I can't confirm if the same JS to hide an element works for me.
Also - I don't handle Event.EVENT_EXECUTING_SCRIPT in any way. So I am sure the code you are using to enable JS is enough to expect JS support in your BrowserField.