We Keep Coding

Do not load div until after full page load

I have a smart tag inside a hidden field in my WP Forms (written with php - see below) that collects user data, however this significantly slows down the webpage. The div ID is: wpforms-10395-field_107. The url is: https://ellasbubbles.com/contact-us/
My question is, how can I prevent this div from loading until after the page has fully loaded. This way it can load in the background while the user is populating their contact form details
Note: A better solution might be to keep this div empty, and simply populate it with the shortcode on page load?
PHP (currently in functions.php) - Grabs users location details and stores them in a smart tag:
add_shortcode('geo', 'shortcode');
function wpf_dev_register_smarttag( $tags ) {
// Key is the tag, item is the tag name.
$tags['geo'] = 'geo';
return $tags;
}
add_filter( 'wpforms_smart_tags', 'wpf_dev_register_smarttag' );
function wpf_dev_process_smarttag( $content, $tag ) {
$city = do_shortcode('[userip_location type=city]');
$country = do_shortcode('[userip_location type=country]');
$region = do_shortcode('[userip_location type=region]');
$flow = do_shortcode('[track-user-flow]');
// Only run if it is our desired tag.
if ( 'geo' === $tag ) {
$userinfo = '<b>City:</b> ' . $city . "\n" . '<b>Region:</b> ' . $region . "\n" . '<b>Country:</b> ' . $country . "\n" . "\n" . '<b>User Flow:</b> ' . $flow;
// Replace the tag with our link.
$content = str_replace( '{geo}', $userinfo, $content );
}
return $content;
}
add_filter( 'wpforms_smart_tag_process', 'wpf_dev_process_smarttag', 10, 2 );
It looks like I can use:
$(window).load(function(){
$.get("<path to php file>", function(data){
Replace Placeholder code here? (maybe)
});
})

extract substring inside text from input and store the text inside folder/directory

I have a text area that does this when the image button is pressed:
When the user "adds message" I need to find the strings in the text such that I can extract the url. For example <img src="image.png"> I want to grab the image.png so that I can process it and store in a folder system.
1. Regex to find location
I will need to use some javascript here. I'll need to start at the first quote and end at the second quote. I'm struggling to find a way to do this without mistaking other quotes used in the text.
What I have tried:
function getIndicesOf(text) {
var StartIndex = text.search("src=\"") + 5;
var EndIndex = // not sure, maybe I can search for image extensions (png,jpeg) etc.
var imageAddress = text.substring(StartIndex,EndIndex);
return imageAddress;
}
2. Storing into folder
I understand I believe, how to do this process when using an <input type=file>. However, in php can I replace the $_FILE['image']['name'] with $imageAddress
So instead of
<?php
$name = (isset($_POST['project_name']) ) ? $_POST['project_name'] : '';
$fixedPath = "projects_data/";
if (file_exists("uploads/" . $_FILES["project_image"]["name"]))
{
echo $_FILES["project_image"]["name"] . " already exists. ";
}
else
{
move_uploaded_file($_FILES["project_image"]["name"],
"$fixedPath/$name/". $_FILES["project_image"]["name"]);
echo "Stored in: " . "$fixedPath/$name/" . $_FILES["project_image"]["name"];
}
?>
can I replace the $_FILES['project_image']['name'] and do this:
<?php
$name = $imageAddress;
$fixedPath = "projects_data/";
if (file_exists("uploads/" . $imageAddress))
{
echo $imageAddress . " already exists. ";
}
else
{
move_uploaded_file($imageAddress,
"$fixedPath/$name/". $imageAddress);
echo "Stored in: " . "$fixedPath/$name/" . $imageAddress;
}
?>
I hope I have provided enough information to help yo understand what I am trying to achieve. If I haven't then please let me know and I will edit it.
Thanks.

Running php from user onclick

