I am converting a website to MVC and cannot get this link to work properly in MVC. In the original site, this link runs a .js file that creates a game for users to destroy the site for fun. My question is, how do I get the onclick of this link to function properly in MVC? I have spent a lot of time looking in Stack and Google for a solution, with no luck.
<a id="destroy" href="javascript:var%20i,s,ss=['~/Content/bundles/dd.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);" title="JavaScript Game">
This may not work with IE
You should use JQuery to add Click Event, remove the Code from tag.
and do the following:
<script>
$(document).ready(function(){
$("#distroy").click(function()
{
//Your Code Here
})
})
</script>
Related
I am making a web form in Dynamics 365 and am currently trying to figure out, how to add a javascript code to it. Web form is working and is displayed correctly (submit also works), but the problem is in the way javascript code has to be added. I tried following this guide: https://learn.microsoft.com/en-us/dynamics365/marketing/developer/marketing-form-client-side-extensibility
The problem is that I can't get even the basic console.log() to run. I added the code to the form in a script tag in the < head>, like this, but the code gets removed when i inspect the webpage upon load. loader.js, which is needed, loads. Here is the sample code, that I added.
<pre>
<script type="text/javascript">
console.log("SHOW ME");
MsCrmMkt.MsCrmFormLoader.on("formLoad", function(event) {
console.log("formLoad");
})
MsCrmMkt.MsCrmFormLoader.on("formRender", function(event) {
console.log("formRender");
})
</script>
</pre>
Can somebody help me and show me what is the correct way to add JS code to the page?
Thank you
Mybe you should give look at HTML Web References for Dynamics 365
Okay, so this one is gonna be a doozy!
NOTE: This will be for a windows desktop application running sqlite and mongoose, so loading times are not as important (to me, for now) and there will be no connection to a non-local server.
I have searched all over and couldn't find anything that is specific to my situation, most seem to load into an iframe or use that framework provided by css-tricks.com
I am using my own (sorta) framework. The libraries i am using are bootstrap 3, jquery 2.1.4, jqueryui 1.12.1, and Bootstrap-select v1.12.1
index.php will have all content dynamically loaded into a div#wrapper and will act as the head of all page loading. This is the skeleton of my index.php. In sidebar.html the links have the attribute 'pagetoload', jquery catches the click event and loads the data into div#wrapper
<body>
<?php require_once("res/sidebar.html"); ?>
<div class="container-fluid" id="body-container">
<div id="wrapper" style="border:1px black solid;">
<!-- dynamic page content will be loaded here-->
</div>
</div>
<script src="res/js/jquery.js"></script>
<script src="res/js/jquery-ui.js"></script>
<script src="res/js/bootstrap.js"></script>
<script src="res/js/bootstrap-select.js"></script>
<script src="res/js/menu-handling.js"></script>
<script>
//index.php js
$(document).ready(function () {
$.get("home.php", function (data) {
$("div#wrapper").html(data);
});
$("a.loader").click(function (e) {
e.preventDefault();
$.get($(this).attr("pagetoload"), function (data) {
$("div#wrapper").html(data);
});
});
//dateFormat 10/dd/yy to constrain input only to october
//get current month number and constrain to prevent additions to wrong month
$("#date-input").datepicker({
dateFormat: "12/dd/yy"
, constrainInput: true
});
$("#date-input").focus(function () {
$(this).datepicker("show");
});
});
</script>
</body>
Each page that will be dynamically loaded will ideally contain minimal php and only contain the necessary html/css/js for that page. My issue is for example, after loading one page such as my dbviewer.php (which contains js and gives me the asynchronous loading warning) and reloading home.php into the container, javascript no longer works. The javascript for each page are inline tags.
I have tried piling all the javascript for every dynamic page into index.php so that it's all loaded on startup, but the issue arises that it still won't work. What is the best method make this dynamic loading work while having each page modular. I have tried to researching this but only stuff like using the hashTag thing comes up.
If you need more code from my files please post, i think i explained it enough for you to understand as there is nothing too wild going on outside of index.php Just scripts inside each dynamic page that basically interacts with dom elements using jquery.
I'm leaving this answer because it helped you, and also can be usefull as a general rule of thumb for any developer out there that can find himself in similar situation.
So when developing the app you have to separate all javascript, css assets in master file to host them on first pageload. (maybe it's event better for performance)
All other server generated files (php, node.js etc) files you have do structure to only be data source for pages that users click or land to .. or at least try to..
after that you have to trigger
$.ajax().callback
function on frontend to do job on each page. Such as page effects, data manipulation and etc .. Callback is very important because that's when data was actually loaded!
cheers, k
This is going to be very hard for me to explain, but I'll give it my best shot.
I am writing a sort of portable book system, using HTML, CSS, and JavaScript. It's essentially a website; you can throw the package up online and it can function like a full website, or keep it local on the machine to read it as if it were a website.
This means I cannot use things like PHP or MySQL; this is all using browser functionality, as anyone who is reading it on their own computer likely wouldn't have WAMP or the like installed to run it.
I'm having a problem trying to make it so that in my main .htm file's <div id="content"> tag always loads external .htm file, even when those external .htm files have <a> links of their own.
I have tried using jQuery to run load(), but when the new content rendered and I clicked on those links inside that new content, it completely drew away from my main page and loaded the full external .htm file into my browser.
And I think I understand why. When I use the $('a') after loading, it only renders that function to the index.htm's own links, and not the new ones I load into the <div>.
I don't want this effect. I want each and every single link loaded each and every single time to always draw content from the linked .htm file into the index.htm's <div>.
I have looked around and found several related answers here, but they either don't work or give me the same result. One was a plugin called "PJAX", which looked like it worked in the library example, but when I loaded it into my own project it wasn't running. I have tried using the ajax() calls I saw in another answer that addressed the url cache and success parameters, and that didn't work.
What am I doing wrong? I didn't think something as simple as loading an external .htm file and repeating the load inside its <a> wouldn't be so intricate as whatever is cutting me off from fixing this. I thought the load() function did the job up until I clicked the other <a> links.
Code Examples to help clarify what I'm talking about. Not full files or perfect, but a model.
index.htm
<body> <!-- book interface -->
<div id="content"></div>
</body>
page2.htm
<body> <!-- a sample page read on the book, fed in the #content -->
test link <!-- link inside the page -->
<!-- ^^^ That link is supposed to open the page1 inside the #content tag of index.htm instead of on its own. -->
</body>
renderpage.js
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
return false;
});
});
When page2's link loads inside index's <div>, and you click the link inside it, it doesn't change the <div> to page1's content. It reloads the entirety of page1 into the browser.
Turns out Chad's answer was correct. If anyone feels like chiming in, I'd like to learn how this works as it did.
$(document).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').load(ahref);
return false;
});
});
I am having a page with multiple facebook-comment areas, which are all different.
In order to save page load time, I want to make them only appear/load when the user clicks some button.
The problem is, when I've written the code
<div class="fb-comments" data-href="http://mypage.com" data-width="600" data-numposts="5" data-colorscheme="dark"></div>
in html, it all worked but when I've added the code via .innerHTML it does not show anything expect when I include the sdk after the html is manipulated. the problem with that is, that all other comment-boxes cannot be shown since the sdk loaded already.
How do I make all comment-boxes visible to the user when they click a button using JavaScript?
I´ve solved it like this. I changed the comment code to
<fb:comments href="http://mypage.com" width="600" numposts="5" colorscheme="dark"></fb:comments>
and after I´ve added the code i refreshed this particular section with
FB.XFBML.parse(document.getElementById("parent of commentField"));
How can I add
<a href="javascript:function foo(){alert('hi');}" title="alert">
Drag to your bookmarks bar
</a>
to my WordPress post?
I built a bookmarklet and I want to pass it through my blog, but WordPress is stripping out the javascript from my post when I save it.
Javascript in WordPress Single Pages and Posts
<script type="text/javascript">
<!--
// your code
//--></script>
Source:
https://codex.wordpress.org/Using_Javascript
I have no issues embedding that code in the HTML editor on my wordpress site. There is a problem with your javascript code- that defines a function, but never calls it. I have
Drag to your bookmarks bar
in a post, and I get the alert when click, as well as the bookmarklet.
The issue is likely to be caused at the browser end. Chrome's XSS was the problem for me and I solved it by adding the line header ("X-XSS-Protection: 0"); to wp-blog-header.php in the root folder of my installation. This may not be ideal as it applies across the whole site. It would probably be better to add it where it would only apply to the post/page which needs to render the bookmarklet.
This is old, but still relevant with Version 4.9.5 for wordpress, so I answer with my solution for this:
Wordpress filters out any Javascript you use in your Posts or pages, that is why your code gets lost. I did the following steps to add a "javascript:" Link:
Add the Link you want to your post, use "#" as the href and add a id to the tag (in Text-Mode of the Editor):
This is my JS Link
Install a Custom Javascript Plugin. I used Simple Custom CSS and JS
Add the Javascript you want with help from the plugin:
jQuery(document).ready(function( $ ){
function yourFunction() {
alert("It works");
}
jQuery('#idOfYourLink').on("click", yourFunction);
});
The important part is adding the on-Handler to the Link you want to use. Now the Javascript is loaded right after the page got loaded. And a click on the link will call the function yourFunction
I guess that wordpress editor is used to work with textual data/content. So, to add your js you can find plugin for adding custom js. Also you can add a Custom field to the posts.
Let it be "custom_js" - the name of a field that would contain js code. And then edit theme post temlate, adding "echo" of custom_js.
<?php
//single.php
echo get_post_meta( get_the_ID(), 'custom_js');
?>