I have created country and city as dependable menus. When I select all the dropdown values and click on the display button it should render created html table just below the display button which is illustrated in image below.
For table creation when I click on the display button it loads javascript code and sends ajax request to another php page. In this php page table is created. How can I render thus created html table in section just below the Display button.
My javascript code in index.php page is
<script type="text/javascript">
function tbl_display(){
var sel_countryid= $("sel_country").val();
var sel_cityid= $("#sel_city").val();
var dataString = 'sel_countryid='+ sel_countryid+ '&sel_cityid='+ sel_cityid;
alert(dataString);
if(sel_regionid=='' || sel_lbtype=='')
{
alert("Please enter Valid Data");
}
else
{
$.ajax({
type: "POST",
url: "tbl_create.php",
data: dataString,
cache: true,
success: function(html){
}
});
}
}
</script>
I have created table in tbl_create.php page.
How can I use thus created table to render below display button or How can I pass created html table to javascript code and render it to desired section ?
in your ajax function set the dataType to html and in it's success-function put the result out to a <div> below your form:
$.ajax({
type: "POST",
url: "tbl_create.php",
data: dataString,
dataType: "html",
cache: true,
success: function (html) {
$("#target").html(html);
}
});
html:
<!-- your form is here -->
<div id="target"></div>
you can append the return html table from tbl_create.php using the html() jquery function
so the return must be a string
$table = "<table><tr><td>THIS IS A TABLE</td><td>FIRST ROW</td></tr></table>";
return $table
if return won't work
try
echo $table
then in the success function
success: function(html){
$('#appendReturnTable').html(html);
}
that should do the trick hope it helps
Assuming that in your html page you have a div for your table like this :
<div class="myTable"></div>
Then in the success function of your ajax request try this :
//....
success: function(html){
$('.myTable').html(html)
}
//....
Related
I am trying to submit a form which will insert data into a mysql database which is working fine. I then would like to return the id of the new inserted row (id auto increment in mysql table) as I want to open up a modal once the form is submitted so I can provide a link which includes id as a parameter in the url.
To send the data for the form I am using the following code:
$(document).ready(function(){
$("#submitForm").click(function(){
var string = $('#commentForm').serialize();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "SubmitData.php",
data: string,
cache: false,
success: function(result){
//alert(result);
}
});
});
});
The SubmitData.php file then inserts the form data into the database.
In the SubmitData.php I can create a variable to pick up the id of the newly inserted row like
$last_id = mysqli_insert_id($conn);
Is there a way I can return the $last_id from the SubmitData.php file within the same function?
Yes return from SubmitData.php the id using the following echo:
echo json_encode(['id'=>$last_id]);
js:
$(document).ready(function(){
$("#submitForm").click(function(){
var string = $('#commentForm').serialize();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "SubmitData.php",
data: string,
cache: false,
success: function(result){
alert(result.id);//this will alert you the last_id
}
});
});
});
print last id in that php file
echo $last_id;
get that in ajax success function
success: function(result){
alert(result);
}
One of my friend's site is using CKEditor 3.6.3. When we update content of a div integrated with CKEditor via jQuery/AJAX, the CKEditor itself get destroyed. How to fix this problem? Note that we can't update CKEditor at this stage.
This is how we integrate CKEditor to our divs:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<?php
include_once "ckeditor/ckeditor.php";
require_once 'ckfinder/ckfinder.php' ;
$CKEditor = new CKEditor();
$CKEditor->basePath = '/ckeditor/';
$CKEditor->config['width'] = 600;
$CKEditor->textareaAttributes = array("cols" => 80, "rows" => 10);
$initialValue = 'This is some sample text.';
CKFinder::SetupCKEditor( $CKEditor,'ckfinder/') ;
?>
HTML:
<label for="desc">Description:</label>
<div class="ckeditor" id="desc"><?php $CKEditor->editor('description', $description);?></div>
JQuery/AJAX:
$.ajax({
beforeSend: startRequest,
url: "ajax/ajax.php",
cache: false,
data: "id="+id,
type: "POST",
dataType: "json",
success: function(data){
if(data.error != "No result found.")
{
$("#desc").html(data.desc);
}
});
});
What you're doing is you're changing the div's html where actually there is some iframe and stuff for ckeditor to work correctly. But there's a built-in method to change content of ckeditor. it's setData. So you need to do:
editor.setData(data.desc);
I'm having some trouble getting my form to submit data to my PHP file.
Without the AJAX script that I have, the form takes the user through to 'xxx.php' and submits the data on the database, however when I include this script, it prevents the page from refreshing, displays the success message, and fades in 'myDiv' but then no data appears in the database.
Any pointers in the right direction would be very much appreciated. Pulling my hair out over this one.
HTML
<form action='xxx.php' id='myForm' method='post'>
<p>Your content</p>
<input type='text' name='content' id='content'/>
<input type='submit' id='subbutton' name='subbutton' value='Submit' />
</form>
<div id='message'></div>
JavaScript
<script>
$(document).ready(function(){
$("#subbutton").click(function(e){
e.preventDefault();
var content = $("#content").attr('value');
$.ajax({
type: "POST",
url: "xxx.php",
data: "content="+content,
success: function(html){
$(".myDiv").fadeTo(500, 1);
},
beforeSend:function(){
$("#message").html("<span style='color:green ! important'>Sending request.</br></br>");
}
});
});
});
</script>
A couple of small changes should get you up and running. First, get the value of the input with .val():
var content = $("#content").val();
You mention that you're checking to see if the submit button isset() but you never send its value to the PHP function. To do that you also need to get its value:
var submit = $('#subbutton').val();
Then, in your AJAX function specify the data correctly:
$.ajax({
type: "POST",
url: "xxx.php",
data: {content:content, subbutton: submit}
...
quotes are not needed on the data attribute names.
On the PHP side you then check for the submit button like this -
if('submit' == $_POST['subbutton']) {
// remainder of your code here
Content will be available in $_POST['content'].
Change the data atribute to
data:{
content:$("#content").val()
}
Also add the atribute error to the ajax with
error:function(e){
console.log(e);
}
And try returning a var dump to $_POST in your php file.
And the most important add to the ajax the dataType atribute according to what You send :
dataType: "text" //text if You try with the var dump o json , whatever.
Another solution would be like :
$.ajax({
type: "POST",
url: "xxxwebpage..ifyouknowhatimean",
data: $("#idForm").serialize(), // serializes the form's elements.
dataType:"text" or "json" // According to what you return in php
success: function(data)
{
console.log(data); // show response from the php script.
}
});
Set the data type like this in your Ajax request: data: { content: content }
I think it isnt a correct JSON format.
i am using this jquery code:
<script type="text/javascript">
$(document).ready(function () {
$("#message").hide();
$("#please_wait_box").hide();
$("#editcustomer").submit(function (e) {
$("#message").hide();
$("#please_wait_box").show();
e.preventDefault();
dataString = $("#editcustomer").serialize();
$.ajax({
type: "POST",
url: "editcustomer_go.php",
cache: false,
data: dataString,
success: function (res) {
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
});
});
});
</script>
to submit forms without changing the page.
then the editcustomer_go.php echoed results display in:
<div id="message" class="messagebox"></div>
<div id="please_wait_box" class="messagebox">Please Wait...</div>
i am using tinymce for text editors - its working okay but when the data is posted in the PHP, its not seeing the changed data in the tinymce text editor - it has to be plain text.
how can i get round this?
To grab the data from TinyMCE you need to use their getContent() function.
So in your case it'd be
// Grab a reference to the editor
var ed = tinyMCE.get('tinymceeditorname');
// Get it's content
var editordata= ed.getContent();
... and then just pass editordata along with the rest of the form as the AJAX call data.
I'm populating a table with values from my database. I have included a delete icon in rows which can be deleted. The image has an onclick='deleteCat(id);' property, the id is taken from a json array trough a loop like so:
string = "<td align='center'><a href=''><img border='0' src='../images/Bullet-Delete.png' alt='delete' onclick='deleteCat("+json[i]['id']+");'/></a></td>";
This is my deleteCat function:
function deleteCat(id){
var dataString = "catId=" + id;
$.ajax({
type: "POST",
url: "../ajax/categorie_verwijderen.php",
data: dataString,
success: function(data) {
//$("#allecat").find("tr:gt(0)").remove();
//update_table();
}
});
//alert(id);
}
My function works when I put an alert after the ajax. The table refreshes and the row is removed from my db. However when I remove the alert my function does not work, the table is refreshed and the row is still present in the table and db.
Thanks in advance.
You need to prevent the default event for the click - ie the page is being reloaded each time you click on the image
function deleteCat(id){
var dataString = "catId=" + id;
$.ajax({
type: "POST",
url: "../ajax/categorie_verwijderen.php",
data: dataString,
success: function(data) {
$("#allecat").find("tr:gt(0)").remove();
update_table();
}
});
return false; // prevent the browser following the href
}
You will also need to change your html :
onclick='return deleteCat("+json[i]['id']+");
The alert() helps because that delays the processing of the remaining javascript in that function. The ajax send data asynchronously. async key is Default: true and should change it to false in your call till the client wait for end of ajax call.
e.g.:
$.ajax({
async:false,
url: "test.html",
.
.
});