I'm not sure how well i'll be able to explain this, but here goes.
I have a website for attractions. Let's say that one of my categories is Historical villages.
When the user opens the Historical villages page he gets a list of villages displayed from the database. The way I display them is: Name plus a picture of the attraction.
What I want to do is unable the user to click on of the villages (by making the name and picture a clickable link) and the user to be redirected to a page that will run a php script that will display more information from the database about the selected village. That way I will only have one page for all attractions that will display different information every time a user selects something different, instead of hardcoding all the pages.
This is my code displaying the lits of villages:
$sql = "SELECT `Name`, `Location`, `Description`, `Airport`, `imglink`, `pagelink` "
. "FROM `attractions` "
. "WHERE `Category`='HistV'";
$result = mysql_query($sql, $link);
if (!$result) {
echo "DB Error, could not query the database\n";
echo 'MySQL Error: ' . mysql_error();
exit;
}
while ($row = mysql_fetch_assoc($result)) {
echo $row['Name'];
echo "<img src='" . $row['imglink'] . "'>";
}
Do any of you have any suggestions on how to make this output a link and the make it run the PHP to show the users selection?

Your while condition changed to like this,
while ($row = mysql_fetch_assoc($result)) {
/* For example ,
$row['pagelink'] must contains the pagelink as belowed here
/viewVillage.php?village_id=1
/viewVillage.php?village_id=2 and so on. */
echo "<a href='" . $row['pagelink'] . "'>"
. $row['Name'] .
. "<img src='" . $row['imglink'] . "'>
</a>";
}
This will generate your list of villages like this,
<a href="/viewVillage.php?village_id=1">
Village name 1
Village Image 1
</a>
<a href="/viewVillage.php?village_id=2">
Village name 2
Village Image 2
</a>
<a href="/viewVillage.php?village_id=3">
Village name 3
Village Image 3
</a>
.....
When you click on any of the link, it will redirected to viewVillage.php page. Now you can get the particular village using $_GET['village_id']
viewVillage.php
if(isset($_GET['village_id']]) && $_SERVER['REQUEST_METHOD'] == 'GET' ) {
$villageId = $_GET['village_id'];
// Then do your stuff over here
}

On your current page
while ($row = mysql_fetch_assoc($result)) {
/* For example ,
$row['pagelink'] should be a village id */
echo "<a href='/attractions.php?village=" . $row['pagelink'] . "'>"
. $row['Name'] .
. "<img src='" . $row['imglink'] . "'>
</a>";
}
Now it would print something like
Vilage Name <img src="urltoimage">
When you click on this link you will be sent to a file called "attractions.php"
Create this file in the same directory and it should have the following php in it
<?php
$villageId = $_GET['village']; //this gets the id of the village from the url and stores
//it in a variable
//now that you have the id of the village, perform your sql lookup here
//of course you will have to fill this is, as I don't know your actual table fields and names
$sql = "SELECT * FROM Attractions WHERE villageID = `$villageID`";
//now perform the query, loop through and print out your results
?>
Does this make sense?

Display final results on the same page from a dynamic drop down menu

