Develop Reference

How to trigger javascript pop-up box by if-condition within the HTML code?

I created an html site where the user can input a code in a text input and then this code is being inserted in a MYSQL database if certain conditions are met. In case of a successfull database entry I would like to notify the user with a little pop up message, which displays something like "Success" and also stating some data from the table row, the code was inserted into.
I found a nice looking pop up message on the following page, which I would like to use: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/.
However, in the implementation from the page, the pop-up is triggered by the click of a button:
document.getElementById("open-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.add("active");
});
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
I would like to execute the pop-up based on an if-condition, in which I check whether an php variable is already set:
<?php
if (isset($group)) {
?> ......HTML code.....
So, can anybody tell me how to successfully remove that "onClick" function of the pop-up?
Thanks in advance!

I understand that you reload the page after said data was inserted into database?
If so, what you can do to show pop-up initially, is to simply add class active to your popup (element with class popup, like that:
<div class="popup center active">
...
</div>
BUT
in order to be able to close the popup, you still will have to attach the second part of the provided script (you can simply insert it within script tags inside php if statement (at the end of HTML body element), like:
<script>
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>
note: It doesn't change the fact that, as said above - it would be better to handle this with XHR (e.g. via ajax)

Posting to Javascript from php without form action

I'm working on a child theme that uses ultimate member and redefines some of it's functions. Previously it redefined the follow button and sent the info to a payment form and then the form sent the info to a javascript file. The form is no longer used so we are trying to send the info directly to a javascript file and I haven't worked with php in awhile so I'm a little lost. The only options I find are form action and method post which aren't working,
The function is
<div class="um-followers-btn">
<?php
if (in_array("um_customer", $res->roles)) {
$nav_link = UM ()->permalinks()->get_current_url(get_option('permalink_structure'));
$nav_link = remove_query_arg('um_action', $nav_link);
$nav_link = remove_query_arg('subnav', $nav_link);
$nav_link = add_query_arg('profiletab', $id, $nav_link);
And previously the trigger was
echo '<a href="" id="cm_follow_button" data-toggle="modal" data- target="#payment_modal" class="um-button" >Follow</a>';
Obviously this doesn't work so any help would be appreciated.
Apologies, the echo puts forth a "follow" button, what the button appears but what I"m trying to accomplish is for the values, such as user1 and user2 to go to another php file which inserts them into the database and changes the button to request sent this is allhandled in the other php file by the previous team, I'm having trouble sending it there, the previous method was going to a javascript file from the last line above, this line produced the button which when pressed called forth a php form that took payment info, and then sent that to a js form which in turn took theinfo fand verified the payment format, changed the "follow" to "Follow request sent" and sent the rest to a php form that as I said, put the ifo in the mysql database and gave the 2nd user the option of accepting the follow request. Ultimate Member doesn't offer this option which is why it was modified in a child theme like this. We aren't processing payment like this we just want the button to send the info to the php form and I'm having that issue with doing it, via this button. I hope that helps

Insert PHP functions into Javascript

I got really confused when trying to get PHP functions into javascript.
In my scenario, I just extract some lines from XML file in PHP and convert it into a table, and the presentation of the whole table is in the function getNews(). Into the function are echo sentences like
function getNews(){
$xmlResponse = new SimpleXMLElement('xml.addr',0,TRUE);
foreach($xmlResponse -> children()as $contents){
echo "<table id ='news'>";
echo "<a href='".$links."'>".$contents -> item[$num] -> title."</a>";
HTML tags are involved to build a news table.
Then I was asked to implement a button, when clicking on the button, the button image changes and the table should be shown below. Obviously the onclick function should be written using javascript, when click on it, I need to call the anotherButton() function and show the news table
echo "<script>function anotherButton(){
document.getElementById('news').innerHTML='<div class='newStyle'
onclick='anotherButton1()'>click to hide stock news
<img src='http://image-addr'></div>';
}</script>";
All these things were done in PHP and I need to insert function getNews()
somewhere in the above echo, so how I can put the function in it ?
Thanks in advance.

What you need is the following:
Javascript sends the data to server using AJAX in the client's browser.
PHP decodes the request, processes it then responds with the information requested.
Javascript receives the response and displays it accordingly.
Using Asynchronous Javascript And XML (or AJAX for short); you can essentially fetch data from the server dynamically without the client performing a browser refresh.
Here is a video by Codecourse which will get you started in the right direction.

create onClick content after the click in the html

I am writing a django template and I am working woth lot of data. I have all the data in the django object with me in template. I want to create tables on button click so i have used
$(document).ready(function()
{
$(document).on("click", ".open-infoDialog", function ({{users}}) {});
});
I am creating tables inside the above function
But whatever is there in the function is already created before the click of the button. Is there a way i can create the code in the html after the button click.
The problem is happening as there is large amount of data it takes ages to see the page.

The answer is no, not within the template. Your template variables are filled in on the server. By the time the browser gets it, everything is filled in.
If you want to get hold of some data only after the user clicks, you will need to make a special view which returns the extra data you want (either as json or however you like). Then in your click handler you can do an ajax request to that view.
Think of this problem in terms of where the data is located and when it travels.
1) You would like to first load a page into the users browser, which does not contain any of this large data.. it only contains a button for the user to press to get the large data. The way this happens is, the browser connects to the server/url, django looks at urls.py and decides what view to execute. The view then, using the template, generates the html which diplays the button.. which travels back to the browser and is displayed.
That is the end of the request and your first template and first view have done their job and exited.
2) Then, only if the user presses a button, you want to load the data up into the existing page. This is ANOTHER REQUEST. When the button is pressed, the click handler must execute code which makes another connection to the server, a different url, different view, different template.. since you are returning different data. Then in your javascript you take this new html and load it into the part of the existing page that you would like...
It's classic AJAX, it is two different requests but instead of loading a whole new page you're only loading part of it. Since you are not clear on how this works just yet the easiest way to do this is to just write two totally separate Django views each with their own template, own url etc. Then you can test each one separately. One returns the page with the button and the javascript but no data. The other returns just the part of the page that would normally contain the data. Then once you have got that working, write the jQuery/javascript code which loads the data.
For example, in your first template:
<script>
$(document).ready(function()
{
$(document).on("click", "#loadusers", function () {
$( "#user_select" ).load( "/myapp/loadusers/" );
});
});
</script>
<form>
<input type="button" id="loadusers" value="Load User Choices">
<select id="user_select" name="user"></select>
</form>
In your loadusers template:
{% foreach user in users %}
<option value="{{user.pk}}">{{user}}</option>
{% endfor %}
This would result in the first view rendering a page which contains an empty select. If you then click the button it will load the options from the second view.

Try the following code:
$(document).ready(function()
{
var template = {{users}}; // Storing the template in a variable
$(document).on("click", ".open-infoDialog",
function (l_template) {
return function() {
// This function will be called on click.
// Do the stuff here. using l_template
};
}(template)
});
The template will contain your data. Here, We are returning a function instead of value.
That returned function will be called on click callback.
You can use l_template in the returned function.

Javascript, Ajax and form submission/response

I'm hoping there is a simple solution to this, or else its possible AJAX time!
I WAS using ClickBank. I had a simple button on my page. That sent the form data to a script, I processed the data, and then added a redirect at end of script to jump to the "pay" link. Nice n' easy
But now I'm switching to "Click2Sell" ... and they have a direct href to their site.
Now I COULD use javascript to read the form data, place it into their "cp_" prefix, and create a super long (about 400 chars) query string and send that to their server, then re-read the data at the IPN stage ...
?country=UK&area=essex&desc=This is the data entered by the user 'whatever'
(but that leads to a little fact that certain parts might need to be escaped(?) such as the spaces and the " ' " or whatever other symbol they enter)
So I devised this method:
<javascript>
function send_data(){
document.user.submit();
return true;
}
</javascript>
<div name="noshowdiv"><object name="noshow"></object></div>
<form method="post" target="noshow" name="user">
<input type="text" name="country">
<input type="text" name="area">
<textarea name="desc"></textarea>
</form>
<img src="xxx" onclick="return send_data();">
In a nutshell, when the button is clicked, it jumps to the function, and submits the form data to my script, and then returns to the hyperlink to submit the second form via the hyperlink.
Two problems: Firstly, the data returned by my script is opening in a new tab rather than the <div>, (I suspect 'cos the submit option loses track of the sending window) and also, I need to get a response from my script which I can then append to the href link.
For example, if the form records the user's data on line 5 on my server, the script will return "id=5" I would then make the hyperlink "click2sell.asp?cp_id=5"
As I've said, I suspect this is a job for Ajax and a HttpRequest ... which is a whole new area to me. Any advice?

For the first problem, it opens a new tab because you have target="no-show" on your form.
For the second problem, if you want to use Ajax, I recommend you use jQuery, it will simplify a lot of the code.
But the best option is probably that you completely remove the direct link to click2sell, and just add a submit button to your form. Post the form to your site, which will store whatever info it needs, assigns an ID, and builds the click2sell URL with the ID in one of the parameters, and redirect to it.
Now how you would do that depends on what server-side language you use.

(I think) I have managed to find a work around, which was using the first option to reconstruct the href link. I couldn't iterate through the form as there are values that don't need to be forwarded. First I get the value, load it into a variable, then use an encode function I discovered online, and then reassign to the form ...
var cp_cc=document.getElementById('cc').value;
var cp_cs=document.getElementById('cs').value; // plus 10 other values
var str='&cp_cc='+encodeURIComponent(cc)+'&cp_cs='+encodeURIComponent(cs)+ // etc
var send_str=document.getElementById('c2s_bn_lnk_36288').href;
document.getElementById('c2s_bn_lnk_36288').href=send_str+str;
The "no-show" was a slip up in my typing! Alas, the answer given above wouldn't work as the Click2sell button also includes two calls to external JS files - and they give you no idea what they do, but is something to do with initializing the button, (it passes the "36288" to the script to do ???). And whilst using "Location: ..\n\n" on my server would redirect to their site, it wouldn't action whatever those external files do. (OK, so I didn't give the full facts, but I didn't want to increase the post size with data I felt didn't relate to problem)
** Now got to amend the listening scripts such that rather than set the ID number up front then jump to C2S, it now waits for C2S to send the data back to me and then sets up the database!!