I have form with Tinymce. I am saving text writen in tinyMce using ajax call.
when I press the save button it does not save the latest value which i entered in tinymce.
i.e. when i load the page, default value in the field is "aaaa". I update it to "bbb" and press the save button. but it saved the value "aaaa". Now I change the value from "bbb" to "ccc" and press the save button now it save the previous value "bbb" not "ccc". so it is keep saving the one step old value. I don't know why?
Here is the saveAction which I am calling on Save button using ajax
public function saveAction()
{
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);
var_dump ($_REQUEST);
if($this->getRequest()->isPost())
{
$data=$this->_getParam('content');
var_dump($_REQUEST); // var dump shows the old value each time i press the save button
}
here is my form
here is ajax script
$('#frm').submit(function() {
var options = {
target: '#response',
beforeSubmit: showRequest,
success: showResponse,
url: '/admin/index/save'
};
$(this).ajaxSubmit(options);
return false;
});
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
}
function showResponse(responseText, statusText, xhr, $form) {
}
Try to do the following on button click before you anything else:
tinymce.activeEditor.save();
This will set the actual editor content to the textarea in the background.
Hi i searched alot about this then from tiny mce site i found this onkeyup event that can be added in the script code in head.
// Adds an observer to the onKeyUp event using tinyMCE.init
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyUp.add(function(ed, e) {
console.debug('Key up event: ' + e.keyCode);
});
}
});
I replaced some parts like below
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
tinymce.activeEditor.save();
});
}
});
so now whenever i change something in any tinymce textarea on my page the current text is saved and ajax get the current value.
I got my problem solved.
I am just a starter in ajax and JavaScript having a desire to achieve perfection.
I hope this helps others as well :)
Just remember me in your prayers.
Happy coding :)
tinyMCE.activeEditor.save();
(caps letters for MCE)
Related
I'm trying to run a function that executes a spinner while a PHP script is loading and also refreshes a PHP file that counts the number of rows inserted to show the script's progress.
This is what I have so far:
<script type="text/javascript" language="javascript">
// start spinner on button click
$(document).ajaxSend(function(spinner) {
$("#spinner").show();
});
// refresh progress script and output to #content div
function updateProgress(){
$('#content').load('progress.php');
}
myTimer = setInterval( "updateProgress()", 2000 );
// Execute the primary function
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('execute.php');
});
});
// hide spinner and content div when finished
$(document).ajaxStop(function(spinner) {
clearInterval(myTimer);
$("#spinner").fadeOut("fast");
$("#content").fadeOut("fast");
});
</script>
Right now the updateProgress() function starts after the first interval is over even if the button hasn't been pushed, so I'm assuming I have to tie it in with the spinner function but I'm just not entirely sure how to make that work.
EDIT: Here's the HTML that displays the button and the div's:
<div id="stage">
Click to Import New Data into AssetData Table
<p>
<div id="spinner"><img src="/images/spinner.gif" alt="Loading..."></div>
<div id="content"></div>
<p>
<input type="button" id="driver" value="Load Data" onClick="this.disabled=true;"></div>
You need:
Load page with button. When you push button file execute.php should upload.
After user push button, spinner appearing and browser starts make ajax request to progress.php.
When execute.php uploaded, spinner disappears, progress results disappears.
jQuery code below doing this:
var myTimer;
$(document).ready(function () {
// Execute the primary function
$("#driver").click(function (event) {
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139',
success: function (data) {
//$("#someField").html(data); // you put result of executting `execute.php` into #someField field by uncommenting this string
$("#spinner").toggle();
$("#content").fadeOut("fast");
clearInterval(myTimer);
},
error: function (bob) {
// show error
console.log('get error');
clearInterval(myTimer);
},
beforeSend: function () {
myTimer = setInterval(function () {
/* // uncomment this when you will use it with real files and server
$.ajax({
url: 'progress.php',
success: function (data) {
$("#content").html(data);
}
});
*/
$("#content").append("progress data<br>");
console.log('progress executed');
}, 1); // change delay, when you work with real files and server
$("#spinner").toggle();
console.log('ajaxSend handler executed');
}
});
console.log('main function executed');
});
});
Look this example (this example for code above), please.
Now, this code do all what you need. Right?
Don't forget to uncomment some lines (ajax requests), change intervals, remove debug outputs (line 29, for example) etc.
Notice (and change it, when you will use my code) url field of execute.php ajax-requst. I had used weather api (just for example, you musth change it to progress.php because download this data takes some time, so you can see results. Remove weather url and put url to progress.php.
Also, you can check this example. Code is tided up and this version allows to load file and after that load another. And after that load another. + now myTimer+setInterval+function progress synergizes better, I suppose.
Hope, this will help you.
The problem is upon load of website, width of .mCSB_container class is ok, but when i click on a link, for example "projects" link, which fires an ajax function, width of .mCSB_container does not change even if contents are not that much. Web page will not load upon click on the link. I tried using the "update" function, but seems like it is not working.
ok I use this plugin and i had te same problem but check this:
<script type="text/javascript">
$(function() {
$("#content").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize: true // <- the solution
}
});
// get ajax link
$('.Link').click(function(){
$.get(this.href, function(data) {
$("#content .mCSB_container").html(data); // fill .mCSB_container
$("#content").mCustomScrollbar("update");
$("#content").mCustomScrollbar(
"scrollTo"
,"top"
,{scrollInertia:200}
); // go to Top content
});
return false;
});
});
</script>
I have a form that submits through Ajax, which works perfectly at the moment. I tried to add a confirm option to allow / prevent the Ajax submission through adding the following lines:
var answer = confirm('Submit now?');
return answer // answer is a boolean
if(answer) { ... }
Below is my full function, which, as you can see, fires on clicking the submit button. The error occurs when the user selects okay in the dialog. The entire page is refreshed and any single Ajax warnings are returned at the top of a blank screen. In a normal case, without this confirm code, the error messages appear in the div#result tag at the bottom of the form.
$("#submitbtn").click(function() {
var answer = confirm('Submit now?');
return answer // answer is a boolean
if(answer) {
$('#result').html('<img id="loading" src="images/loading.gif" />').fadeIn();
var input_data = $('#create_po').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('#loading').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
}
});
How should I implement a confirm dialog that doesn't refresh the screen? Any suggestions would be greatly appreciated. Thanks!
You are doing return answer. Which doesn't make any sense here.
It will stop the JavaScript function, and will return the boolean. Remove this line, and you're set
Also, add this to make your submit not fireing if the confirm box is false ;)
if (answer){
// your ajax call
}
else {
return false;
}
Do not use this:
<input type="submit">
Use this:
<input type="button">
A submit button automatically submits a form. A regular button does nothing. You can use that to listen for clicks and THEN submit your form, or not.
I am working with AJAX with prototype and PHP. It is working for me but I need some small changes. Following is my running code for AJAX request:
JS/Prototype:
function ajaxRequest(url) {
new Ajax.Request( url, {
method: 'get',
onSuccess: function( transport ) {
// get json response
var json = transport.responseText.evalJSON( true );
alert(json);
},
onFailure: function() {
alert('Error with AJAX request.');
}
});
return false;
}
HTML:
<a href='javascript:ajaxRequest("/testajax/ajaxresponse");'>Testing AJAX</a>
Question:
Now I want to change my link like this:
<a href='/testajax/ajaxresponse' class='AjaxLink'>Testing AJAX</a>
So prototype function should capture click event of class='AjaxLink' links and then get href part of clicked link and proceed. How can I change my above prototype function for such kind of links.
Thanks
If you have Prototype 1.7 then this way is available:
document.on('click', 'a.AjaxLink', ajaxRequest.curry('/testajax/ajaxresponse'));
Otherwise you'll have to rely on good old Event.observe:
$$('a.AjaxLink').invoke('observe', 'click',
ajaxRequest.curry('/testajax/ajaxresponse'));
Just re-read the question and I see you want to use the href attribute. Jan Pfiefer was very close.
document.on('click', 'a.AjaxLink', function(event, element) {
return ajaxRequest(element.href);
});
This wont work. Why do you want such a link? If a link is specified in this way any click on it will follow its href and change location of actual document. Only way to prevent such a behavior then is by adding onclick again or in $(document).ready bind onclick handler, and manualy cancel the event.
UPDATE
However to bind onclick event on all links with AjaxLink class,execute request and cancel the event:
$(document).ready(function(){
$('.AjaxLink').click(
function(e){
ajaxRequest(this.href);
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
);
});
This will work:
$$('a.AjaxLink').each(function(element) {
element.observe('click', function(e) {
var element = e.element()
Event.stop(e)
alert(element.href)
});
})
This is a follow up to a previous question. I am using the jQuery Validation plugin on the UI Acordion. After successful validation on the client and server side, the next accordion should open. I am using AJAX because I would like to add the submitted values above the accordion as each step of the form is completed. If I use $.ajaxSubmit, the PHP appears to work properly, but the next accordion does not open as it should. If I use $.ajax, everything works properly on the jQuery side (the first accordion closes and the next one opens), but the PHP does not appear to communicate properly with the client.
Any ideas on what I'm doing wrong?
[Note: I have edited the above post for clarification]
$(document).ready(function(){
$("#applicant-form").validate({
errorPlacement: function(error,element) {
return true;
},
rules: {
"firstName": {
required: true,
minlength: 1
}
},
submitHandler: function(form) {
$.ajax({
error: function() {alert("doh!");},
success: function(e) {
var acc = $("#accordion"),
index = acc.accordion('option','active'),
total = acc.children('div').length,
nxt = index + 1;
acc.accordion('activate', nxt);
}
});
return false;
}
});
$f <--- form object
$acc <-- accordion object
if($f->isSubmitted()){
$f->update();
$acc->js()->accordion('activate',next)->execute();
}
Please show some demo of the validation examples of JQuery PHP forms ...
There
In Agile Toolkit would be something like this
$f <--- form object
$acc <-- accordion object
if($f->isSubmitted()){
$f->update();
$acc->js()->accordion('activate',next)->execute();
}