I have a Joomla 1.5 component that uses a call to the editor class to display JCE for Joomla instead of a textbox. This code is part of a 4-step form where each step is loading using ajax. The last step contains a message field where users can write free text and I am calling this using the following code:
$editor =& JFactory::getEditor();
echo $editor->display('description', $description, '100%', '150', '40', '30');
When this step is displayed, it shows only a simple textbox without the buttons to format the text etc. I understand this must be an issue with the javascript, but I am having a hard time finding how I can trigger the proper code for the textbox to be formatted properly.
This is how the field looks:
And here is the HTML generated from Firebug:
<!-- Start Editor --><label aria-visible="false" style="display:none;" for="description">description_textarea</label><textarea wrap="off" class="wfEditor source" style="width:100%;height:150px;" rows="30" cols="40" name="description" id="description"></textarea><input type="hidden" value="1" name="wf3fadc9c48cabc28750287fe69c3d08c4" id="wf_description_token">
<div id="editor-xtd-buttons">
<div class="button2-left"><div class="image"><a rel="{handler: 'iframe', size: {x: 570, y: 400}}" onclick="IeCursorFix(); return false;" href="http://localhost/ugparl/site/index.php?option=com_media&view=images&tmpl=component&e_name=description" title="Image" class="modal-button">Image</a></div></div>
<div class="button2-left"><div class="pagebreak"><a rel="{handler: 'iframe', size: {x: 400, y: 85}}" onclick="IeCursorFix(); return false;" href="http://localhost/ugparl/site/index.php?option=com_content&task=ins_pagebreak&tmpl=component&e_name=description" title="Pagebreak" class="modal-button">Pagebreak</a></div></div>
<div class="button2-left"><div class="readmore"><a rel="" onclick="insertReadmore('description');return false;" href="http://localhost/ugparl/site/#" title="Read more">Read more</a></div></div>
</div>
<!-- End Editor -->
This is not so much a solution but a workaround. Due to cleaning the headers before displaying the page, the code generated by JCE is lost. By adding the following code to the page called by ajax, I am able to trigger the JCE initializer and display the editor correctly.
$document =& JFactory::getDocument();
echo "<script type='text/javascript'>
function loadJCE() {";
echo $document->_script["text/javascript"];
echo "}
</script>";
Then I just called loadJCE from the load complete function.
Again, this is not the best way to do it but it did the trick for me.
Related
I've been struggling with this for a while, and need some help.
I've managed to add a reCAPTCHA checkbox to my online form, but I'm stumped on what to do when it comes to the verification.
I've used the "Automatically render the reCAPTCHA widget" option as described in the Checkbox instructions.
But I'm getting stuck on the verification instructions.
My form code is pretty simple:
<form name="myForm" action="mail.php" onsubmit="return validateForm()" method="POST">
<div>
<label for="name">Name:</label><br /><input id="name" type="text" name="name" class="formthin" required />
</div>
<div>
<label for="email">Email:</label><br />
<input id="email" type="email" name="email" class="formthin" required />
</div>
<div>
<label for="message">Comments, Questions, Whatever:</label><br />
<textarea id="message" name="message" rows="4" cols="4" class="formbig" required></textarea>
</div>
<div>
<div class="g-recaptcha" data-sitekey="site-key"></div>
</div>
<div>
<input type="submit" value="Submit" class="formsubmit" />
</div>
</form>
I've added the following in between the "<head></head>" tags.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
So far everything looks good on the page.
For good measure, here is the code in the "mail.php" file:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent=" From: \n $name \n\n Message: \n $message";
$recipient = "my email address";
$subject = "Website Contact Form";
$mailheader = "From: $email \r\n";
$forward = 1;
$location = "url of thank you page";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
if ($forward == 1) {
header ("Location:$location");
}
else {
echo "Thank you message.";
}
?>
This is where I need help.
I'm not sure which of the three options for verification I should use, how to implement the choice, or where the code for the API Response should go.
For instance, if I use the first option, does the "g-recaptcha-reponse" POST parameter go inside my initial <form> tag? The notes on the API Request seems to indicate that I need a second POST method. I'm not sure how to combine or implement it with my current one.
Does the API Response code go in my "mail.php" file? Or in between "<script></script>" tags on my form page? (in the head or below the form?)
Where does my "Secret Key" come into play? I don't see any instructions on how to include it.
I've looked through the forum and found a previous question that seem to be related:
"Google reCaptcha v2 (Checkbox) Verification"
The original posted code looks very similar to mine. (both on the html page, and the php action script)
The reply was a second php script that looks like it includes the Secret Key, but with no instructions on where that php code should go. Do I place it in the file with the form? Is it added or does it replace the mail.php action script? And if it replaces the script, how is the response from the actual form handled?
Any help would be appreciated.
Thank you.
++++++++++++++++++++++++++
I have followed the instructions from the link sent by #Bazaim.
These are the steps I took:
Downloaded the "recaptcha-master" folder and added it to my website directory.
ran the "composer" installation scripts in my Terminal.
Moved the "composer.phar" file into the "recaptcha-master" folder.
Added the following to the "composer.json" file:
"require": {
"google/recaptcha": "^1.2"
}
Added the "require_once..." script to the bottom of my "mail.php" file like this:
setExpectedHostname('my-domain-name.com')
->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
// Verified!
} else {
$errors = $resp->getErrorCodes();
}
?>
So far so good. When I go to my form, and click the "checkbox" for I am not a robot, I am prompted to do the image identify thing and get the green "check" next to "I am not a Robot."
However, when I submit my form, my "mail.php" no longer functions. It tries to load in the browser window rather than send me an email.
In addition, the reCAPTCHA checkbox is not "required" to hit submit.
I got it to work. Here's what I ended up doing:
Removed the extra PHP script from my mail.php file. (the "require_once" content mentioned in the previous posts) My PHP script was working before I added that, so I wanted to get it back to a working version.
I tried to make the reCAPTCHA a requirement so I did another search and found instructions on adding javascript and css and added it to the code on my page. (this was one of the things I was trying to solve in my original post)
JavaScript:
window.onload = function() {
var $recaptcha = document.querySelector('#g-recaptcha-response');
if($recaptcha) {
$recaptcha.setAttribute("required", "required");
}
};
CSS:
#g-recaptcha-response {
display: block !important;
position: absolute;
margin: -78px 0 0 0 !important;
width: 302px !important;
height: 76px !important;
z-index: -999999;
opacity: 0;
}
Added to the <head></head> code on my contact page.
Bingo - everything is working.
I'm not sure if the verification information is actually being used. (The other thing I was trying to figure out in my original post) And now I'm not sure if it's actually necessary. reCAPTCHA is required in the form, the form is submitting.
Anyway, thanks to #Bazaim for the help and getting me on track.
Hope this helps anyone else who might be having problems with this.
I am trying to implement something like this.
http://app.maqetta.org/mixloginstatic/LoginWindow.html
I want the login page to load but if you click the signup button then an ajax will replace the login form with the signup form.
I have got this to work using this code
dojo.xhrGet({
// The URL of the request
url: "'.$url.'",
// The success callback with result from server
load: function(newContent) {
dojo.byId("'.$contentNode.'").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});'
the only problem is the new form just loads up as a normal form, not a dojo form. I have tried to return some script with the phaser but it doesnt do anything.
<div id="loginBox"><div class="instructionBox">Please enter your details below and click <a><strong>signup</strong>
</a> to have an activation email sent to you.</div>
<form enctype="application/x-www-form-urlencoded" class="site-form login-form" action="/user/signup" method="post"><div>
<dt id="emailaddress-label"><label for="emailaddress" class="required">Email address</label></dt>
<dd>
<input 0="Errors" id="emailaddress" name="emailaddress" value="" type="text"></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd>
<input 0="Errors" id="password" name="password" value="" type="password"></dd>
<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha Code</label></dt>
<dd id="captcha-element">
<img width="200" height="50" alt="" src="/captcha/d7849e6f0b95cad032db35e1a853c8f6.png">
<input type="hidden" name="captcha[id]" value="d7849e6f0b95cad032db35e1a853c8f6" id="captcha-id">
<input type="text" name="captcha[input]" id="captcha-input" value="">
<p class="description">Enter the characters shown into the field.</p></dd>
<dt id="submitButton-label"> </dt><dd id="submitButton-element">
<input id="submitButton" name="submitButton" value="Signup" type="submit"></dd>
<dt id="cancelButton-label"> </dt><dd id="cancelButton-element">
<button name="cancelButton" id="cancelButton" type="button">Cancel</button></dd>
</div></form>
<script type="text/javascript">
$(document).ready(function() {
var widget = dijit.byId("signup");
if (widget) {
widget.destroyRecursive(true);
}
dojo.parser.instantiate([dojo.byId("loginBox")]);
dojo.parser.parse(dojo.byId("loginBox"));
});
</script></div>
any advice on how i can get this to load as a dojo form. by the way i am using Zend_Dojo_Form, if i run the code directly then everything works find but through ajax it doesnt work. thanks.
update
I have discovered that if I load the form in my action and run the __toString() on it it works when i load the form from ajax. It must do preparation in __toString()
Firstly; You need to run the dojo parser on html, for it to accept the data-dojo-type (fka dojoType) attributes, like so:
dojo.parser.parse( dojo.byId("'.$contentNode.'") )
This will of course only instantiate dijits where the dojo type is set to something, for instance (for html5 1.7+ syntax) <form data-dojo-type="dijit.form.Form" action="index.php"> ... <button type="submit" data-dojo-type="dijit.form.Button">Send</button> ... </form>.
So you need to change the ajax contents which is set to innerHTML, so that the parser reckognizes the form of the type dijit.form.Form. That said, I urge people into using a complete set of dijit.form.* Elements as input fields.
In regards to:
$(document).ready(function() {});
This function will never get called. The document, youre adding innerHTML to, was ready perhaps a long time a go.
About Zend in this issue:
Youre most likely rendering the above output form from a Zend_ Dojo type form. If the renderer is set as programmatic, you will see above html a script containing a registry for ID=>dojoType mappings. The behavior when inserting <script> as an innerHTML attribute value, the script is not run under most circumstances (!).
You should try something similar to this pseudo for your form controller:
if request is ajax dojoHelper set layout declarative
else dojoHelper set layout programmatic
I have a page which uses ajax to submit a comment form, add it to a db, then redisplay the page, hopefully without reloading the page its on.
If I access the script on it's own it works great, yet when I load it into another page it doesn't add the data and also refreshes the page on submit, which I want to avoid, which is the whole point of doing things this way.
Anyway, here's how I load the page:
<div id="wall_comments" class="msgs_holder"></div>
<script type="text/javascript">
$('#wall_comments').load('/pages/comment.php', { wl_id:"<?=$wl_id?>" });
</script>
and then the page itself with jquery code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<div style="width:100%; overflow:auto;">
<form method=post>
<input type="text" class="inp" name="comment" id="comment">
<input type=submit value="do it" name="action" onclick="update()">
<input type=hidden name="wl_id" value="<?=$_REQUEST[wl_id]?>" id="wl_id">
<input type=hidden name="user_id" value="<?=$userfromcookie?>" id="user_id">
</form>
</div>
<script type="text/javascript">
function update(){
var wl_idVal = $("#wl_id").val();
var commentVal = $("#comment").val();
var user_idVal = $("#user_id").val();
$.ajax({
type: "POST",
url: "/pages/comment.php",
cache: false,
data: { submit: "", wl_id: wi_idVal, comment: commentVal, user_id: user_idVal }
});
}
</script>
And finally enter info into db (I know this should be mysqli and it will be)
if(isset($_POST['action'])){
$wl_id = mysql_real_escape_string($_POST['wl_id']);
$comment = mysql_real_escape_string($_POST['comment']);
$user_id = mysql_real_escape_string($_POST['user_id']);
$addcomment = mysql_query("insert into list_wall (
event_id,
user_id,
comment
) VALUES (
'$wl_id',
'$user_id',
'$comment'
) ",$db);
if(!$addcomment) { echo 'result error add comment'; echo mysql_error(); exit; } // debug
}
The problem is when you click the submit button, the page is submitted and the function update couldn't work. You have to cancel the default submit mechanism by using return false;
<input type=submit value="do it" name="action" onclick="update() return false;">
Another thing.
The onclick on the submitbutton will not work as excpected if the submit is caused without clicking the button.
For example mobile safari on iPhone can submit forms directly without triggering the button.
If you add UmairP's version of the onclick to the form element as an onsubmit method you should get the same result on every platform as far as I know.
You can see more details on iPhone forms in my own question on another issue.
How can I prevent the Go button on iPad/iPhone from posting the form
<div style="display: none;">
<div id="location<?php echo $r->id ?>">
<?php echo $r->address; ?>, <?php echo $r->city; ?>, <?php echo $r->province; ?>
<h3 class="sub">Map of Location</h3>
<?php
$CI->conjunction->showMap($r->id, $r->lat, $r->lon, $r->postal, 'map_canvas');
?>
<div id="map_canvas" style="width: 250px; height: 250px;"></div>
</div>
</div>
The above code is what I am using to display a hidden DIV.
I then use
$('a#inline').fancybox({
'autoScale': true
, 'autoDimensions': true
, 'centerOnScroll': true
});
To call Fancybox to display the content.
However, the Google map always breaks the lightbox and is displayed by default.
Is there a reasonable workaround to force the map to hide until the DIV wrapping around it shows?
I have had a similar problem with flash applications which fill the browser viewport: the workaround was to pull it via a URL into an iframe with fancybox.
$("a#inline").fancybox({
'width' : '95%',
'height' : '95%',
'autoScale' : false,
'transitionIn' : 'slow',
'transitionOut' : 'none',
'type' : 'iframe'
});
<a id="various5" href="http://mappage">Link</a>
This is not ideal as you can see but it is a workaround.
Not quite sure how to solve this problem, but you might want to look into this plugin:
http://colorpowered.com/colorbox/
I was using fancybox for a while until I realized it made IE hang until all the images on the page were loaded. Maybe see if you get the same results using this plugin?
i'm learning it, but i cant find what's wrong in this!
i want the div2 to get data from the form in div1, called formulario.
i would like to know which item is selected and which button was clicked.
main html file:
<script src="utils/Scripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function sendf(formul, divi, php)
{
var params = Form.serialize($(formul));
new Ajax.Updater(divi, php, {method: 'post', parameters: params, asynchronous:true});
}
</script>
</head>
<body>
<div id="div1">
contenido div1
<form id="formulario" method="POST">
<select size="3" id="lista" onchange="sendf('formulario', 'div2', 'prodiv1.php');">
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
</select>
<input type="button" id="b1" value="bot1" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
<input type="button" id="b2" value="bot2" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
</form>
<div id="div2" style="background: blue;">
contenido div2
</div>
</div>
</body>
</html>
the php file, prodiv1.php:
<?
echo 'exec: prodiv1.php<br>';
print_r($_POST);
echo serialize($_POST);
if (isset($_POST))
{
foreach ($_POST as $key=>$value)
{
echo $key.'=>'.$value."<br>";
}
}
echo "select: ".$_POST['lista'];
if (isset($_POST['b1'])) {echo 'click: boton1';} else {echo 'click: boton2';}
?>
i've tried a lot of things, and seen that it could be done with event observers, httprequests and such, but what i need is quite easy, and probably there's an elegant way to solve it...
i thank in advance any help!
have a nice day.
guillem
if you dont need to actually process the form contents in some way then you have no need to use Ajax to pass to a PHP script. Depending on what exactly you wanted to display in div 2 you could do something as simple as this:
function sendf()
{
var listvar = $('lista').value;
$('div2').update('select menu value was ' + listvar);
}
This is obviously missing quite a lot of detail and can be massively improved but it should highlight the fact that AJAX is not required.
Edit Looking at the rest of the code you have posted, is AJAX really required for this? surely you are just updating the existing page with data already present on the page, the server has no real part to play in this?
Sorry to dive into jQuery again, but this should allow you to get the values into "div2" without an ajax request.
$(document).ready(function() {
$("input").click(function(e) {
$("#div2").html($(this).attr("id")+" clicked<br />");
updateList();
});
});
function updateList() {
$("#div2").append($("#lista").val() + " selected");
}
In plain English this code says "if an input element is clicked, update the value of div2 with the input variables id, and append the selected value from the list to the result". Hopefully that makes sense to you :)
If you need an easy, elegant way to solve this with AJAX, use the jQuery library's ajax and post methods. For more information take a look here, it will significantly cut down on the size and complexity of your code.