I started an app using the "Delighted" app template and I am trying to convert an html partial page to a php partial page and have it load when HTML on left nav is clicked. Once I changed the HTML to PHP, it stopped working and will not load. I have tried modifying the JS provided (below).
Any thoughts?
OLD HTML:
My Accounts
NEW HTML:
<a href="my-accounts.php" data-original-title="My Accounts"> My Accounts</span>
</a>
JS:
function loadPage(url, container) {
*//added this piece*
if (url.lastIndexOf(".") > -1) {
urlExt = url;
}
*//original code*
else {
urlExt = url + '.html';
}
//console.log(container)
$.ajax({
type: "GET",
url: urlExt,
dataType: 'html',
cache: false,
success: function...etc...
});
}
Related
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 have been using the code from the top answer of the following post:
Need help understanding how to ajaxify a web site
It's working correctly when I try it with .html pages, as shown in the example. However, my pages are in php. Everything is working as it should with the php pages, except that when the url updates it shows as .html instead of .php.
In the code, taken from the answer I mentioned:
<script type="text/javascript">
var directory = 'content/'; //directory of the content we want to ajax in
var state = History.getState();
//for when they click on an ajax link
$('.ajaxify').on('click', function(e){
var $this = $(this);
var href = $this.attr('href'); // use the href value to determine what content to ajax in
$.ajax({
url: directory + href + '.html', // create the necessary path for our ajax request
dataType: 'html',
success: function(data) {
$('#content').html(data); // place our ajaxed content into our content area
History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
}
});
e.preventDefault(); // we don't want the anchor tag to perform its native function
});
//for when they hit the back button
$(window).on('statechange', function(){
state = History.getState(); // find out what we previously ajaxed in
$.ajax({
url: directory + state.title + '.html', //create our path
dataType: 'html',
success: function(data) {
$('#content').html(data);
}
});
});
</script>
I have tried changing
$.ajax({
url: directory + href + '.html', // create the necessary path for our ajax request
dataType: 'html',
success: function(data) {
$('#content').html(data); // place our ajaxed content into our content area
History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
}
});
to (changed .html to .php):
$.ajax({
url: directory + href + '.php', // create the necessary path for our ajax request
dataType: 'html',
success: function(data) {
$('#content').html(data); // place our ajaxed content into our content area
History.pushState(null,href, href + '.php'); // change the url and add our ajax request to our history
}
});
However, this has no effect. I have also tried changing the HTML:
<ul id="nav">
<li id="home-link">Home</li>
<li id="work-link">Work</li>
<li id="labs-link">Labs</li>
<li id="blog-link">Blog</li>
</ul>
<div id="content">Home Content</div>
to (adding .php to the hrefs):
<ul id="nav">
<li id="home-link">Home</li>
<li id="work-link">Work</li>
<li id="labs-link">Labs</li>
<li id="blog-link">Blog</li>
</ul>
<div id="content">Home Content</div>
but this stops the page loads from working completely. Any advice would be greatly appreciated. Thanks!
Okay so am using Ajax to send a JS variable from index.php to page2.php . Once it is set to page2.php, the database is edited while the user has been on index.php the entire time. However, I need the index.php to reload or refresh once page2.php has finished updating the database in the background. To give you a better clue, I will include some of my code.
On Index.PHP is :
<a href='#' class='dbchange' onclick='dbchange(this)' id='".$ID'>Update</a>
and
function dbchange(obj) {
var id = $(obj).attr('id');
$.ajax({
type: "POST",
url: 'page2.php',
data: "NewID=" + id,
});
}
So basically when they click the button that says "Update" it sends the ID of the button the page2.php and page2.php from there updates the changes the database using that info. However, the URL the user is on is:
http://website.com/index.php#
and the database has not updated for them and they have to see the annoying hash symbol in the URL. I have googled how to refresh the page in JS, and found things that either do not work or do work , but result in the variables not being sent to the PHP file. I just need it so that after it is sent to the php file, and preferably after the php file is finished, the index.php page refreshes and without the # at the end.
e.preventDefault() is the answer but if I may suggest:
Get rid of that inline function and add the event handler with jQuery.
$(function () {
$('.dbchange').click (function (e) {
e.preventDefault();
var id = this.id;
$.ajax({
type: "POST",
url: 'page2.php',
data: {NewID: id},
success: function(data) {
window.location.reload();
}
});
});
});
Remove # then replace with javascript:void(0):
<a href='javascript:void(0)' class='dbchange' onclick='dbchange(this)' id='".$ID'>Update</a>
JS:
function dbchange(obj) {
var id = $(obj).attr('id');
$.ajax({
type: "POST",
url: 'page2.php',
data: "NewID=" + id,
success: function() {
window.location.reload();
}
});
}
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)
}
//....
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));