Develop Reference

PHP Get AJAX Data on the same page

I need to get a DOM element's width to work with the data later with PHP. The ajax call and the PHP is on the same page.
Here's how the page looks like:
<div id="elem" width="200px"></div>
<script>
let wd = document.getElementById('elem').offsetWidth;
$.ajax({ type: "POST", url: "index.php", data: {"width": wd} });
</script>
<div id="elem2">
<?php
echo $_POST['width'] . 'px';
?>
</div>
So I have elem which has a not fix width and I need to get that so I can work with that in PHP later. It is important to get the width first, because elem is rendered before elem2 and I need elem's width to show elem2 properly.
The current output for echo $_POST['width'] is nothing.
I have seen people getting the ajax data on the same page but they used form inputs, but I POST elem's width.

I don't know this is can help you or not, but you can use success of ajax to show elem1's width inside elem2:
$.ajax({
type: "post",
url: "index.php", //or somewhere else,
data: { width: wd },
dataType: "json",
success: function( response ) {
document.getElementById("elem2").innerHTML = response.width
}
})

Cannot append or post CKEditor value

I have a CKEditor in an ASP.NET MVC application and I cannot append or post the updated value of the textarea as shown below:
<textarea name="Description" id="Description" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
CKEDITOR.replace('Description',
{
filebrowserBrowseUrl: '/....',
filebrowserUploadUrl: '/....'
});
</script>
function insert(event) {
event.preventDefault();
var desc = CKEDITOR.instances['Description'].getData(); //I obtain the updated text at this line
var formdata = $('#frmCreate').serialize();
formdata.append("Description", desc); //!!! This is not working !!!
$.ajax({
type: "POST",
url: '#Url.Action("Insert", "Blog")',
cache: false,
dataType: "json",
data: formdata,
success: function (response, textStatus, XMLHttpRequest) {
$('#result').html(data);
}
});
};
I can pass the initial value of the textarea (DEscription property of teh model), but after making any change the data still keep the initial value. Any idea about how to pass the Description field to the Controller???

CKEditor auto-updates <textarea> when the form is submitted in the traditional way (classic submit). If you are using Ajax, you need to update the <textarea> manually with https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-updateElement.
See also the CKEditor in Ajax Applications sample.

send table created in one page to another page

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)
}
//....

Scrape and display web content from another URL using JQuery/AJAX/PHP

I need to do the following:
Catch a URL pasted into a simple HTML text box on the paste event and save to a JavaScript variable called myURL (this code works)
Send the myURL variable using AJAX to a PHP page that will scrape some content from the URL. The PHP page (webscraper.php) will save the scraped content in the database and then also display the scraped content on the HTML page (where the text box is) without reloading the page. And this step is where the code is missing and broken.
index.html:
<body>
<input type="text" class="newslinkinput"/>
</body>
URLonpaste.js:
$(document).ready(function () {
$(".newslinkinput").bind('paste', function (e) {
setTimeout(function () {
var myURL = $(".newslinkinput").val()
$.ajax({
type: "POST",
url: "webscraper.php",
data: "newslink=" + myURL.val(),
success: function (data) {}
});
}, 0);
});
});
webscraper.php:
<?php
$newslink = $_POST['newslink'];
require_once('ExternalScraper.php');
$result = ExternalScraper::fetch($newslink);
$contentA = $result->contentA;
$contentB = $result->contentB;
include "include/database.php";
$insert = mysqli_query($connect, "INSERT INTO mytable (contentA, contentB) VALUES ('$contentA', '$contentB')");
mysqli_close($connect);
//Somehow get $contentA and $contentB to display on index.html
//Do all this without refreshing the page
?>

Try this:
index.html:
<body>
<input type="text" class="newslinkinput"/>
<div id="contentA"></div>
<div id="contentB"></div>
</body>
URLonpaste.js:
...
$.ajax({
type: "POST",
url: "webscraper.php",
data: "newslink=" + myURL.val(),
dataType: "json",
success: function (data) {
$('#contentA').html(data.contentA);
$('#contentB').html(data.contentB);
}
});
...
webscraper.php (append to the end):
...
echo json_encode(array('contentA' => $contentA, 'contentB' => $contentB));

PHP $_POST not working with jquery

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.