plugin doesn’t retrieve data from database

Question

The issue is that your JavaScript code is trying to retrieve and populate the post title in the new window, which is on a different domain (khoreketab.com), while the AJAX request to get the post title is being made to your WordPress site. This leads to a cross-origin resource sharing (CORS) issue. Due to security reasons, browsers prevent AJAX requests from one domain to access resources from another domain.

To resolve this issue, you can populate the post title from your main site and pass it to the new window using URL parameters. Here’s how to do this:

Add the data-post-title attribute to the cog icon in your main site. You should be able to find the code that generates the cog icon within your WordPress theme or plugin:

<i id="optimize-icon" data-post-id="<?php echo $post_id; ?>" data-post-title="<?php echo esc_attr(get_the_title($post_id)); ?>" class="fa fa-cog"></i>

Make sure you replace the <?php echo $post_id; ?> and <?php echo esc_attr(get_the_title($post_id)); ?> with the actual PHP code that retrieves the post ID and title in your implementation.

Modify your JavaScript code in my-plugin.js to pass the post title as a URL parameter:

// When the cog icon is clicked
$(document).on('click', '#optimize-icon', function() {
    // Get the post ID and post title
    var post_id = $(this).data('post-id');
    var post_title = encodeURIComponent($(this).data('post-title'));

    // Open a new window with the form and post title as a URL parameter
    var new_window = window.open('https://khoreketab.com/seo-optimization?post_title=" + post_title, "new_window', 'noopener,width=400,height=400');
    
    // Rest of the code...
});

Modify the HTML code on your ‘https://khoreketab.com/seo-optimization’ page to include an ID for the form and change the input type of the submit button to “button”:

<form id="optimize-form">
    Post Title:
    <input type="text" id="post_title" name="post_title" value="">
    <div style="margin-top: 10px;">
        <label for="optimization_keyword">Optimization Keyword:</label>
        <input type="text" id="optimization_keyword" name="optimization_keyword" value="">
    </div>

    <div style="margin-top: 20px;">
        <input type="button" value="Submit">
    </div>
</form>

Modify your JavaScript code in my-plugin.js to populate the post title from the URL parameter when the new window loads:

new_window.onload = function() {
    // Get the post title from the URL parameter
    var urlParams = new URLSearchParams(new_window.location.search);
    var post_title = urlParams.get('post_title');
    
    // Populate the post title field
    new_window.document.getElementById('post_title').value = decodeURIComponent(post_title);

    // Rest of the code...
};

With these changes, the post title should be passed to the new window and populate the “Post Title” field. The CORS issue should no longer occur, as you are no longer making an AJAX request to fetch the post title.

Related Posts: