Hello i would like to change the DOM of an html page but from another page i tried sharing the same script between the 2 pages but it didnt work here is an illustration for what i am trying to do
1-First page
<div>
<p id="simpletext">Hello world</p>
<script src="jquery.min.js"></script>
<script src="script.js" type ="text/javascript"></script> <!-- same script file is present in the second page -->
</div>
2-Second page
<div>
<button>Click me </button>
<script src="jquery.min.js"></script>
<script src="script.js" type ="text/javascript"></script><!-- same script file is present in the first page -->
</div>
script.js
$("button").on("click",function(){
$("simpletext").css("color","blue");
});
i am trying to when i click on the button wish is located on the second page to change the color of the text on the first page
You can send messages from one page to another. At the buttons side send a message:
$("button").on("click",function(){
wondow.postMessage("show","*");
});
Then at the other page, wait for a message:
window.addEventListener("message",function(event){
if(event.data === "show") {
$("simpletext").css("color","blue");
}
});
I assume that both windows are opened on the same machine, if not, you need ajax or websockets instead and do serverside proxying.
Related
Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>
I have problem with jquery.
I want change link to src when is only "document.write".
My code:
myscript.js
document.write("TEST ABCD");
test.html
<html>
<body>
<button id="example">click me</button>
<div>my site example text</div>
<div id="my_div_important">
Old test
</div>
<script>
$(function(){
$('#example').on('click',function(){
$('<script>').attr('src', 'http://example.com/script.js').appendTo('#my_div_important');
});
});
</script>
</body>
</html>
If click "#example" than in page write: TEST ABCD but all the rest is HIDDEN... URL is to same (no redirect).
When is problem?
--- UPDATE
I want to do a widget where users will use on their sites.
The panel of users want to do a preview of different sizes and therefore need to update the script SRC tag script (example.com/widget/normal/250|300 itp.)
document.write deletes all the content if your page is already fully loaded (as you do a write on the document object).
Also you should use jQuery.getScript() for dynamic loading of scripts.
I'm wondering if it would be possible to have common elements between pages that don't refresh when you change pages.
More specifically, what I mean is: I have a header that is common to several pages, and contains the links to the pages themselves. Only, whenever I click on the header, the whole page refreshes, with the typically annoying flickering that comes with it. I would like to know if it would be possible to have the header fixed between pages, so that when I click on a link to change page the content refreshes but the header doesn't. (The same goes for the background as well).
What I have right now is this:
<script type="text/javascript">
$(document).ready(function(){
$("#header").load("../header_footer/header.html");
});
</script>
and in the body (common to all pages)
<body>
<div id="header"></div>
</body>
Is it possible to do this with just HTML or Javascript?
Thanks!
Unfortunately, this isn't possible using traditional page loads. If you don't want the flickering, I'd recommend making your site a Single Page App. Basically, you'd be loading your page once in the browser, and then all subsequent pages are dynamically loaded into the DOM via Ajax calls.
<style>
#pg2,#pg3{display:none;}
</style>
<body>
<div id="header"><button onclick="page(1)">Page 1</button><button onclick="page(2)">Page 2</button><button onclick="page(3)">Page 3</button></div>
<div id="pg1">
</div>
<div id="pg2">
</div>
<div id="pg3">
</div>
<script type="text/javascript">
//<![CDATA[
var pg =new Array;
pg[1] = document.getElementById('pg1')
pg[2] = document.getElementById('pg2')
pg[3] = document.getElementById('pg3')
function page(p){
pg[1].style.display='none'
pg[2].style.display='none'
pg[3].style.display='none'
pg[p].style.display='block'
}
//]]>
I have working javascript mobile app which I have been trying to restructure (correctly or incorrectly). The index.html file contained one page (using data-role="page") with various <div> elements that I hide and show depending what the user wants to do. I thought I could improve the structure by putting each of these <div> elements each in their own page (still in the index.html file) using data-role again. However, the subsequent pages lose their javascript functionality. I have created a very simple index.html file to demonstrate:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<INPUT type="button" id="showPageTwo" value="Show Next Page" />
</div>
<div data-role="page" id="secondPage">
<INPUT type="button" id="showMainPage" value="Show Main Page" />
</div>
<script>
$(document).on("pageshow", "#mainPage", function(e) {
alert("Main page");
$("#showPageTwo").click(function()
{
$("#secondPage").show();
$("#mainPage").hide();
});
});
$(document).on("pageshow", "#secondPage", function(e) {
alert("Second page");
$("#showMainPage").click(function()
{
$("#mainPage").show();
$("#secondPage").hide();
});
});
</script>
</body>
</html>
Main page displays correctly, the alert is displayed $("#showPageTwo").click(function() works. But none of the javascript runs when secondPage loads.
Additionally when secondPage is shown it does not have the styling from jquery.mobile-1.3.2.min.css that mainPage has.
What am I doing wrong or misunderstanding? (This is when running the app in the Eclipse AVD)
Additionally, I would like to know:
Is the way I am trying to restructure my code using data-role="page" good or bad practice? Is there a recommended way to structure "pages" in a mobile app?
I also want to put my custom script(s) in their own .js file(s). Can I only load the script shown in the above code before the </body> tag? Is there any way to load it in the header along with all the other scripts?
I am currently embedding a third-party javascript file directly on my page.
However, the website I'm embedding it from takes a while to respond so it stops the rendering of my site for several seconds.
I'm currently embedding it on my page on the spot where it will write some values:
<script language="javascript" type="text/javascript" src="[third-party site/file.js]"></script>
The response from the embedded script is just some JavaScript:
document.write('<div class="value">Value 1</div><div class="value">Value 2</div>');
I was thinking that after the page loads use jQuery to make an AJAX request and somehow parsing the response so I can get the values I need.
Is there be a better approach?
You can place this script inside a hidden element on the end of the body (just before </body>) and, after the page has loaded, move it to the desired location with jQuery.
<div id="hiddenElement">
<script type="text/javascript" src="[third-party site/file.js]"></script>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#hiddenElement").appendTo("#someOtherElement");
});
</script>
</body>
Another solution would be to use jQuery .getScript() to load the script in the desired location as you said and #James McDonnell said.
$(document).read(function()
{
$.getScript(/* src */)
});
This will run after the page has loaded.
$.getScript()
Perhaps this could be part of your solution. Here is a stand-alone jQuery example where a button is used to trigger a change event on a DIV. This example just shows you how to access the html content of the div and to see how to manipulate/change it. This is not a solution for you but parts of it might be useful when combined with rcdmk's and James' ideas.
<html>
<head>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button_test').click(function() {
$('.value').html('New stuff').change();
});
$('.value').change(function(){
$('div').each(function() {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<div class="value">Value 1</div>
<div class="value">Value 2</div>
<button id="button_test">Click me</button>