I am trying to insert WordPress shortcode into JS but haven't managed so far. I found some jQuery code that I needed to translate into vanilla JS and I am pretty sure I did not do the right thing since it's not working. I do not fully understand the code I came across, which means I need some help understanding where I've gone wrong and why my shortcode isn't showing on my site. Maybe the PHP code is not correctly linked to the JS file, I'm not too sure.
The goal is to have the shortcode (a WP form in this case) show in the modal when it's clicked on. Any help is greatly appreciated!
Here is the jQuery code (AJAX request):
$.ajax({
url: `<?php echo admin_url('admin-ajax.php'); ?>`,
type: "GET",
data: {
action: "runThisPhpFunction",
},
success: function (data) {
$("#trigger_target").html(data);
},
});
And here is my JS code for the modal, into which I am trying to place the shortcode:
function newsletterModal() {
const ajaxurl = `<?php echo admin_url('admin-ajax.php'); ?>`;
const btn = document.querySelector("#menu-item-2745");
btn.setAttribute("id", "trigger_my_shortcode");
const modal = document.createElement("div");
modal.setAttribute("id", "trigger_target");
modal.classList.add("modal");
modal.innerHTML = `<div class="modal-content">
<span class="close">×</span>
<h2>Sign up to our newsletter</h2>
<h5>And get hold of your 10% discount!</h5>
<p>insert [wpforms id="1703"] here</p>
</div>`;
btn.onclick = function (e) {
e.preventDefault();
modal.style.display = "block";
document
.querySelector("#trigger_my_shortcode")
.addEventListener("click", (e) => {
e.preventDefault();
fetch(ajaxurl, {
type: "GET",
data: {
action: "runThisPhpFunction",
},
success: function (data) {
document.querySelector("#trigger_target").html(data);
},
});
});
};
modal.querySelector(".close").onclick = function () {
modal.style.display = "none";
};
window.onclick = function (e) {
if (e.target == modal) {
modal.style.display = "none";
}
document.body.appendChild(modal);
};
}
And the functions.php code:
function runThisPhpFunction() {
if ( isset($_REQUEST) ) {
echo do_shortcode( '[wpforms id="1703"]' );
}
die();
}
add_action( 'wp_ajax_runThisPhpFunction', 'runThisPhpFunction' );
add_action( 'wp_ajax_nopriv_runThisPhpFunction', 'runThisPhpFunction' );
There is quite a lot going on with your code, so the answer won't be short.
It's generally a good practice to split your code up into smaller functions which all have their specific purpose. So I've taken the liberty to rewrite some functions so that they will help you in getting where you need to go.
The code below works as followed: The buildModal function builds all the HTML for your modal and can take a form as an argument. That form should be text because it needs to be interpolated (combined) with your other elements in the same string.
The buildModal function will be called from the getFormAndBuildModal function. The getFormAndBuildModal function uses fetch to send a request to the server and interprets the response as text. This text is your form, which will be passed to the buildModal to build the modal with the form in it.
The button with the #menu-item-2745 will be the trigger to send the request and build the form.
Working this way means that every time that you would click on your button it would call the server, build a new modal and show it on the page. Then when closing the modal, it removes the modal from the page.
I've tried to explain as much as possible of what's happening in the code and what each step is doing. If some things are still unclear, please let me know and I'll try to clear it up.
function buildModal(form) {
const modal = document.createElement("div");
modal.id = "trigger_target"
modal.classList.add("modal");
/**
* Create close button here so we can attach the
* event listener without having to select it later.
*/
const modalClose = document.createElement("span");
modalClose.classList.add("close");
modalClose.addEventListener("click", function() {
/**
* Remove the modal completely from the document.
* This isn't mandatory and you can change it if you'd like.
*/
modal.remove();
});
const modalContent = document.createElement("div");
modalContent.classList.add("modal-content");
/**
* The form will be a string of HTML that gets injected
* into another string of HTML here below. The innerHTML setter
* will then parse the entire string, with form, to HTML.
*/
modalContent.innerHTML = `
<div class="modal-content">
<h2>Sign up to our newsletter</h2>
<h5>And get hold of your 10% discount!</h5>
<p>${form}</p>
</div>`;
/**
* First append the close button, then the content.
*/
modal.append(modalClose, modalContent);
/**
* Return the HTML modal element.
*/
return modal;
}
Here I've added how to use PHP in JavaScript and a way to tackle the issue with selecting the button. There are two solutions to this problem, one is here at the second comment and the other solution is in the PHP snippet after this one.
/**
* Check the PHP snippet at the bottom how this gets here.
* This is the result of the array turned into JSON and then
* placed into the document with wp_add_inline_script.
*
* Sidenote: __wp__ looks ugly, but it will make sure that if
* a browser might get updated and a new property is added to the
* window object, it will never overwrite or break anything because
* the name is so unique.
*/
const ajaxurl = __wp__.ajax;
/**
* Select the button and listen for the click event.
* When clicked, fire the getFormAndBuildModal function.
*
* Update: with selecting elements it is paramount that the element is
* above the <script> tag in the document.
* Otherwise the element would not yet exist and the result would come up empty.
* Another way is to wait for the document to give a signal when every element has been rendered with the DOMContentLoaded event.
*/
// document.addEventListener('DOMContentLoaded', function(event) {
// const button = document.querySelector("#menu-item-2745");
// button.addEventListener("click", getFormAndBuildModal);
// });
const button = document.querySelector("#menu-item-2745");
button.addEventListener("click", function(event) {
event.preventDefault();
getFormAndBuildModal();
});
function getFormAndBuildModal() {
/**
* Fetch uses the GET method by default.
* All you need to do is to add the action to the URL
* so that WP knows what action to call on the server.
*/
fetch(`${ajaxurl}?action=runThisPhpFunction`)
/**
* Fetch can take while to load, so it uses a promise.
* With .then() we say what happens after fetch is finished.
* Fetch gives us a response object as a result, which we need to inspect.
*/
.then(response => {
/**
* If the response has gone wrong, show an error.
*/
if (!response.ok) {
throw new Error("runThisPhpFunction request has failed");
}
/**
* Otherwise we use the content that the response has send us.
* Currently the "body" (your form) of the response is just bits and bytes.
* We can tell the response how we want to use the response.
* With the .text() method we turn the raw data into a string.
* That string can later be used as HTML. :)
*/
return response.text();
})
/**
* response.text() also returns a promise, just like fetch. So to go to the next step
* we use another .then() function. In here we have our form in a string.
* Now we can build the modal and pass the form as an argument. The modal
* will be build and the form turned into HTML and put in the correct position.
* When the buildModal function is done it returns the result.
* Now append it to the body and it's done.
*/
.then(form => {
const modal = buildModal(form);
document.body.append(modal);
});
}
Here I've added a couple more additions to enqueueing the script and how to turn PHP into JavaScript the right way. ;)
function enqueue_my_custom_script() {
/**
* Instead of printing PHP variables directly inside JavaScript,
* you could use this method to let PHP do that for you.
* The array here below we be turned into a JSON string,
* which will later be turned into a JavaScript object that you
* can use in your main script.
*/
$wp_js_data = json_encode(
array(
'ajax' => admin_url( 'admin-ajax.php' ),
)
);
/**
* The last parameter of wp_register_script (there are 5) will
* determine if the script will be placed in the <head> tag when
* the value is false, or before the end of the </body> tag when
* the value is true. The latter will make sure that your JS executes
* AFTER all other HTML elements have been rendered. With this you don't
* have to listen for the DOMContentLoaded event in JavaScript.
*
* Use get_stylesheet_directory_uri() to get the path to your child
* theme directory instead of hard linking to your sheet. This will
* output the URL to the directory of your style.css file of your theme.
*/
wp_register_script( "scriptjs", get_stylesheet_directory_uri() . "/script.js", array(), null, true );
/**
* Here we create a global variable on the window object. This makes
* the data is available in every JavaScript file. Here we insert the JSON string
* that will be turned into a usable JS object.
*
* Be sure to output this script BEFORE the "scriptjs" file.
*/
wp_add_inline_script( "scriptjs", "window.__wp__ = {$wp_js_data}", "before" );
/**
* This used to be the first line. wp_register_script only registers
* the script but does not output it. This enables you to do something
* like wp_add_inline_script before outputting the script.
* wp_enqueue_script makes sure that the registered script will be
* placed in the document.
*/
wp_enqueue_script( "scriptjs" );
}
add_action( "wp_enqueue_scripts", "enqueue_my_custom_script" );
Related
I've run into a little Problem with my TYPO3 Extension I created with the Extension Builder.
The Extension generates a Calendar and shows a list of upcoming events.
Calendar with listed events
code list.html
<div id="dncalendar-container"></div>
<f:flashMessages />
<div class="tx_tbpartnereventcal">
<f:for each="{events}" as="event">
<f:link.action class="event-cont" action="show" controller="Events" arguments="{events : event}" target="popup">
<span class="event-title">{event.title}</span> <span class="event-date"><f:format.date format="Y-m-d">{event.date}</f:format.date></span><br>
</f:link.action>
</f:for>
</div>
<!--<f:debug>{_all}</f:debug>-->
<f:format.raw>{scriptDates}</f:format.raw>
<script type="text/javascript">
//script to generate calendar
</script>
the list is created via the standard listAction in the controller and the elements can be clicked to show detailed information about each event.
However, when clicking on a linked Listitem, it reloads the pluginarea with the deatailed information as a new page. I would prefer it if the div.tx_tbpartnereventcal would just change the content of itself to the detailed information.
I have no idea however, how to get that working with ajax in TYPO3 or if there is another way.
Code controller action list and show:
/**
* action list
*
* #return void
*/
public function listAction()
{
$events = $this->eventsRepository->findAll();
$this->view->assign('events', $events);
/* get all events and turn into json for js calendar */
$allNotes ='';
/** #var Event $event */
foreach ($events as $event) {
$tempArr=array("date"=>$event->getDate()->format("Y-m-d"), "note" =>$event->getTitle(), "description" => $event->getLink(), "optional"=> "stuff");
$allNotes .= json_encode($tempArr).",";
}
/* create script to use data in js in .html */
$script = "
<script>
var jsondate = [".$allNotes."];
</script>
";
/* send js script to list.html to insert into js calendar */
$this->view->assign('scriptDates', $script);
}
/**
* action show
*
* #param \TBPartnerNet\TbPartnerTerminkalender\Domain\Model\Events $events
* #return void
*/
public function showAction(\TBPartnerNet\TbPartnerTerminkalender\Domain\Model\Events $events)
{
$this->view->assign('events', $events);
}
Am thankfull for any help!
There are basically 3 ways to achieve client-side dynamic on that element:
1) Introduce a kind of web service that produces the data to show (as JSON):
requires an AJAX endpoint in TYPO3 and client-side (JavaScript) building of the template (plain JavaScript or simple [e.g. mustache] or other [e.g. angular, vue] template-libraries).
2) Introduce a kind of web service that produces the HTML of the plugin:
requires an AJAX endpoint in TYPO3 and some JavaScript
3) Fetch the whole page (HTML) by AJAX and only replace your calendar part in the DOM:
requires no changes to TYPO3 but a little JavaScript
code example:
# register click handler for the date links on parent element (which will
# not change, thus you do not have to reregister the events after replacing the links)
$('.tx_tbpartnereventcal').on(
'click',
'.event-cont',
function(ev) {
ev.preventDefault()
# https://api.jquery.com/jQuery.ajax/
$.ajax(
[
url: ev.target.href
]
).done(
function(data) {
var $newPage = $(data),
newPluginHtml = $newPage.find(.tx_tbpartnereventcal).html()
$('.tx_tbpartnereventcal').html(newPluginHtml)
# you notice a JavaScript to generate the calendar -
# maybe you could call it here
}
)
}
)
3) is easiest to implement from your current point but of course is not the most performant way.
For 1) and 2) you need an AJAX endpoint. For v8 and below this is unelegant: Either the so-called pageType-approach or a helper extension like helhum/typoscript-rendering or the so-called eID-approach (not recommended!). For v9 we have middlewares which makes providing web services a lot cleaner.
Here is my problem,
I have a page called page1 (I have a button in this page to access another page called page2).
I want to change the content of a specific selector in page2 by a click event on the button of page1.
Here is my code for page 1 in pug
form#abandonForm(name='btn' action='page2')
button#abandonBtn.button Abandonner
Here is my code for page2 in pug
section#termineExam
and here is my .js file
$( document ).ready(function() {
var $abandonBtn = $('#abandonBtn');
$abandonBtn.click(function(){
$.get('page2', null, function(data){
var $data = $(data);
console.log(data);
console.log($data.find('#termineExam').html());
$data.find('#termineExam').text("section changed");
console.log($data.find('#termineExam').html()); // print the changes
console.log(data); // print the same data without changes on the section
})
});
});
I don't understand why changes are applied on the DOM but not on the page2 itself.
Thank you for helping and sorry for my English!
You seem to misunderstand how jQuery.get() works.
From the docs:
jQuery.get( url [, data ] [, success ] [, dataType ] )
Returns: jqXHR
Description: Load data from the server using a HTTP GET request.
Basically, you are getting the content from 'page2' as a string and storing it in a variable named data. This is a one way street. When you call $data.find('#termineExam').text("section changed"); you are modifying the local variable not the actual page2 file
When you navigate to page2, you are requesting a brand new copy of the page2 file without any of the modifications that you applied to that string over on page1.
If you want to actually modify the content of page2, you'll need some sort of server side script (like php) that accepts new data from page1 and updates the page2 file.
Alternatively, if you just want to send some data to page 2 and have that data appear when that page loads, there are many ways you could do that.
One option would be to use localstorage:
Make a file called storage.js with the below content and include this file in both page1 and page2
/**
* Feature detect + local reference for simple use of local storage
* if (storage) {
* storage.setItem('key', 'value');
* storage.getItem('key');
* }
*
*/
var storage;
var fail;
var uid;
try {
uid = new Date;
(storage = window.localStorage).setItem(uid, uid);
fail = storage.getItem(uid) != uid;
storage.removeItem(uid);
fail && (storage = false);
} catch (exception) {}
/* end Feature detect + local reference */
In page1 do this:
$(document).ready(function() {
var $abandonBtn = $('#abandonBtn');
$abandonBtn.click(function() {
if(storage){
storage.setItem('termineExam', 'section changed');
}
});
});
Then, in page2 do this:
$(document).ready(function() {
if(storage){
var text = storage.getItem('termineExam');
if(text) $('#termineExam').text(text);
}
});
Some actions on my zend framework 2 web application open via a dialog. I use this method when processing an action that is called with ajax:
/**
* Display content only on ajax call.
* #param \Zend\Mvc\MvcEvent $e
*/
public function onDispatch(\Zend\Mvc\MvcEvent $e)
{
$app = $e->getParam('application');
$layout = $app->getMvcEvent()->getViewModel();
if($app->getRequest()->isXmlHttpRequest()) {
$controller = $e->getTarget();
$controller->layout('application/ajax/ajax');
$layout->setTerminal(true);
}
}
The problem is that the datetime pickers of jquery do not seem to work. Because this HTML gets added dynamically to the page.
I think a solution might be to modify this onDispatch method so it also re-includes some of the JS-files. Or is there a better way? I just thought that adding the JS-files hard-coded into my ajax.phtml file would also work.
But again, i would like to know if there is a better approach exists, like reloading the js on the page or something.
Yeah, one way is to add the scripts to your ajax.phtml.
Something I did a while ago is to send the required scripts as a response header:
$requiredScripts = array(
'/some/js/file.js',
'/another/js/file.js'
);
$this->getResponse()->getHeaders()
->addHeaderLine('x-scripts: ' . json_encode($requiredScripts));
Then in your js:
// globally listen for the ajax-requests
$(document).ajaxSuccess(function(res, status, xhr) {
var requiredScripts = xhr.getResponseHeader("x-scripts");
if (requiredScripts) {
jQuery.each(requiredScripts, function(index, scriptSrc) {
jQuery.getScript(scriptSrc);
});
}
});
I have tried to use different methods :
add in body innerHtml script part
create script element with type "x-tmpl"
But that did not work. Can you help me, please ?
Thank you.
I encountered a similar issue when trying to dynamically load Handlebars templates, so instead of trying to insert <script> elements into the DOM, I simply stored compiled templates into a global Javascript object:
var TEMPLATES = {};
/**
* Gets Handlebars template, either from JS if already loaded, or via AJAX request
* #param name Name of template
* #param data JSON data for use in template
* #returns Handlebars template
*/
function get_template(name,data) {
if(typeof TEMPLATES[name] != 'undefined') {
return TEMPLATES[name];
} else {
$.get(
TEMPLATE_ROOT + name + '.hb',
function(template) {
TEMPLATES[name] = Handlebars.compile(template);
render_template(name,data);
}
);
return null;
}
}
Notice my call to render_template(name,data) following the successful loading of the template. That simply calls my function to again attempt to render the template, which will now be in memory:
/**
* Render JSON using Handlebars template
* #param name Name of Handlebars template
* #param data JSON data to render
*/
function render_template(name,data){
var template = get_template(name,data);
if(template !== null) {
$('#main').html(template(data.transforms[1].data));
}
}
I am making a lot of assumptions about what you're trying to do, so hopefully this will be helpful.
i am developing a website in dotnet.
//function to close SearchSchool.aspx
function CloseSchoolSearch()
{
//storing values
window.close();
//call function in code behind
}
This is a javascript function in an external .js file ,using this function i am storing some values in some hidden controls in an aspx page and closing pop window ,after that i want to execute a function in code behind.and remind one thing,i can't include this function .aspx page contaning that method i want to call.Can anyone guide me how to do this
As i understand the question, you are talking about 2 very different things.
the .ASPX page is rendered on the server and the javascript code is rendered at the client side.
for you to call a function from the aspx page from JS means that you need to make a call to the server to render your page is some other manner with a parameter you mentioned in your call.
only then will the server re-render the page (can be ajax as well) and invoke these methods.
other then that, the server side code is not being sent to the client side.
On the client side:
you can use any framework or implement your own. i'll use jquery for simplicity
/* attach a submit handler to the form */
$("#form_name").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
url ="<server url>";
var $inputs = $('#form_name :input');
var dataString="";
$inputs.each(function() {
if (this.type != "submit" && this.type != "button")
dataString += (this.name +"="+ $(this).val() +"&").trim();
});
/*Remove the & at the end of the string*/
dataString = dataString.slice(0, -1);
/* Send the data using post and put the results in a div */
$.post( url, dataString,
function( data ) {
}
);
the serialize function will work as well just add its output instead of the dataString.
I understand you want to call a javascript function defined inside the HTML page using <script></script> from an externally loaded .js file.
Just make sure the internal javascript function is available when your external JS is loaded.
If you want to call a function localFoo() defined inside the HTML code, then do this:
// Check for the function availability
if(typeof localFoo != undefined) {
localFoo(arg);
}