Purpose is to have a small icon on my admin page.
Clicking this icon will fire a modal window with an instance of ckeditor textarea.
The user edit the text, saves it and modal closes.
My problem is that if i click again on the icon, the new editor instance is empty.
Below you can see the relevant codes
HTML Part:
<a id="editShortText" title="Short Description" href="#saveShortTextFrm"><img src="clickme.gif">
<div style="display:none">
<form action="" method="post" id="saveShortTextFrm" name="saveShortTextFrm" class="frm">
<textarea class="jquery_texteditor" name="short_text_english" id="short_text_english" style="width:700px; height:400px;"><? echo $value_from_db;?></textarea>
<div align="center" style="margin:20px;"><input name="submit1" type="submit" value="Save" /></div>
</form>
</div>
JS Script:
$("#editShortText").fancybox({
'scrolling': 'no',
'titleShow': false,
'onStart': function() {
$('.jquery_texteditor').ckeditor(config);
},
'onComplete': function() {
$('.jquery_texteditor').ckeditor(config);
},
'onClosed': function() {
$('.jquery_texteditor').ckeditor(config);
}
});
$("#saveShortTextFrm").live("submit", function() {
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "_save_text.php",
data : $(this).serializeArray(),
success: function(data) {
if (data!='')
{
$("#shortTtextImageHolder").html('<img src="images/button_accept.gif" border="0">');
if(CKEDITOR.instances["jquery_texteditor"])
{
delete CKEDITOR.instances["jquery_texteditor"];
$('.jquery_texteditor').ckeditor(config);
$("#short_text_english").val(data);
CKEDITOR.instances.short_text_english.setData(data);
}
}
else
{
$("#shortTtextImageHolder").html('<span class="error">S.O.S.</span>');
}
$.fancybox.close();
}
});
return false;
});
All work well for the first click - when I click my link/image for the first time.
If i click again (after saving modal data or just closing modal window), the new modal fires up but text area is empty of data.
Any ideas on how to fix this?
When you close the modal try to use
CKEDITOR.instances.short_text_english.destroy(true);
or
if (CKEDITOR.instances.short_text_english) {
CKEDITOR.instances.short_text_english.setData("");
CKEDITOR.instances.short_text_english.destroy(true);
}
Related
I want to display text message for success in popup div without refreshing the page
My popup form like this
<div class="modal-content">
<div id="message">Your message has been sent.<br /><br /></div>
<form action="<?php echo $_SERVER['REQUEST_URI'];?>" id="CallBackForm" name="CallBackForm" method="post">
<div class="form-group">
<input id="custmobileNo" name="custmobileNo" type="text" required="required">
<input type="submit" value="call" id="callback" name="callback" class="btn btn-info">
</div>
</form>
</div>
When I click on this link pop up will call
<a href="#" data-toggle="modal" data-target="#call-back">
<input type="submit" value="Call" class="btn-d btn-doctor" >
</a>
CSS:
<style type="text/css">
#message {
display:none;
font-size:15px;
font-weight:bold;
color:#333333;
}
</style>
Ajax Call:
<script>
$("#callback").click(function () {
var custmobileNo = $("#custmobileNo").val();
$.ajax({
url: "<?php echo base_url('Call'); ?>",
type: 'post',
data: {custmobileNo: custmobileNo},
beforeSend: function () {
if (custmobileNo != "") {
$("#message").fadeIn(); //show confirmation message
$("#CallBackForm")[0].reset(); //reset fields
}
}
});
});
</script>
I wrote beforeSend function() with some data either it was standard code or not I don't know. It was calling message fine but it was not closing I want it will close with in some seconds and click on again that button success message validation was showing I want clear that text also.
Try something like this maybe :
$.ajax({
url: "<?php echo base_url('Call'); ?>",
type: 'post',
data: {custmobileNo: custmobileNo},
beforeSend: function () {
if (custmobileNo != "") {
$("#message").fadeIn(); //show confirmation message
$("#CallBackForm")[0].reset(); //reset fields
}
},
success: function() {
setTimeout(function() { //hide message after a certain time
$("#message").fadeout();
}, 5000); // choose after how many time message should hide, here 5s
}
});
But if your Ajax call fail you won't go in the success part so becareful !
You can do the same with complete : function() {...} instead of success : function() {...}, here is some information about Ajax event : https://api.jquery.com/Ajax_Events/
Is it what you are looking for?
I have 3 steps to do:
Send some datas via AJAX to a PHP page
Retrieve results and show to user a button with popover which contains a form to save name of user search
Send this form in other PHP page via other AJAX
Points 1 and 2 work fine.
I put popover function in 'complete' section of ajax because popover is created only after results are retrieved.
For point 3, i am unable to catch last form with on.submit. When i click on submit button, it sends form (reload my page).
Here is my code:
HTML part:
<body>
<div class="row" id="results"></div>
</body>
JS part:
/* popover form for save search */
var search_box = '<div id="popover-content" class="hide">'+
'<form id="searchForm" class="form-inline" role="form">'+
'<div class="form-group has-warning">'+
'<input placeholder="Name" class="form-control" maxlength="50" type="text"> '+
'<button type="submit" class="btn btn-warning"><i class="fa fa-check"></i></button>'+
'</div>'+
'</form>'+
'</div>';
/* function to retrieve results and show button with popover */
function searchresults() {
if(select_data !== ''){
$.ajax({
type: "POST",
dataType: 'json',
url: "search.php",
data: { q: select_data },
cache: false,
success: function(data) {
if($.isPlainObject(data) && data.state === 200){
// here is code to retrieve results...
// show button with popover and form
saveButton ='<button type="button" class="btn btn-outline btn-warning btn-lg" data-toggle="popover" data-placement="auto top" data-title="Enter name for your search"><i class="fa fa-star"></i> Save selection</button>'+search_box;
$("div#results").html(saveButton);
}
},
complete: function (jqXHR, status) {
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
/* ******** PART DOES NOT WORK ******** */
$("#searchForm").on('submit', function(e) {
e.preventDefault();
alert('passed');
/* code ajax here */
return false;
});
}
});
}return false;
}
How to correct this?
Try to add $(document) .... Let me know if it works I didnt test
$(document).on('submit', 'form#yourFormID', function(e) {
e.preventDefault();
alert('passed');
/* code ajax here */
return false;
});
I don't get why the modal is showing my html's body content when I submit an input instead of the result of php.
I tried debugging it,then i found out that the modal shows its own content when I add data-toggle and data-target to the input/form, but the problem is that the modal shows after I click on the input even before I can even type something,and even I managed to type something, the same problem still exists
Here's the form:
<form id="form_id" action="some_php.php" method="POST">
<input id="input_id" type="text" name="input_name">
</form>
Here's the script:
$(document).ready(function()
{
$("#form_id").submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
data: $("form_id").serialize(),
url: 'some_php.php',
success: function(data) {
$("#fetched-data").html(data);
$("#myModal").show('show');
}
});
return false;
});
});
i am trying to use fancybox to display login form like bellow
<div style="display:none">
<form id="login_form" method="post" action="">
<p id="login_error">Please, enter data</p>
<p>
<label for="login_name">Login: </label>
<input type="text" id="login_name" name="login_name" size="30" />
</p>
<p>
<label for="login_pass">Password: </label>
<input type="password" id="login_pass" name="login_pass" size="30" />
</p>
<p>
<input type="submit" value="Login" />
</p>
<p>
<em>Leave empty so see resizing</em>
</p>
</form>
</div>
the java script for that is
$("#login_form").bind("submit", function() {
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
the html is
<a id="tip5" title="Login" href="#login_form"><?php echo "Login" ; ?></a>
when i click on login link, it shows the login popup but when i click on submit button it close the popup and refresh the page.
actually it should check the data and display data on popup not refresh page.
Thanks
There could be more problems:
Fancybox is probably cloning the original HTML to put it into the popup. Therefore You need to use function live instead of bind.
It is possible that Fancybox could alter the form's ID in some way (check that with some DOM Inspector like FireBug for FireFox) and assure that the form's ID within a popup is the one You'd lived the submit event for.
I also prefer to use event.preventDefault() instead of returning false... My JS code would then be:
$("#login_form").live("submit", function(e) {
e.preventDefault();
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
});
i want to use user input in jquery dialog input box to be used when jquery dialog ok button is pressed.
now the problem is the code after jquery dialog box also get executed withought waiting for jquery input field to be filled by user
<p id="text"> click me </p>
<div id="test" class="sandy" >
<input id="username" class="sandy1" />
</div>
$('#text').click(function(){
$('.sandy').dialog({
buttons: {
"OK": function() {
$(this).dialog('close');
}}
});
var myvalue= $("#test").val();
alert(myvalue);
})
you can check the demo at this link : http://jsfiddle.net/zCFD5/86/
please suggest me some way out to hold on to jquery dialog till user presses ok button and then move on to code after it.
Try this JS:
$('#text').click(function(){
$('.sandy').dialog({
buttons: {
"OK": function() {
if($('#username').val() == '') {
$('#username').focus();
} else {
var myvalue= $("#username").val();
$(this).dialog('close');
alert(myvalue);
}
}
}
});
});
EDIT: I also updated the code at JSFIDDLE and it works fine :-) http://jsfiddle.net/zCFD5/96/