I have 2 php files and one jquery file (2 php files include that jquery file). How to change content of 1 page by clicking button on the 2 page using jquery(without refreshing pages). for ex: on button click send div (2 page) to the div (1 page). OR maybe use 2 jquery files or any other techniques. code demonstration would be perfect. my code:
ex2.php
<script src="ex2.js"></script>
<title>Ex2</title>
</head>
<body>
<button class="show"> show </button>
<div class="showdiv"> show </div>
</body>
ex3.php
<script src="ex2.js"></script>
<title>Ex3</title>
</head>
<body>
<button class="save"> Save </button>
<div class="savediv"> Save </div>
</body>
ex2.js
$(document).ready(function(){
$(".save").click(function() {
$(".showdiv").after("<p>GGGGGGGG</p>");
});
$(".show").click(function() {
$(".showdiv").after("<p>BBBBBBBB</p>");
$(".savediv").after("<p>BBBBBBBB</p>");
});
});
AFAIK this type of "push" is only possible when you have a highly complex system involving server-side services and hooks on the receiving pages that are listening for changes to those services. This question is accordingly too broad and probably too complicated for a simple answer, as per StackOverflow guidelines.
Related
I am creating a python flask web application with selenium in the backed I want to disable my webpage when the selenium driver is running to prevent user activity
I am using this code
<div id="disabler">
<div class="text-center">
<img src="{{url_for('static', filename='images/disabler.gif')}}">
<p id="preloader-text">Running Automated Test</p>
</div>
</div>
<script>
function loader(){
$(document).ready(function(){
$("#disabler").fadeOut()
});
}
</script>
When you are using new tab every time then it is not possible to hide. You can just put always on top feature for chosen window.
You can use a predefined jQuery UI called jQuery Block UI
Or simply add a division that will block the body and will fade out when the body is loaded.
<div id="div">
<h1>Please Wait..</h1>
</div>
jQuery will be:
$(document).ready(function(){
$("#div").fadeOut()
});
I'm trying to figure out which is the best architecture for an application created with jQuery Mobile and PHP that uses multiple pages generated with PHP.
I have created two almost similar pages (as an example). Each page has one button (link) that redirects the user to the other page.
That's what the first page looks like:
p1.php
<?php
session_start();
if(!isset($_SESSION['p1'])) $_SESSION['p1']=0;
$_SESSION['p1']=$_SESSION['p1']+1;
?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-dom-cache="false">
<div role="main" class="ui-content" id="maincontainer_1">
<h1>Page 1 counter: <?echo $_SESSION['p1'];?></h1>
<br>
<a href="p2.php" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-right ui-icon-arrow-r" >Go to page 2</a>
<br>
<a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Back</a>
</div>
</div>
</body>
</html>
The page is simple and displays the number of visits the user makes on this page.
The second page is the same as the first, only counting the user's visits to it. That's how it looks:
p2.php
<?php
session_start();
if(!isset($_SESSION['p2'])) $_SESSION['p2']=0;
$_SESSION['p2']=$_SESSION['p2']+1;
?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_2" data-dom-cache="false">
<div role="main" class="ui-content" id="maincontainer_2">
<h1>Page 2 counter: <?echo $_SESSION['p2'];?></h1>
<br>
<a href="p1.php" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Go to page 1</a>
<br>
<a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Back</a>
</div>
</div>
</body>
</html>
The problem
If the user opens the first page (p1.php) and then he browsing between the two pages, he will see that only on the second (p2.php) increase the number of visits were made made. The first page (p1.php) will always display the same number of visits, even if the two pages should actually display approximately the same number of visits.
This is because of jQuery Mobile. The first page is loaded into DOM and never removed. All other pages loaded by jQuery Mobile (in this case p2.php) are loaded with ajax and doing so the PHP part is executed. But the first page (in this example p1.php) is never loaded again, so the PHP part is executed only once. That's why the number of visits on the first page is not changed.
Note that the contents of the first page isn't removed from the DOM,
only pages loaded in via AJAX. Pages inside a multi-page template
aren't affected by this feature at all - jQuery Mobile only removes
pages loaded via AJAX.
In the same way, if user hit F5 on second page, then jQuery Mobile loads this page (p2.php) as main page. In this case it will increase the number of visits on first page (p1.php) and the number of visits made on p2.php will not change anymore.
Request I need a way to modify the content of a page using PHP without the fear that user will hit F5 or refresh any page and thus this page will become the main jQuery Mobile page and this way it will never be effectively reloaded again.
Note that all pages are loaded by jQuery Mobile by using ajax. jQuery Mobile will strip any page by the header and other stuff and will only load the first DIV marked with date-roll = "page". Only the first page is loaded normally (and only once). So if you're wondering why pages have the same header (even if it's no longer loaded), that's because if the user refresh the page, it's displayed correctly (as jQuery Mobile main page).
Current approach At this time I use a modified script that is loaded on each page. This script removes any page from the DOM to force it to be reloaded when the user visits it again. THis is the script:
// delete old pages
$(document).on("pagecontainerchange.fixcache", $.mobile.pageContainer, function (event, ui) {
if ($.mobile.firstPage.is('[data-dom-cache="true"]') || $.mobile.page.prototype.options.domCache && $.mobile.firstPage.is(':not([data-dom-cache="false"])')) {
$(document).off('pagecontainerchange.fixcache');
} else if (ui.prevPage !== undefined) {
if (!($(ui.toPage).hasClass('ui-dialog') || $(ui.prevPage).hasClass('ui-dialog')) && ui.prevPage.prop("id")!==ui.toPage.prop("id")) {
$.mobile.firstPage.remove();
$(document).off('pagecontainerchange.fixcache');
}
}
});
In this way the example above works correctly.
Doubts. Is this the right way to create a multi-page application using jQuery Mobile and PHP?
Should I only use only AJAX requests as below? This will not (unnecessarily) increase the complexity of the code? (request - process request - json answer - process answer)
$.ajax({
type: "POST",
url: "request.php",
data: {...} ,
success: function(data) {
...
}
});
I think so because there are many distinct requests on a page. A page generated by PHP usually solve through a single access all necessary data. Using multiple AJAX requests will not load the server too much?
Should I use a single AJAX request that fills the entire page?
Really do not know...
I have a website which consists of 5 different pages.
To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML documents to make sure that the Navigation Box and the main divs stay in position.
I've now been asked to implement the design in such a way where when I press a button, the other HTML pages will load dynamically onto my main index page. This way, if I need to change the design of the pages, I only have to change the index page and not have to repeat those changes for every single HTML document I have.
I've tried using Javascript for this, but I can't think of anything that would suffice. I can't understand jQuery at all, if someone has a clear understanding of how to accomplish this task using jQuery or Javascript, could you please explain it to me step by step?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="CSS/Index.css">
</head>
<script src="websitescript.js"> </script>
<body>
<div class="mainwrapper">
<div class="navbox">
<input type="image" id='about' src='images/about.jpg'
onclick="myFunction()"> </a>
<a href="location.html"> <img src='images/location.jpg' class="location">
</a>
<input type="image" id='contact' src='images/contact.jpg'
onclick="myFunction()"> </a>
<a href="inquiries.html"> <img src='images/inquiries.jpg' class="inquiries">
</a>
<a href="employees.html"> <img src="images/employees.jpg" class="employees">
</a>
</div>
<img src="images/duo.jpg" class='logo'>
<div id="header">
</div>
</div>
What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.
For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.
Content of your main page index.html could look like this (I removed those images in nav bar)
<div class="mainwrapper">
<div class="navbox" id="js-navigation">
About
Location
Contact
Inquiries
Employees
</div>
<div id="header"></div>
<div id="js-content">
<!-- content will be loaded here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#js-content').load('/about.html');
$('#js-navigation a').click(function(e) {
e.preventDefault();
$("#js-content").load(e.target.href);
})
});
</script>
So in the same folder, you will have those other content files, but without navigation, wrappings header etc. Just plain content like:
<h1>About page</h1>
<p>Lorem Ipsum</p>
Alright so my approach is a bit different as I use PHP but hopefully I am still able to help you with this. I am working on something similar where I have "index" page that includes a nav bar at the top and empty space below it. After I click on something the content of another php file loads into white space, and said another php file is wrapped into a div I can edit with css. To do this I've used this php command:
<div>
<?php
$page = "MainPanel.php"; // my index
if (isset($_GET["page"])) {
$page = $_GET["page"];
}
if ($page == "" or $page == "MainPanel.php") {
$page = "/Main/central.php"; //default page upon running the code.
}
$GLOBALS["page"] = $page;
ob_start();
include($page);
ob_end_flush();
?>
</div>
This should be it. I don't know php very well and one of my collegues suggested to use this but it's relatively small amount of code and it works well.
Describing a scenario:
I am going through the code mentioned below.B asically I am trying to figure out how to program so that
when a user clicks on "Use Template" button , it gets inserted into an editor.
Page 1:
There are lot of templates present
When a user clicks on the "Use Template" button on , it gets inserted into an editor that is present in
the next page (Page 2).
Please find the code snippet below for the first two templates I am going through:
<div id="templatesWrap">
<div class="template" data-templatelocation="templateone" data-templatename="Template ONE" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templateone&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_010.jpg" alt="templateone">
</a>
</span>
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
</div>
</div>
<div class="template" data-templatelocation="templatetwo" data-templatename="Template TWO" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_011.jpg" alt="templatetwo">
</a>
</span>
<div class="templateName">Template TWO</div>
<p>
Use Template
</p>
</div>
</div>
And so on ....
How does the link "https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" is inserting the template into the editor which is located on the next page? I haven't understood the token part and lot's of ID's present in the link
which I think are thereason behind inserting the template.
Has anyone come across such link before? Please advise.
Thanks
MORE CLARIFICATIONS:
Thanks for your answer.It did help me somewhat. I have few more questions:
Basically, I am using TinyMCE 4.0.8 version as my editor. The templates, I am using are from here:
https://github.com/mailchimp/email-blueprints/blob/master/templates/2col-1-2-leftsidebar.html
Some questions based on "Tivie" answer.
1) As you can see in the code for "2col-1-2-leftsidebar.html " it's not defined inside <div> tags unlike you defined it in <div> tags. Do you think that I can still
use it using "2col-1-2-leftsidebar.html " name?
2)I believe,for explanation purpose, you have included
`"<div contenteditable="true" id="myEditor">replaced stuff</div>`
and
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
in the same page. Am I right? ( I understand you were trying to make an educated guess here, hence
just asking :) )
In my case, I have a separate page, where I have written code for buttons just like you wrote in editor.html like the following:
<button id="btn">Load TPL</button>. My button is defined inside <div class="templateContainer">.
Also, my templates are defined in a separate folder. So, I will have to grab the content(HTML Template), from
that folder and then insert into TinyMCE 4.08 editor. (Looks like two step process). Could you elaborate
on how should I proceed here?
More Question As of Dec 27
I have modifier my code for the template as follows:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
Please note, I have added an additional id attribute for the following purpose.
If I go by the answer mentioned in the Tivia's post, is the following correct?
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
My editor is defined like the following on Page 2 (Editor Page).
<div class="field">
<textarea id="sTextBody" name="sTextBody" style="width:948px; max-width:948px; height: 70%"></textarea>
</div>
I am confused, like, the script tag I have defined is in Page 1 where I have defined all the template related code
and the Page 2(Editor) page is a different page. It's simply taking me to Editor page (Page 2) and hence not working.
Please advise where I am wrong.
Thanks
MORE QUESTIONS AS of Jan 2
The problem Iam facing is as follows. Basically, for first template , I have the following code.
Code Snippet #1 where "Use "Template" button is present:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
And the function suggested in the answer is as follows:
Code Snippet #2 where Editor is present:
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
Since, I believe I first need to reach to that page after user clicks on "Use Template" button, where the editor is located, I have defined Code Snippet #1 on Page 1 and have defined the Code Snippet #2 and <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> as the very first two script tags in the Page 2 ( Editor Page). But still when I click on "User Template" button on Page 1, it's just letting me to next page and not loading the template into the editor.
Am I doing something wrong here? Please advise.
P.S. The problem I feel is somehow the click function on Page 2 is not getting activated with the temp1 id button mentioned on Page 1.
Thanks
Well, one can only guess without having access to the page itself (and it's source code). I can, however, make an educated guess on how it works.
The URL params follows a pattern. First you have a token that is equal in all templates. This probably means the token does not have any relevance to the template mechanism itself. Maybe it's an authentication token or something. Not relevant though.
Then you have the template identification (templateOne, templateTwo, etc...) followed by a HubId that is empty. Lastly you have a goalComplete=200 which might correspond to the HTTP success code 200 (OK).
Based on this, my guess would be that they are probably using AJAX on the background, to fetch those templates from the server. Then, via JScript, those templates are inserted into the editor box itself.
Using JQuery, something like this is trivial. here's an example:
template.html
<div>
<h1>TEST</h1>
<span>This is a template</span>
</div>
editor.html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div contenteditable="true" id="myEditor">
replaced stuff
</div>
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
</body>
</html>
Edit:
1) Well, since those templates are quite complex and include CSS, you probably want to keep them separated from you editor page (or the template's CSS will mess up your page's css).
However, since you're using TinyMCE, it comes with a template manager built in, so you probably want to use that. Check this link here http://www.tinymce.com/wiki.php/Configuration:templates for documentation.
2) I think 1 answers your question but, just in case, my method above works for any page in any directory, provided it lives on the same domain. Example:
<script>
$("#btn").click(function() {
$("#myEditor").load("someDirectory/template.html");
});
</script>
I recomend you check this page for the specifics on using TinyMCE http://www.tinymce.com/wiki.php/Configuration:templates
EDIT2:
Let me explain the above code:
$("#btn").click(function() { });
This basically tells the browser to run the code inside the brackets when you click the element with an id="btn"
$("#myEditor").load("someDirectory/template.html");
This is an AJAX request (check the documentation here). It grabs the contents of someDirectory/template.html and places them inside the element whose id="myEditor"
I'm new to stackoverflow and I came here because I couldn't find clear answers to my problems with html and javascript.
I'm wanting to display an HTML page with 3 buttons and the buttons will execute 3 scripts onClick. I need tab#1 to talk to tab#2 to execute the code but I'm stuck on how I go about doing that - here's my HTML code:
<!DOCTYPE html>
<html>
<body>
<!-- START STAGE 1 -->
<script>
function stage1()
{
// Here I want to open up a new tab so I'd do:
window.open('http://webpage.com', '_blank');
}
</script>
<!-- START STAGE 2 -->
<script>
function stage2()
{
// From here, I want to execute some JavaScript to the new tab I've opened
}
</script>
<!-- START STAGE 3 -->
<script>
function stage3()
{
// Again, I want to execute another script on the new tab I've opened
}
</script>
<button type="button" onClick="stage1()">STAGE1</button>
<hr />
<button type="button" onClick="stage2()">STAGE2</button>
<hr />
<button type="button" onClick="stage3()">STAGE3</button>
</body>
</html>
I'd be very appreciated if someone could re-write this code and leave a space in the 3 's for my code to go to be executed on tab#2 from tab#1.
Thank you in advance! - Sorry, I'm a bit of a noob haha.
Cheers,
Declan Land
It won't be straightforward, but I think you could do it with a "proxy" page that displays the intended site (Twitter) in an iframe and runs the scripts you need when you pass a parameter in the address (e.g., proxy.htm?action=step2 ) or even use a separate dedicated proxy page (proxy2.htm) for each step.
But in order for this to work, I believe you need to use a custom name for the target of your anchor links (a target="proxy_twitter"), so all links open in the same tab.
A possible issue would be that the 2nd tab would reload the proxy page on each click, but maybe this can be avoided by changing the parameters to be hashtags (proxy.htm#action=step2).
I myself don't have any experience with this mechanism, but I've seen it used on some sites.