ajax_import_interface.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>AJAX WordPress Import Test</title>
  5. <style>
  6. body { font-family: Arial, sans-serif; margin: 20px; }
  7. .container { max-width: 800px; margin: 0 auto; }
  8. .form-group { margin-bottom: 15px; }
  9. label { display: block; margin-bottom: 5px; font-weight: bold; }
  10. input, button { padding: 8px; margin-bottom: 10px; }
  11. button { background: #007cba; color: white; border: none; cursor: pointer; margin-right: 10px; }
  12. button:hover { background: #005a87; }
  13. .log { background: #f5f5f5; border: 1px solid #ddd; padding: 10px; margin-top: 20px; height: 300px; overflow-y: auto; font-family: monospace; font-size: 12px; }
  14. .success { color: green; }
  15. .error { color: red; }
  16. .info { color: blue; }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="container">
  21. <h1>AJAX WordPress Import Test</h1>
  22. <p>This bypasses form submission issues by using AJAX requests.</p>
  23. <div class="form-group">
  24. <label>Host:</label>
  25. <input type="text" id="wp_host" value="10.15.10.8">
  26. </div>
  27. <div class="form-group">
  28. <label>Database:</label>
  29. <input type="text" id="wp_database" value="valtsu_valtsu">
  30. </div>
  31. <div class="form-group">
  32. <label>Username:</label>
  33. <input type="text" id="wp_username" value="">
  34. </div>
  35. <div class="form-group">
  36. <label>Password:</label>
  37. <input type="password" id="wp_password" value="">
  38. </div>
  39. <div class="form-group">
  40. <button onclick="testConnection()">Test Connection</button>
  41. <button onclick="importCategories()">Import Categories</button>
  42. <button onclick="importUsers()">Import Users</button>
  43. <button onclick="importPosts()">Import Posts</button>
  44. <button onclick="importComments()">Import Comments</button>
  45. <button onclick="clearLog()">Clear Log</button>
  46. </div>
  47. <div id="log" class="log"></div>
  48. </div>
  49. <script>
  50. function log(message, type = 'info') {
  51. const logDiv = document.getElementById('log');
  52. const timestamp = new Date().toLocaleTimeString();
  53. const className = type === 'error' ? 'error' : type === 'success' ? 'success' : 'info';
  54. logDiv.innerHTML += `<div class="${className}">[${timestamp}] ${message}</div>`;
  55. logDiv.scrollTop = logDiv.scrollHeight;
  56. }
  57. function getConfig() {
  58. return {
  59. wp_host: document.getElementById('wp_host').value,
  60. wp_database: document.getElementById('wp_database').value,
  61. wp_username: document.getElementById('wp_username').value,
  62. wp_password: document.getElementById('wp_password').value
  63. };
  64. }
  65. function makeRequest(action) {
  66. const config = getConfig();
  67. const params = new URLSearchParams({...config, action});
  68. log(`Making request: ${action}`, 'info');
  69. return fetch(`ajax_import_test.php?${params}`)
  70. .then(response => {
  71. const contentType = response.headers.get('content-type');
  72. if (contentType && contentType.includes('application/json')) {
  73. return response.json().then(data => {
  74. if (data.success) {
  75. log(`✓ ${data.message} (${data.step})`, 'success');
  76. if (data.stats) {
  77. log(`Stats: ${JSON.stringify(data.stats)}`, 'info');
  78. }
  79. if (data.result) {
  80. log(`Result: ${JSON.stringify(data.result)}`, 'info');
  81. }
  82. if (data.logs) {
  83. log('--- Debug Logs ---', 'info');
  84. data.logs.forEach(logEntry => {
  85. const level = logEntry.level === 'error' ? 'error' : logEntry.level === 'success' ? 'success' : 'info';
  86. log(`[${logEntry.timestamp}] ${logEntry.message}`, level);
  87. });
  88. }
  89. } else {
  90. log(`✗ ${data.message} (${data.step})`, 'error');
  91. if (data.error) {
  92. log(`Error details: ${data.error.file}:${data.error.line}`, 'error');
  93. }
  94. }
  95. return data;
  96. });
  97. } else {
  98. // Handle HTML response (likely PHP error)
  99. return response.text().then(html => {
  100. log(`⚠ Server returned HTML instead of JSON:`, 'error');
  101. log(`First 500 chars: ${html.substring(0, 500)}`, 'error');
  102. throw new Error('Server returned HTML instead of JSON');
  103. });
  104. }
  105. })
  106. .catch(error => {
  107. log(`Network error: ${error.message}`, 'error');
  108. throw error;
  109. });
  110. }
  111. function testConnection() {
  112. makeRequest('test_connection');
  113. }
  114. function importCategories() {
  115. makeRequest('import_categories');
  116. }
  117. function importUsers() {
  118. makeRequest('import_users');
  119. }
  120. function importPosts() {
  121. makeRequest('import_posts');
  122. }
  123. function importComments() {
  124. makeRequest('import_comments');
  125. }
  126. function clearLog() {
  127. document.getElementById('log').innerHTML = '';
  128. }
  129. // Auto-focus username field
  130. document.addEventListener('DOMContentLoaded', function() {
  131. document.getElementById('wp_username').focus();
  132. });
  133. </script>
  134. </body>
  135. </html>