Objective
To make my website editable using Content Tools
Background
I added Content Tools to my website Package Mules. I have sections that can be edited by the public. Security is not a concern at this point, it is a very small site.
Problem
It gives me a checkmark that it saved, unlike before where I would get an "X" meaning error. As you can see in this screencast. But when I refresh the page it seems that it did not actually save.
Code
Repo
https://github.com/JGallardo/package-mules
HTML (for index.php)
<!DOCTYPE hmtl>
<html lang="en">
<?php include 'includes/head.html';?>
<body>
<?php include 'includes/nav.html';?>
<section class="container">
<div class="row">
<div class="col-md-12">
<h1>Package Mules</h1>
<p>Welcome to the future home of package mules. Our mission is to help bring movers together with low cost options for moving.</p>
<p>We set up an editable page so we can get public feedback. Please be considerate and only post appropriate content.</p>
</div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-md-12">
<h2>The thing you hate most about moving is?</h2>
</div>
<div class="col-md-12">
<div data-editable data-name="moving-1">
<blockquote>
[Enter content here]
</blockquote>
<p>[your name]</p>
</div>
<div data-editable data-name="moving-2">
<blockquote>
[Enter content here]
</blockquote>
<p>[your name]</p>
</div>
<div data-editable data-name="moving-3">
<blockquote>
[Enter content here]
</blockquote>
<p>[your name]</p>
</div>
<div data-editable data-name="moving-4">
<blockquote>
[Enter content here]
</blockquote>
<p>[your name]</p>
</div>
<div data-editable data-name="moving-5">
<blockquote>
[Enter content here]
</blockquote>
<p>[your name]</p>
</div>
<div data-editable data-name="moving-6">
<blockquote>
[Enter content here]
</blockquote>
<p>[your name]</p>
</div>
</div>
</div>
</seciton>
<?php include 'includes/footer.html';?>
<?php include 'includes/scripts.html';?>
<script>
window.addEventListener('load', function() {
var editor;
ContentTools.StylePalette.add([
new ContentTools.Style('Author', 'author', ['p'])
]);
editor = ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-name');
editor.bind('save', function (regions) {
var name, payload, xhr;
// Set the editor as busy while we save our changes
this.busy(true);
// Collect the contents of each region into a FormData instance
payload = new FormData();
for (name in regions) {
if (regions.hasOwnProperty(name)) {
payload.append(name, regions[name]);
}
}
// Send the update content to the server to be saved
function onStateChange(ev) {
// Check if the request is finished
if (ev.target.readyState == 4) {
editor.busy(false);
if (ev.target.status == '200') {
// Save was successful, notify the user with a flash
new ContentTools.FlashUI('ok');
} else {
// Save failed, notify the user with a flash
new ContentTools.FlashUI('no');
}
}
};
xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', onStateChange);
xhr.open('POST', '/index.php');
xhr.send(payload);
var_dump($_POST);
});
});
</script>
</html>
I believe the problem here is the var_dump($_POST); call in you're JavaScript. I'm not a PHP coder but I'm assuming that's a PHP call and that it should be within PHP tags.
The reasons this appears to work is that the onStateChange callback is called after this error. So the process of events looks a bit like this:
You click the save button.
The editor triggers the save event calling your save code.
The editor is put in busy state by the save code.
The save code binds a callback function to your index.php request and then sends it to the server.
An error is raised due to the var_dump($_POST); statement. This error causes the execution of the code to stop and so never return to the editor which means the editor doesn't actually leave edit mode.
The request sent succeeds and on a response from the server the callback registered earlier (onStateChange) is called.
The onStateChange callback sets the editor to a non-busy state and fires the OK message because you got a 200 response from index.php.
This gives the illusion that everything went OK when actually an error occurred in your JavaScript. Checking the console you should see the error.
Related
I have some problem with the recaptcha loading.
I trying to remake and modernize one of old my website to a singlepage one with php, javascript and ajax (no jquery!).
Everyting is fine yet, but the recaptca. I use the following method.
index.php contains the "main frame" and the target divs to the HTTPRequest function.
With AJAX I load the PHP page templates to the main target divs.
BUT when my PHP template file looks the following to show the registration last page with the captcha:
<?php
$template = '
.../ some code sits here /...
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage(\'registration_page_2.php\')">« Back</button>
<button class="button btn-reg" onclick="validatePage(\'registration_validate.php\')">Submit your registration</button>
</div>
';
echo $template;
and I load it into one of my divs, the reCaptcha has not been shown. I tried some ways and tricks, but it's not working.
There is no form and submit section at all on my page. I do it with javascript and ajax.
Why I cannot make it works?
Is that possible to bypass form->submit->post method to get reCaptcha alive?
Or is the singlepage the wrong way?
I don't quite understand you but since i can't post a comment, i will attempt to answer anyway.
You don't have to use php to echo the html code, just in-case you didn't know, you can do it like this.
<?php
//php code
?>
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">« Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
<?php //continue code here ?>
and I load it into one of my divs, the reCaptcha has not been shown. I
tried some ways and tricks, but its not works :(
It's hard to tell from the information you have given why it is not being shown
There is no form and submit section at all on my page. I do it with
javascript and ajax.
If your registration_page_2.php and registration_validate.php does not echo the template in your current .php shown, then it certainly wouldn't appear on your page
Why I cannot make it works? Is that possible to bypass
form->submit->post method to get reCaptcha alive? Or is the singlepage
the wrong way?
I think you just did something wrong in the middle. The way you have said is 'form->submit->post' is the right way to go about this
Can you help me to get the solution please?
Using your browser, inspect or view the source code of your page. (For google chrome the hotkey is CTRL+SHIFT+I) Try to find the elements in your page to see if they are loaded, but hidden due to css or the likes. After which, you should give more details.
update your captcha block with adding id recaptcha
<div class="g-recaptcha" id="recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
add following code in your page load
<script src='https://www.google.com/recaptcha/api.js?hl=en&render=explicit&onload=onReCaptchaLoad'></script>
<script type="text/javascript">
var recaptcha;
var onReCaptchaLoad = function(){
recaptcha = grecaptcha.render('recaptcha',{
'sitekey' : 'YOUR_RECAPTCHA_PUBLIC_KEY',
'theme' : 'white'
});
};
</script>
You can do it with php request
<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$recaptcha = $_POST['g-recaptcha-response'];
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha}");
$captcha_success = json_decode($verify);
if($captcha_success->success){
// success
}else{
// error
}
}
?>
I use a tool called "webiopi" to control a wellness device via a Raspberry pi and a relay board. This tool connect buttons on a webpage with a Python script.
I can read the state (low/high) from the GPIO pins on the buttons i've created.
What i want is to show values from the script in the browser.
(Like ' temperature_measured' or. 'Calculated_time')
Is there a way i can show output from the python script to the webbrowser?
button = webiopi().createMacroButton("macro", "Normaal", "Prog1");
$("#top").append(button)
<div id="content" align="center">
<td>
</td>
{{print here output from script.py}}
<div id="top"></div>
</div>
</div>
You could use PHP to call the script and echo the output to the page. You'll need PHP installed and enabled, and the file must end with .php. If you know the webserver you are using, I can give you some additional help. Also note that the script should print all information it wants on the web page into standard output.
button = webiopi().createMacroButton("macro", "Normaal", "Prog1");
$("#top").append(button)
<div id="content" align="center">
<td>
</td>
<?php exec("python myscript.py", $out); echo $out; ?>
<div id="top"></div>
</div>
</div>
In a this forum [Wpio forum][1]https://groups.google.com/forum/#!topic/webiopi/DreW_74gm0o
gives Pete Dudash the answer to this question, which i copy here
Yes, this is possible. What you’re looking to do is add a callback routine to your javascript. First you execute some action in javascript (either from a button press or a timer) and call a python macro. This time, you specify a call back routine when calling the macro. The call back routine receives data from the macro and then you can do whatever you want with it.
Javascript:
function getPythonResponse() {
// "sendData" is the name of the macro you specify in your script.py
// "[]" is an empty list. If you want to send data for the macro to use, you would include that here
// "handlePythonResponse" is the name of the callback routine that will execute once the python macro is finished
webiopi().callMacro("sendData", [], handlePythonResponse);
}
var handlePythonResponse = function(macro, args, response) {
// "response" is the variable that holds the data from script.py
// Now we can apply those results to the webpage by assigning the value to the "pythonResult" id. This is the element in your HTML where you want to print the info.
$("#pythonResult").text(response);
}
Python:
#webiopi.macro
def sendData():
HTML:
<div id="content" align="center">
<td></td>
<span id="pythonResult">{{print here output from script.py}}</span>
<div id="top"></div>
I have a list of buttons in my <div>, when the user click on a specific div, I want display a view of my controller, for example:
<div class="row">
<div id="booking" class="command-buttons tile col-xs-12 btn">
<h3 class="title">Book appointment</h3>
</div>
</div>
I want load the appointment booking page when my user click on booking div. For load a view I use this code:
$this->load->view('appointments/book', $view);
but how I can do this using js? Usually a call a function that contains the view load, but in this case I'm on js side.
probably something like that:
$('div#booking').on('click', function() {
$(this).load( "view.html");
});
you can find some details here http://api.jquery.com/load/
I'm not entirely sure, but I think
echo $this->load->view('appointments/book', $view, true);
will return the html to your ajax success function and you can then easily inject it in the page.
I'm doing a project for school and so far it's been a lot of copy this script and paste it here to make things "work". I don't really have any idea what I'm doing besides comparing one line of code to another and looking for the differences.
I've got javascript that is returning some values to me and it works fine when it's in a simple webpage format but when I insert it into a more complicated page it stops working.
At the very end of the page it should give a line of numeric values and be updated every 1000 milliseconds but what happens is it just sits there displaying Temp()...
I've checked the data.xml and those values are being updated when I push buttons and stuff on my PIC protoboard.
I'm using the same ajax.js file for both the simple webpage and the complicated page.
I'm thinking it is something simple like a missed </p> or </div> tag but my eyes don't seem to see it.
Could some take a look at the code and see what I've missed? Thanks!
ajax.js
var xhr;
function getXMLHttpRequest(){
try { return new ActiveXObject("Msxm12.XMLHTTP"); } catch(e){};
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){};
try { return new XMLHttpRequest(); } catch(e){};
return null;
}
function parseHttpResponse(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("T0").innerHTML=xhr.responseText;
}
else
{
}
}
}
function getTemp(){
xhr = getXMLHttpRequest();
xhr.open("GET", "data.xml", true);
xhr.onreadystatechange = parseHttpResponse;
xhr.send(null);
}
setInterval("getTemp()", 1000);
Simple webpage - this works great
<html>
<head><title>Ajax test - index1</title>
<script src="ajax.js" type="text/javascript">
</script>
</head>
<body onload="getTemp();">
<h2>Headline</h2>
<p>Paragraph</p>
<div id='T0'>Loading Temp0...</div>
</body>
</html>
"Complicated" webpage - when this is used I get no joy
<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<script src="ajax.js" type="test/javascript">
</script>
<link rel="stylesheet" href="myStyle.css" type="text/css" >
</head>
<body onload="getTemp();">
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">
<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<div class="nav">
<ul>
<li>Home</li>
<li>Features</li>
<li>About</li>
</ul>
</div>
<!--***************************************************-->
<p>
Welcome to the Elex 267 Demo Web Server for [Name Here].<br>
</p>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
This web page refreshes the data every 3 seconds.
</p>
<center>
<img border="5" src="http://www.northmicro.com/GFX/nm110nm120onproto.jpg" alt="NM110 Proto Pic" width="200" height="200" >
</center>
<br>
<div id="feedback" style="width:500px;float:left;">
Pot RA0: 1022 <br>
Pot RA1: 223
<br><br>
Switch RA2: <img src="Pics/SwitchUp.gif" alt="SwitchOff" width="20" height="20" align="top">
<br><br>
LEDs: RB6 <img src="Pics/LEDOff.gif" alt="LED_Off" width="20" height="20" align="top"> RB5 <img src="Pics/LEDOn.gif" alt="LED_On" width="20" height="20" align="top">
</div>
<div id="input" style="width=50%;margin-left:50%;">
<b>Commands</b><br>
<button align="left" type="button" onclick="alert ('RB5 Activated')">Toggle RB5</button>
<br>
<button align="left" type="button" onclick="alert ('RB6 Activated')">Toggle RB6</button>
</div>
<br><br>
<div id='T0'>Loading Temp0...</div>
</body>
</html>
setInterval("getTemp()", 1000);
does not make sense at this line, and it might be the cause of your problems. This call causes getTemp to be called every second, starting from after this call as returned. In the getTemp function you are reusing the xhr variable, creating a new XMLHttpRequest instance each time. That alone is not necessarily a problem (aside from the "Msxm12.XMLHTTP" which appears to be wrong; should probably be "Msxml2.XMLHTTP").
But in each call of getTemp you are issuing a new request, regardless if the previous request has received a response (the third argument being true means asynchronous request-response handling). Consider this: The readystatechange listener might not have been called (or its readyState == 4 part has not be executed) because the client is waiting for the server to respond. Now your one-second timer kicks in, calls getTemp again and thus overwrites the xhr value that is to be used in the listener code. There is a closure, xhr is a bound variable, and therefore there is a race condition already.
Further, an HTTP client SHOULD NOT (per RFC 2616), and a well-designed Web browser will not, keep more than a specified number of persistent HTTP connections (default: 2 to 8) open to the same server or proxy. So the more complex the document, and the more resources need to be loaded in parallel, the more likely that this approach will fail.
You should remove the setInterval(…) call and add a getTemp() call below the line where you update the innerHTML property (when the request was successful, status == 200), so that only then a new request is issued. You should at least wait for the readyState to become 4 (FINISHED) before you issue a new request. Since you want to wait one second before the next call, use window.setTimeout("getTemp()", 1000).
It should help your understanding if you pretty-print that code, that is, indent function body and block content with a reasonable amount of white-space, and add some white-space, for example between ) and {. There are editors like Eclipse JavaScript Development Tools which can automate much of the code formatting.
Afterwards you should learn to use a debugger (use Firebug for Firefox, newer versions of other browsers have one built-in) and set breakpoints in your code, particulary in getTemp and parseHttpResponse. Step through the code (caveat: step over send(), then continue so that execution halts at the breakpoint in parseHttpResponse) to see what is going on. Good luck.
I am working on phonegap with android. I am creating a login page. After the login validation I want to jump to the welcome div if the user is authorized .
This is my javascript page:- myjavascrpt.js
var logi=item.id;
if(logi>0)
call welcome div of index.html
else
alert("invalid user");
// in this logi variable i have userid of successful user.
// now i want to
// display this id into the div which is exist in my
// html page.
// now what should i write here so i can call welcome
// div of html page and i can use
// this value of logi variable.
This is my index.html whose welcome div I want to call.
<html>
<head></head>
<body>
<div data-role="page" data-theme="a" data-url="streaming" id="streaming">
<h1> do some thing related to streaming</h1>
</div>
**
<div data-role="page" data-theme="a" data-url="welcome" id="welcome">
<h1> you are welcome</h1>
</div>
**
</body>
</html>
so please tell me what code should I use to call the div of a html page.
I don't know anything about calling a html page div from javascript, but if you want to set the content of a DIV via javascript, it's done that way:
In javascript:
var d = document.getElementByID("welcome");
d.innerHTML = logi;
But this would override the <h1> you are welcome</h1> text. So change that line to be
<span id="userwelcome"></span><h1>, you are welcome</h1>
and your javascript to
var d = document.getElementByID("userwelcome");
d.innerHTML = logi;
You can do that with simple jQuery -
if(logi>0) { $('#welcome').html(logi);}