Day: December 20, 2021

JQuery retrieve page and display

JQuery retrieve page and display

Just completed the troubleshooting HTML + jQuery in Markdown, which is used in wordpress.

Script

<div><button id='related_posts_1853'>Display Learning Posts</button>

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $("#related_posts_1853").click(function(event) {
            el = $(document.getElementById( $(this).attr('id') ).parentElement);
            $.get("?p=1733", function(data, status) {
                el.html(/h2>References<\/h2>([\s\S]*?)<\/div>/.exec(data)[1]);
            });
        });
    });
}) (jQuery);
</script>
</div>

Note: Can not have empty line in script if it is embedded in Markdown lauguage, because there will be a <p> added.

Explanation

Following jQuery script is to do

  • Define a button in div

  • When button clicked, retrieve html page

  • Then filter information using regular expression

  • Then find out the div element using following script

  document.getElementById( $(this).attr('id') ).parentElement

Note: $(this).attr('id') is to get event element ID

<script>
$("button").click(function() {
    var t = $(this).attr('id');
    ...
});
</script>
  • Then replace the div html using retrieved info.

References

How to get the ID of the clicked button using JavaScript / jQuery ?
document.getElementById vs jQuery $()
Node.parentElement
Category: Selectors
.find()
How get body element from the html which one have as a string
How to get the html of a div from a different page with AJAX?

Learning – Fat-Free PHP Framework (Data Sets)

Learning - Fat-Free PHP Framework (Data Sets)

Data Sets

Do some RESTfull, serializable...

Display messages

  • Create Nav Sidebar Menu /messages
<li><a href="/messages">Messages on UI f3 template</a></li>
  • Update routes.ini

    Add following

GET /messages=MainController->displayMessages
  • Update MainController.php

    Add displayMessages in MainController class

class MainController extends Controller
{
    ...

    function displayMessages() {
        $messages = new Messages($this->db);

        $this->f3->set('messages', $messages-all());
        $this->f3->set('view', 'messages.htm');
        $template = new Template;
        echo $template->render('layout.htm');
    }
}
  • Create view messages.htm
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header">Messages UI from template</h1>

    <repeat group="{{ @messages }}" value="{{ @message }}">
        <p>{{ @message.id }} {{ @message.key }} {{ @message.message }}</p>
    </repeat>
</div>

Dipplay messages as JSON using AJAX call

  • Create Nav Sidebar Menu /api/messages
<li><a href="/api/messages">Messages JSON REST API</a></li>
  • Update routes.ini

    Add following

GET /api/messages=MainController->apiMessages
  • Update MainController.php

    Add displayMessages in MainController class

class MainController extends Controller
{
    ...

    function apiMessages() {
        $messages = new Messages($this->db);
        $data = $messages->all();

        $json = array();

        foreach ($data as $row)
            $items = array();

            foreach ($row as $key => $value) {
                $items[$key] = $value;
            }

            array_push($json, $items);
        }

        echo json_encode($json);
    }
}

Note: The echo json_encode($data); doesn't work, because $messages->all() from model has returned some non public attributes

*Note: As the output is the JSON data, no view need to be defined.

Display messsages using REST API

Create new display messages page utilizes the REST API.

  • Add menu in app/views/nav.htm
<li><a href="/messageajaxview">Message UI with AJAX</a></li>
  • Create route in routes.ini
GET /messageajaxview=MainController->displayMessagesAjaxView
  • Create function in app/controllers/MainController.php
function displayMessagesAjaxView() {
    $this->f3->set('view', 'messagesajax.htm');
    $template=new Template;
    echo $template->render('layout.htm');
}
  • Create template app/views/messageajx.htm
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header">Message UI with AJAX</h1>

    <button type="button" class="btn btn-default btn-lg">Fetch messages</button>

    <div id="msg-container"></div>
</div>
  • Create javascript file app/js/f3sample.js

  • Include jquery and javascript in app/views/header.htm

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app/js/f3sample.js"></script>

Then the f3sample.js should be shown the resources in browser development tools.

References

Displaying data sets and creating a Rest API with the Fat-Free PHP Framework

Learning – Fat-Free PHP Framework – Posts List

Learning - Fat-Free PHP Framework - Posts List

This is the summary list of my posts during learning.

References

Learning - Fat-Free PHP Framework
Learning - Fat-Free PHP Framework (Bootstrap & Authentication)
Learning - Fat-Free PHP Framework (Template Hierarchy)
Learning - Fat-Free PHP Framework (Data Sets)

JQuery $ is not a function

JQuery $ is not a function

When adding JQuery script in WordPress, the error occurred as $ is not a function.

Fix

Add a function wrapping the $ function as below.

<script type="text/javascript">
    (function($) {
        // You pass-in jQuery and then alias it with the $-sign
        // So your internal code doesn't change
    }) (jQuery);
</script>

References

jquery - is not a function error