I have a multiple drop down that goes from Country/State/city/destination.
What I want this plugin to do next, is once the destination menu is selected, the page will automatically display some general information about that destination on the same page without reloading.
The general info is in the same table as my destination drop down menu is, but under different columns.
So how can I get this information to display its self possibly in a text box or something similar only when the final distention menu is selected.
Here are some parts of my code thus far, I don't believe posting everything is necessary and might be a little confusing. PS-I am a beginner.
This is an example of my javascript which calls from my ajax.php file for the array to populate the drop down menu...
jQuery(".wrap").on('change', '#city', function() {
var querystr2 = 'cityid=' +jQuery('#city :selected').val();
jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr2, function(data) {
if(data.errorcode ==0){
jQuery('#descbo').html(data.chtml)
}else{
jQuery('#descbo').html(data.chtml)
}
}, "json");
});
This is part of my ajax.php file that previous example of jQuery is pulling information from.
$city_id = isset($_POST['cityid']) ? $_POST['cityid'] : 0;
if ($city_id <> 0) {
$errorcodeD = 0;
$strmsg = "";
$sqlD="SELECT * from destination WHERE IDCity = ". $city_id . " ORDER BY name;";
$resultD=mysql_query($sqlD);
$contD=mysql_num_rows($resultD);
if(mysql_num_rows($resultD)){
$chtmlD = '<select name="destination" id="destination"><option value="0">--Select Destination--</option>';
while($row = mysql_fetch_array($resultD)){
$chtmlD .= '<option value="'.$row['IDDestination'].'">'.$row['name'].'</option>';
}
$chtmlD .= '</select>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
}else{
$errorcodeD = 1;
$strmsg = '<font style="color:#F00;">No Destination available</font>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$strmsg));
}
And MY html section that would display everything.
<h2>Destination</h2>
<div class="wrap" id="descbo">
</div>
So basically what ever destination the user chooses, the specific information for that destination will render its self on the screen in separate boxes or text areas.
Thank you!

So, if I understand correctly, you want your php script to return data from your destination table when a particular destination is selected. You said you don't want the page to reload, but I'll assume you're OK with issuing another AJAX request to the server. If that's the case, you can simply create another delegated jQuery handler for the destination <select>:
jQuery(".wrap").on('change', '#destination', function() {
var data = {destinationid: this.value};
jQuery.post("url/to/script.php", data)
.done(function(response) {
jQuery('#descbo').html(response.html);
});
Then, in your PHP, you could have something like this:
$destination_id = isset($_POST['destinationid']) ? $_POST['destinationid'] : 0;
...
$sqlD="SELECT * from destination WHERE ID = ". $destination_id . " ORDER BY name;";
$resultD=mysql_query($sqlD);
if(mysql_num_rows($resultD)){
$chtmlD = '<div class="destination">';
while($row = mysql_fetch_array($resultD)){
$chtmlD .= '<p>' . $row['whatever'] . '</p>';
}
$chtmlD .= '</div>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
} else {
...
}
That will replace your original destination <select> with a div containing the destination description (or whatever the content is). If you don't want to replace the select, you could simply have the JS update a different element on the page, e.g.
jQuery('#some_other_element').html(response.html);

How to make multiple pop up div based on database information?

I recently learned about Jquery pop-up div.
I used this link.
I want that kind of pop up div.
But the problem is , I need multiple pop-up div.
Suppose i have 15 user in database table then i want 15 different link.
Moreover every popup div should show the database information of that user.
I also found this one, but this pop-up div doesn't move with the mouse pointer and when the div width greater than the link width this doesn't work.
So i want pop-up div like the first example.
How can I do this ?

I thought about this problem diferently than you. So here's my idea.
1st- you don't need multiple divs cuz using jquery & php you can manipulate a single div however you want.
2nd- saying you display your 15 persons 1st makes the job easier. Let's say you store them into some links like the next example and we asume we have an ID, a Name, an Age and a Location:
<?php
$sql = "SELECT * FROM persons";
$result = mysql_query($sql);
while(mysql_fetch_array($result)) {
echo '<a hred="#" class="trigger" id=' . $result['id'] . '>' . $result['name'] . '</a><br />';
}
Now using AJAX we dispaly the results for hovering any link:
$('a').mouseenter(function(e) {
var myperson = $(e.target).text();
$.ajax({
url: "details.php?current=" + myperson,
success: function(html){
if(html) {
$("a").append(html); //here you'll have to get the current hovered link- this will dispaly the info on all the links on hovering one of them
}
}
}
Now in the details.php page we'll do the query for the current person:
<?php
$currpers = "SELECT * FROM persons WHERE name = '" . addslashes($_GET['current']) . "'") or die(mysql_error());
$results = mysql_query($currpers);
if(mysql_fetch_array($results )) {
echo '<div class="pop-up">
<p>
<strong>Age:</strong>' . $results ['age'] . '<br />
<strong>Location:</strong> ' . $results ['location'] . '
</p>
</div>';
}
?>
NOTE: I have not tested this. There might be some adjustmests but the idea is the same.