I'm using the angular-fullstack yeoman generator in my project.
It contains Jquery by default.
<script src="bower_components/jquery/dist/jquery.js"></script> is correctly inside the index.html
Curiously, in my js file, Jquery works perfectly inside this:
window.onload=function() {
//my jquery code working here
}
But, it doesn't work at all if I put in this instead :
$(document).ready(function() {
// my code is not working here :(
});
And from there, I'm getting some trouble. When I switch from a page to an another one, Jquery stopped. I need to refresh the page to keep Jquery working.
I might not have this problem if my Jquery code was inside $(document).ready(function()
As I'm using angular-fullstack generator which already makes almost every thing in my project, I don't know where I need to make some change to make it works ..
Any suggestion ? Thanks a lot. :)
As far as I know using jQuery with AngularJS is not a good practice. Generally if in your angular project you need to use jQuery it means you have to create a custom directive to have some logic there or less ideal alternative is to use angular.element which comes with jQuery lite features.
Regarding your problem please test if this will work:
jQuery(document).ready(function($) {
// example $('.btn').hide();
});
Related
I have a ASP.NET Core application which renders tables on the serverside, some are quite complex.
I used to use sorttable: Make all your tables sortable for make the tables sortable; now as I have included vue.js (2.0, without npm / webpack), the jquery plugin obviously does no longer work properly.
Now, before i transition fully over to 100% clientside table rendering - which I want to avoid for now, if its possible, cause its complex - is there something similar to add sorting to a rendered html with vue or is that concept that old and no longer viable in vue.js and other modern frameworks?
So, questions are:
How to make sorttable work in vue.js are (without npm / webpack)
Or how to add something like that to a already server rendered html with vue?
Looking forward and regards, Peter
Okay, got it. That was a journey :-)
Sorttable script: https://www.kryogenix.org/code/browser/sorttable/
The script:
Vue.component('date-table', {
template: '<div><slot></slot></div>',
props: ['innerHtml'],
mounted: function () {
var self = this;
sorttable.makeSortable(this.$el.firstChild);
},
beforeDestroy: function () {
}
});
The markup:
<date-table v-once>
HERE IS MY ORDINARY HTML WHICH SHOULD BE SORTED BY
"sortable.makeSortable(...."
</data-table>
I currently have a pageMaster file which is an HTML file. I am trying to keep it clean. I am linking my javascript files to this pageMaster for example <script type="text/javascript" src="/resources/js/mainpage.js"></script>. I would like to link an HTML page this pageMaster to avoid having a clutter. Is this possible?
This is what i'm attempting <script="text/javascript" src="/resources/state-icons.html"></script> but it is not receiving back the icons I am expecting
Since html isn't a script, you can't load it as an script (using <script type="text/javascript"> does't make a lot of sense, does it?).
You have to use a preprocessing language, like php, which will build the output on the server. Using php, you could have something like:
<p>Some html
<?=file_get_contents(__DIR__.'/resources/state-icons.html')?>
...more html...</p>
Or:
<?php
include(__DIR__.'/header.php');
?>
...html...
If you can't or don't want to use a server-side language, you can do this with javascript. You can download the contents of the other page and insert them wherever you want (I will use jQuery just because it's easy to write, you don't actually need it):
HTML:
<span class="some-placeholder-for-state-icons"></span>
JS:
$(function() {
$.get('/resources/state-icons.html',function(html) {
$(".some-placeholder-for-state-icons").html(html);
});
});
Of course, this way will be slower and produce more requests per page view. Which one is better depends on what you want to achieve.
You can't do something like this with html. This is possible only for javascript file or stylesheets (css)
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap
I've never been able to figure this out!
Yeah I copy the java script in but what is the html code required and css??
Their website doesn't explain any of that (unless I am missing it!!)
If someone could please break it down for me I would be very grateful
Actually used this in a site before, this is what I have in my code:
In the header, assuming you have it installed in the /soundmanager2/ directory:
<script type="text/javascript" src="soundmanager2/soundmanager2.js"></script>
<script type="text/javascript">
soundManager.url = 'soundmanager2/';
soundManager.useHTML5Audio = false;
soundManager.useFlashBlock = false;
soundManager.debugMode = false;
</script>
Then on each element you want to play a sound with on click, include this attribute:
onClick="soundManager.play('Name','path/to/filename.mp3')"
Or you can simply call soundManager.play wherever you want.
Granted it is not the easiest interface in the world in terms of copy and paste code and your good to go.
However all of the demos on there site have all the CSS / HTML you need to get started writting your own themes and templates.
There site is mor about the JS behind the scenes then the look of the interface.
http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ (as an example)
Although I am sure you were hoping for downloadable code I hope this at least gets you pointed in the right direction.
i'm using sifr 3 and i'm doing font replacement inside updatepanel.
after postback the flash disappear and i get the pld font instead.
what to do? please help me.
thanks ;)
You'll need to run the sifr update after your updatepanel is finished..
You can write a script to attach to the PageRequestManager, using an event like add_endRequest.
You could put this snippet in your html code:
<script type="text/javascript">
function pageLoad(sender, args) {
sIFR.replace(font, { selector: '#content h2' });
}
</script>
It will run the sIFR replacements each time the page reloads. This is on normal PostBack and Ajax postbacks. Make sure you have included a ScriptManager instance on your page.
note: this question is similar to:
sIFR not working with prototype AJAX page load.