I would like to know if there is any approach to pass vars through .html files.
For example in my index.html an <a> click sets this:
var value = 'some text here';
and links to other.html.
The first executed script in my other.html is:
console.log(value);
Is this somehow that HTML files can pass variables through?
You can send any data from one page to another by passing it as queryString like host/other.html?value=something
In first page append your data with the url using javascript or jquery and in second page retrieve it using javascript or jquery
Related
Is there any way of writing to a file on github pages using javascript? I want to save some info that i wanna use elsewhere to a json file (preferably, but txt would also work), and was wondering if it was possible.
Step-by-step guide
If you are less of a JavaScript maven, then you might want to follow use step-by-step.
Embedded JavaScript
In the first example we create a Markdown file called js.md In that Markdown file we put an HTML div element with an id "text". Later in that file we add a script tag and inside we write some simple JavaScript code. This code will locate the element that has the id "text", or div element, and inside the element it will put the text that appears on the right-hand side of the assignment.
The main thing you need to remember here is that the JavaScript code must come at the end so by the time it is executed the DOM is ready. Otherwise the JavaScript code will not find the HTML element.
examples/github/js.md
<div id="text"></div>
<script>
document.getElementById("text").innerHTML = "Text added by JavaScript code";
</script>
jQuery loaded from external file
Our next step is to use jQuery instead of vanilla JavaScript. For this we only need to load jQuery from its CDN. If we are already loading an external JavaScript file, I though we can also move our code to an external file. So I created the demo.js file loaded it using another script tag.
This time we can put the script tags anywhere we like as the jQuery callback function will be only executed when the DOM is ready. The only limitation is that we need to load our code after we have loaded jQuery itself.
examples/github/jquery.md
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/demo.js"></script>
<div id="text"></div>
In our jQuery code we have an anonymous callback function that will be called when the HTML was loaded and the DOM is ready. That's what $().ready does. Inside the function we use the $("#text") expression to locate the element with id "text" and then we use the html method to set the content of the element. (It is the same as innerHTML in vanilla JavaScript.)
examples/github/demo.js
$().ready(function() {
$("#text").html("Text added by jQuery code.");
});
Loading JSON data from server
Finally, we would like to get some data from the server. As we cannot run anything on the server we cannot get dynamic data, but we can store the data in JSON files and load them using the Ajax methods provided by jQuery.
In this example the Markup file is effectively the same as in our previous examples.
examples/github/json.md
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/json.js"></script>
<div id="text"></div>
In the jQuery code we use the getJSON method to fetch the data.json file from the server. This means, first the HTML file that was generated from the Markdown file will be loaded. Then the browser will load jQuery followed by our code. Then, once everything is ready, our code runs and loads the JSON file from the server.
The first parameter of getJSON is the URL of the JSON file we would like to load. The second parameter is an anonymous callback function that will be executed when we get the response from the server. Then the jQuery will call our anonymous function and it will pass the content of the JSON file after it was converted to a JavaScript object.
console.log(data); was only added for debugging.
In the last JQuery code, in $("#text").html(data["text"]); the first part $("#text") will locate the element with the id "text". The html method will set the content of the element to the value we pass to it which in our case is data["text"], the value of the "text" key that arrived from the JSON file.
examples/github/json.js
$().ready(function(){
$.getJSON( "/data.json", function( data ) {
console.log(data);
$("#text").html(data["text"]);
});
});
This is the data.json
examples/github/data.json
{
"text" : "Text supplied in the JSON file"
}
Hope this helped!
I Have an anchor tag like this:
<a href="secondPage.html" id="seeVid">
<div class="box" style="margin-top:100px;" id="bee">
<center><h2>Java</h2></center>
<center><p>Hello paragraph for .</p></center>
</div></a>
When I click it I want to go to my second page and append a paragraph within that div how do I accomplish this here's my jquery but it doesn't seem to work?
$(document).ready(function(){
$("a#seeVid").click(function(){
$('div.allVid').append("<p>Second Paragraph</p>");
});
});
Here I am trying to see when my anchor tag with the id "seeVid" is clicked and then I go to my div in my second page with class "allVid" and I want to append a paragraph, but this isn't working?
You can't do that. When the second page loads all the javascript from the first page no longer exists nor will be executing.
You could just execute a javascript function when the anchor is clicked and have that function redirect to a URL adding a query string parameter of some data you want to send and then in the 2nd page load you could execute a javascript function to retrieve the query string parameters and do some operation with them. You can read how to redirect to anew URL using javascript here: How to redirect to another webpage in JavaScript/jQuery? and how to retrieve query parameters here: jquery get querystring from URL
You would not be able to append the div if the anchor tag is directing to a new page. You need to send in the text as a querystring to the new page and then using javascript append that in your newly rendered html
or
better still set a localStorage variable and in the new page script check the localStorage whether it is not empty and if it is not, append that so that it is included in your new page
More info about local storage:
W3School Explanation
A nice blog on it
So I'm in my edit view... let's says it's posts/edit/1
That page loads some Javascript which makes a $.get call that pulls data from a different action on the same controller (posts/foo).
How can I simply send the current model's ID to AJAX, and on to the other controller?
In this case, both actions are in the same controller, but I'm not sure that helps in this case.
if you are using jquery you can have something like this
$(document).ready(function(){
//ajax call here
});
The thing is that once your document has loaded you just send this id to the other controller.
I hope that helps
If you only need to get the Post ID from your edit view, this is the variable you need:
$this->Form->fields['Post.id']
If its not "Post", just replace it with the model name you are using and trying to get the ID for.
UPDATED: Based on the clarification: you are right; for what you are trying to do, you need to generate the link or just the unique ID in a script tag, and then somehow use that variable in your included script. Take a look at how I did it for a CakePHP plugin. A quick summary:
Include the JS files as you would normally do
Create a variable in a script tag in the controller
Use that variable in the included JS files
Something like this:
<script type="text/javascript">
id = '<?php echo $this->Form->fields['Post.id'] ?>;
</script>
and then use this id variable in your included Javascript file.
It might be a noob questions but I have just started using jquery.
My basic requirement to extract the link which is there in the javascript code present in another html (code is embedded in the html page and not in a seperate file).
The link is also present as a href attribute of <a> tag inside a tag, just to add if it is easier to extract it from there (I am using chrome so I think it considers there are no child nodes of <noscript> tag)
After this I tried doing an ajax request to the html page (using $.ajax) thinking it will run the scripts on the page but got the html code of the page in return :S . I have also heard of something called evalscripts:true but not sure if that will work here or how to use it?
I have also tried to search for the link in html code returned by my html page by using the "contains" operation of jquery.
I am doing all this to create a greasemonkey script. Please suggest
Example Code:
This is a function present inside the html of that page:
function fun() {
obj = new pollingObj('argument', "a link I want to extract comes here");
}
I want to extract the link: "a link I want to extract comes here" and then open it.on my page where I am running my jquery script
This link is also present like this on the html page:
<noscript>
blabla
</noscript>
Also is it possible to run the javascripts present on that page if the link extraction is not possible?
If you're able to get the html code of the page successfully via .ajax, and the data you want is in the HTML code, it's not worth the effort to bother with trying to run the scripts. Just access the URL through the DOM:
// ajax success function
success: function(html) {
var anchorCode = $(html)
// this assumes that noscript is a top-level element
// otherwise, use .find('noscript')
.filter('noscript')
.text(); // get the code for the anchor tag, as a string
var myLink = $(anchorCode).attr('href');
// do something with myLink
}
Edit: It turns out that jQuery is a little funny in the way it deals with noscript tags - inner tags don't appear to be considered part of the DOM, so you need to grab the text content of the tag and then use jQuery to DOM-ify it. See updated code above.
I was just wondering whether there is some way to do this:
I have a form in a web page, after the user submits the form, the page is redirected to another static HTML page.
Is there any way to manipulate the data in the second HTML page without the help of any server code?
I mean can I display the form data that the user submitted in the second page?
Of course there should be a navigation, not some Ajax code to load the second page (using which it would be easy to manipulate the data).
You can use a <form> with GET method to go to another static HTML page with some query parameters and then grab those parameters with JavaScript:
First page:
<form method="GET" action="page2.html">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit"/>
</form>
Second page:
<script type="text/javascript">
function getParams() {
function decode(s) {
return decodeURIComponent(s).split(/\+/).join(" ");
}
var params = {};
document.location.search.replace(
/\??(?:([^=]+)=([^&]*)&?)/g,
function () {
params[decode(arguments[1])] = decode(arguments[2]);
});
return params;
}
var params = getParams();
alert("value1=" + params.value1);
alert("value2=" + params.value2);
// or massage the DOM with these values
</script>
You can access the pages GET parameters from JavaScript (window.location.search, which you still need to parse), and use this to pass some veriables to the static page.
(I suppose there is no way to get to POST content.)
You can also read and set the values of cookies from JavaScript.
If you are within a frameset where a "parent" page always sticks around you could potentially also store information in there (also cross-frame-scripting is tricky and I would try to avoid that).
If you have the first page submit the form with a GET action you'll get a URL that looks like:
http://tempuri.org/Page2.html?param1=value1¶m2=value2
You could then use JavaScript on Page2.html that reads the query string parameters and displays them on the page.
If you send the form that through GET, yes, you can grab that info from js.
There is a jQuery plugin that does that, but if you want, you can roll your own, its not so complicated.
Just get the location.href and splits it using "?"
then, split again using "&"
Now, for each value, split with "=". Then you'll have a array with the name of the query, and the value of it.
edit: google for javascript get querystring to find dozens of implementations.