Currently my angular app is dynamically loaded into the current webpage. This means that as well as all scripts (angular.min.js / controllers etc) and is loaded with the Wicket AJAX request and injected in the current webpage.
The scripts are included in the head, the div injected in some form in the body.
At this point Angular should detect the div and start up the app, but nothing happens. when i try to use console.log(angular) i get angular just like with an normal app. When i try to load the same webpage (without the AJAX injection) the app starts up fine.
How can i manually start AngularJS, or notify to start?
http://docs.angularjs.org/guide/bootstrap
Manual Initialization
If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when
you'd need to do this include using script loaders or the need to
perform an operation before Angular compiles a page.
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<body>
Hello {{'World'}}!
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});
</script>
</body>
</html>
In short: Remove ngApp directive from your html and manually bootstrap
Developer guide has the most you need, I suggest everyone to read it.
Related
I would like to evaluate the features of pivot grid using simple test html without cmd.
I've read the information from those links but I still couldn't install a working environment
https://docs.sencha.com/extjs/6.0/co...ivot_grid.html
https://www.sencha.com/forum/showthr...out-Sencha-Cmd
http://se.sencha.com/setup-guide/
I've downloaded the core framework ('ext-6.0.1-trial.zip')
and pivot addon ('ext-addons-6.0.1-trial.zip') from sencha site
and unpacked them on my test web server:
www.mydummy.server.org/lib/extjs/ext-6.0.0/ <- framework
www.mydummy.server.org/lib/extjs/package/ <- addon
and tested it calling the pivots in kitchensink example with:
www.mydummy.server.org/lib/extjs/ext-6.0.0/examples/kitchensink/index.html
in such setup they start without errors.
The target location of the addon is a bit strange for me,
I was sure I should unpack addon to the package directory of the framework
www.mydummy.server.org/lib/extjs/ext-6.0.0/package/
but then the kitchensink example doesn't work
(kitchensink calls pivot with ../../../package/pivot )
Now I wonder how should I include framework and addon in own html example,
I've tried something like:
<link href="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/ext-all.js"></script>
<link href="www.mydummy.server.org/lib/extjs/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="www.mydummy.server.org/lib/extjs/packages/pivot/build/pivot.js"'></script>
<script src="www.mydummy.server.org/lib/extjs/packages/exporter/build/exporter.js"'></script>
The links are ok (no http error) but the simple pivot is not rendered
and framework couldn't load further classes:
[Ext.Loader] Some requested files failed to load.
What is the correct setup of extjs and pivot without cmd?
Thank you,
Annie
Couple things here.
For the KitchenSink, if you open up www.mydummy.server.org/lib/extjs/ext-6.0.0/ in your browser you will be shown an index.html. There will be a green button to show the examples which will point to www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/index.html (notice the build dir in there). Then if you click on the KitchenSink it will load from www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/kitchensink/ (once again, notice the build dir). This is due to the KitchenSink being a Cmd app which will build to that build dir. The examples dir outside the build dir is the development version of the app which is why we still provide it for the source.
Next, about how to use the pivot grid's Cmd package outside of the Cmd package. we build the Cmd package so if you look in the package's build dir you should see a built JavaScript and CSS file that you can load via <script> and <link> in your HTML.
<html>
<head>
<title>Pivot Grid Test</title>
<link href="http://releases/ext/6.0.1.250/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="http://releases/ext/6.0.1.250/build/ext-all.js"></script>
<link href="http://localhost/ext-addons-6.0.1/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="http://localhost/ext-addons-6.0.1/packages/exporter/build/exporter.js"></script>
<script src="http://localhost/ext-addons-6.0.1/packages/pivot/build/pivot.js"></script>
</head>
<body></body>
</html>
Notice I have the exporter.js loading before pivot.js and this mostly works except that I do see something that I'd call a bug for us. In pivot.js, we define Ext.ux.ajax.PivotSimlet which extends Ext.ux.ajax.JsonSimlet (which is in the framework's ux package). This is fine to extend like this but PivotSimlet would only be needed if you want to have simulated data in your application (which most wouldn't unless in dev). Two ways you can fix this, remove that class from pivot.js or include the ux's JavaScript/CSS (however that package contains a lot of code that you may not need).
Thanks a lot for your explanation.
I've added these classes to get an working example:
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/Simlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/DataSimlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/JsonSimlet.js"</script>
is there any reason for something to work in page inspector and not in real debug mode?
In particular I'm using fullcalendar.min.js (JQuery plugin) in some tab content and I see it very well in page inspector but when debug the calander is not shown..
in header:
<link rel="stylesheet" href="./../../Content/fullcalendar.css" type="text/css" media="all" />
<script src="./../../Scripts/js/fullcalendar.min.js"></script>
in body:
<section class="tab events-tab">
<section class="events-tab-inner">
<div id="calendar"></div>
</section>
</section>
in console of the web page loading I have the below errors (I'm not sure they are directly related to my calendar thing):
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.min.js:3
FB.getLoginStatus() called before calling FB.init(). all.js:56
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Based on your console output that you've included above, it seems that there are a few errors. Not sure why they would work in page inspector and not debug though. It seems like it should be breaking everywhere. Let's approach each error one by one:
1. Invalid Image Paths
It appears that you may be using jQuery UI for some features within your code. The jQuery UI suite contains images located in the /images directory when you download the .zip file that the CSS references as background-images. These images are expected to be nested on directory in from the location of the CSS file. For example,
[CSS Directory]
-> jquery-ui.min.css
[images]
-> star-off.png
-> ...
-> etc.
The only way to change this structure is to modify the relative urls within the minified jQuery UI CSS file.
2. Facebook JavaScript SDK error
I have never personally used the Facebook JavaScript SDK. However, that is what it appears you are using. From the error it sounds like you never initialize the Facebook object via FB.init() before you call FB.getLoginStatus(). Try this:
<script type="text/javascript">
/* Locate your FB.getLoginStatus() call and place FB.init() before it */
FB.init();
FB.getLoginStatus();
</script>
Other than that, you may need to refer to their documentation for how to properly initialize the FB object for use.
Hope this helps. Good luck and happy coding! :)
I am currently creating an Intranet ERP application that will integrate an already existing corporate Joomla 3.1 based web site.
The extension i made so far only has one default controller php file and everything is made using a JavaScript UI framework. (i.e. jqWidgets) So i am not using model, views, helpers.
The other php files are there to respond to the client side interface AJAX requests.
So i mainly need Joomla for the user authentication and session control features but i dont want it to confine my extensions output to the content area... i need the entire document surface... no menu, no module columns, no nothing !
Can it be done ?
Two ways
component.php in the template will show only the component's output add &tmpl=component to your urls
Make a custom template that only outputs the component
<html>
<head>
<!-- put what scripts stylesheets you need etc//-->
</head>
<body>
<jdoc:include type="component" />
</body>
</html>
i am using script tag in my MVC view and my src for Script tag is "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js".
the issue iam facing is html buttons are not working/postingback.
If i remove script tag,everything works fine.
whts the actuals problem with my code.?
there could be number of issues, the script tag you are refereing to includes the jquery library from the CDN. One possibility could be that there is some javascript code in the view that is disabling your buttons you can verify by doing the following
1) keep the script tag (jQuery) included in the view
2) in the script section of your view (if you have else create one like)
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
3) so your final code will look like
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
check now if it works... if it works then it means that you have some code that is disabling the buttons and upon removal of jquery library js error would have occured that why it seems to work...
Is there any easy way to make a Ajax call in a Webpart?
I have a Webpart with a button, and I want that when the user pushes the button, it executes a server function without reloading the page. And then, if all is ok, execute a callback function. I thought that the best way is with a AJAX call.
But when I've looked for how to do it I only get some complicated tutorials that I don't really understand (and most are from old versions of Sharepoint). Any help? What is the best way to start? Thanks
Have you tried using jQuery with a content editor web part? I've done this before and it's rather easy. Here is a step by step for how I do it.
Download jQuery.
Upload jQuery to SiteAssets in Sharepoint.
Upload coded file (see below) with AJAX calls.
Point to coded file via Content Editor Web Part.
It should work!
Here is a default way something should work.
<html>
<head>
<script src="<point to jquery file>"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#main').load('<RELATIVE URL TO SERVER PAGE>');
});
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
If possible I would go for a Visual Web Part in Visual Studio. You basically create a .NET user control. It saves you a lot of manual control definitions etc.
If in SharePoint2007 you might want to take a look at the "Smartpart". It has ajax support and some great tutorials on how to use it.