Calling a content page's javascript from a master pages javascript - javascript

I am working on a web app that can display data in two drastically different formats. To do this, I am using a master page with two different content pages for the differing views. I am using .svc files to do AJAX style server requests. I would like to be able to do a service call from the master pages javascript, then run the appropriate onSuccess javascript method (which would ideally lie in another .js file) to display the data based on which content page I am in. I am guessing this would be done with some kind of function delegate, but I am new to web development and not sure how to do this. Any help would be greatly appreciated.

If you can do everything on one page, your HTML will probably look something like this:
<!DOCTYPE html>
<html>
<head>
<script src="masterScript.js"></script>
<script src="module/childScript.js"></script>
<script>
console.log(globalVariableFromMasterScript)
doSomethingFromChildScript(globalVariableFromMasterScript)
</script>
</head>
<body>
<p>This is the html page</p>
</body>
</html>

This was a stupid question... Just attach different js files to the content pages. Give the functions the same name and it works fine.

Related

Adding a JavaScript embed to HTML

I am given this code which should display an embedded small coupon version of this page https://weedmaps.com/deals#/1118217:
<script type="text/javascript">var coupon_id = 17811;</script>
<script type="text/javascript">var coupon_type = "deliveries";</script>
<script type="text/javascript" src="https://weedmaps.com/embed/coupon.js"></script>
I do not know how to add the JavaScript to the HTML correctly. I have placed the following scripts in the head section. But I don't understand how to have the coupon generate in the div I want it to. I have tried calling the JavaScript function, but I've never worked with JavaScript before. Could someone please help me embed this coupon.
I've taken a look at your script and first of all: it definitely should be placed inside the document and not into the <head> section because coupon.js is writing out html at the placement of the coupon.js script import.
In theory you just need to place the script and it should work but there are some problems:
You need to execute it on a web server - when running as a plain html file the script just tries to find the libraries in your file system which does not work.
It still would not work because it would still try to find some resources at your web-server. In mycase it the script tried to load http://localhost:63342/restpoints/deliveries/17811/deal which will not work
To prove 2. just try https://weedmaps.com/restpoints/deliveries/17811/deal with the correct domain. Then you are receiving correct JSON which is used to fill the coupon pane.
=> Consequently the script you were given has problems if it should be executable from domains different from "weedmaps.com"
Javascript can be between head tag but it advisable to put it below before the body closing tag, to allow your page contents loads first before loading javascript. Just import your javascript. and call out. Hope this was helpful.
<!DOCTYPE html>
<html>
<head>
</head>
var coupon_id = 17811;
The JS indicates it is looking for an element with an id of #weedCouponPane. Do you have this in your html? i.e.
<div id="weedCouponPane"></div>

Constantly execute javascript code on some webpage

What I would like to achieve is this:
I load some webpage and here are some clickable contents like buttons, clickable divs etc. What I want to achieve is: I want to constantly run javascript code that will click some buttons then after that wait for 15 seconds, refresh the page and repeat. (Yeah, some kind of a bot). I know how to achieve clicks etc. I will manage with the code but how to achieve such a functionality? I know that there was some extension for Chrome to do such things, but I can't remember now. Would be grateful for some tips.
I tried creating my own html file and dynamically loading whole html of the page I want the bot to work on into div of my html file. Something like this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Load remote content into object element</title>
</head>
<body>
<!--<div id="siteloader" style="width: 1000px; height: 1000px;"></div>​-->
<div id="siteloader"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$("#siteloader")
.html('<object data="http://linktowebpage.com"/>');
</script>
</body>
</html>
The problem is: it creates an iframe and it is so small and I can not make it any bigger (it's like 150x150 px).
As I say I would like to do it without doing such stuff (creating my own page etc.).
Would be grateful for any tips ;)
As far as I understand, you want to run your JS on some third party page. With <iframe> it won’t work because you could read page contents, at best.
You could write a code that does everything and run it in console. But, for instance, if you wanted to use jQuery, a page would have to have it. So the safest option in this case would be to have it written in pure JavaScript. The downside and disqualifying issue, as I guess, is you have to run it everytime after refresh.
In your case you could use a tool like Tampermonkey (Chrome) or Greasemonkey (Firefox) which allows you to run your JS per domain.
Use setInterval() to do the function repeatedly and ajax() to load the page.
Check below example to get started.
var i = 1;
setInterval(function() {
$.get("http://linktowebpage.com", function(data) {
$('#siteloader').html(data);
});
}, 60000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Specified URL will be loaded every 1 minutes</div>
<br>
<div id="siteloader"></div>

Same Html across multiple pages

I am looking to have a chunk of html containing a heading which i want to reuse across multiple html pages.
I have tried the EXACT code but it doesn't seem to work. it is displaying the script in HTML rather than actioning it.
index.html:
<html>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h1>This is a test</h1>
<script>$("#content").load("commonContent.html");</script>
</html>
commonContent.html:
<div id="content"><h2>If this shows my test worked!</h2></div>
Any suggestions would be much appreciated. Please note i am a newbie to javascript!
You need:
To include the jQuery library since your script depends on it
To put your script inside a <script> element
To put an element in the document in which you will load the content (you are trying to use one with id="content" but no such element exists).
I'd recommend using a server side or build time template system instead though. They are more reliable and better food for search engines.
For this type of thing I usually use php like this:
<?php include("youhtmlfile.html"); ?>
It is an advantage because this way you don't have to worry about browser support.

PHP include in head used for JS reference

This is a slightly weird question, but I couldn't find the answer anywhere and I'm far from a pro at PHP.
Basically, two things, firstly, can you use the PHP include function in the head of a webpage?
Also, if that is possible, is it also possible to use the included PHP file for referencing Javascript files? Because I've finished my template and I've been looking at different ways I can make quick changes to all pages once completed, and of course, PHP include seemed best, however, I may want to reference a JS file sometime, so would it be possible to have in the <head> something like this:
<?php include "ref.php"; ?>
And then that PHP file to look something like this:
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
And then, that should reference jQuery into all pages that have ref.php included in the head. Or am I just being silly?
If there's any other ways I could reference a JS file on all pages, please let me now :)
Yes that's fine. I think a term for the concept you're trying to go for could reasonably be "modularization". You can separate your site into different modules so that you only have to update the code in your include rather than changing the code for say, 10 different pages every time.
PHP simply processes all your code before it gets sent to the client, so the client (i.e. any web browser) will simply see the output.
Theoretically, you could even do something like this (even though there wouldn't be much use for it). This is simply to illustrate a point:
HTML:
<?php include "doctype.php"; ?>
<html>
<!-- etc. -->
doctype.php:
<!doctype html>
All the client would see is:
<!doctype html>
<html>
<!-- etc. -->
In my current site, I have the head in its own php file, my header (which contains navigation, etc.) in another php file, my footer in a php file, and then all my script elements inside yet another php file which is included at the end of the body.
There is a mistake i think in the syntax of include function , you may need to try this :
<?php include("ref.php"); ?>
By 'head of a web page' if you mean when beginning the code for a webpage, yes certainly you can do it. Infact it is more convenient to have repeating code blocks for all pages like the headers and footers stored as separate php files and then include them on pages. For eg <?php <!DOCTYPE html> <html><head><title></title><script...></script>......</head><body>..........?> in a file like head.php and <?php </body><footer>.......</footer> in a file like footer.php and them just use include on all pages
Yes you can do this but I would recommend that you take the time to break up the ref.php into header.php and footer.php so that head would be above the fold (body tag) and the footer will have the closed BODY and HTML tag so you can add any remaining items you need to in the footer.

Setting the Body's OnLoad attribute in an Asp.net MVC Master Page

I have a view using a master page that contains some javascript that needs to be executed using the OnLoad of the Body. What is the best way to set the OnLoad on my MasterPage only for certain views?
On idea I tried was to pass the name of the javascript function as ViewData. But I dont really want my Controllers to have to know about the javascript on the page. I really don't like this approach...
<body onload="<%=ViewData["Body_OnLoad"]%>">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
Edit - I suppose one idea would be to use jQuery's document ready event instead...
Any other ideas?
Now that JQuery is officially part of ASP.NET MVC, I would recommend using it. It's small, and adds tons of value to your application.
I would recommend adding Mustafa's version of JQuery that has the Intellisense comments included:
jquery-1.2.6-intellisense.js
Then add it to your Scripts folder (new in MVC Beta 1), and reference it like this:
<script language="javascript" type="text/javascript" src="../../Scripts/jquery-1.2.6-intellisense.js"></script>
In your code you can now add a function like this:
$(document).ready(function() {
// do stuff when DOM is ready
});
Since you mentioned that you only want it to happen in certain views, you could add a placeholder in your Master Page like this:
<asp:contentplaceholder id="JavascriptPlaceholder" runat="server"></asp:contentplaceholder>
Then in your View, you could choose to put code in there, or not.
which would go inside of the head section
Solution from Blog: Using body onload with ASP.net 2.0 MasterPages
MasterPage.master
<head>
<asp:ContentPlaceHolder runat="server" id="Headers">
</asp:ContentPlaceHolder>
<script language=javascript>
function mp_onload() {
if(window.body_onload != null)
window.body_onload();
}
</script>
</head>
<body onload="mp_onload();">
Default.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="Headers" Runat="Server">
<script language="javascript">
function body_onload()
{
//do something
}
</script>
</asp:Content>
I have been using the following pattern with my current MVC project and it seems to be working pretty good for my .js work thus far...
Within my Master Page I load up my standard script files that I want to be used in all of my content pages (things like jquery.js, global.js, jquery-plugins, .css files, etc.). I then define whatever events that are needed in my master page (onLoad, onSave, etc.). Each content page that I create will have it's own .js file associated with it and I load that script file within the content .aspx page. Any .js events that need to be implemented differently between content pages are handled within the individual content .js file. So basically my Master Page has a set of .js functions that my content page scripts will implement. Right now I just store those template .js function signatures in a file and copy and paste them into every new content.js file that I need to create. However, I'm thinking about building a code generator or tool that would spit these template signatures out for me in any new .js file I need created (if .js has some form of interface capability or inheritance features let me know).
So to recap:
MasterPage.Master Loads: jquery.js, global.js, plugins.js
ContentPage Loads: ContentPage.js
Global.js contains functions that the master page invokes that do not change between content pages along with any other global routine functions.
Each ContentPage.js implements it's own functions for the content page along with those functions the master page invokes that have different behavior.
You should definitely be using jQuery or another JavaScript framework anyway.
Have your controllers pass some kind of status indicator to your views, but not views-specific things like the names of JavaScript functions. It is up to your views to map status indicators to JavaScript function names.

Categories

Resources