When I am clicking on the Bengali button its showing data for few seconds and hiding it again, whereas I wrote the same code for the Assamese button, it displaying fine:
<script>
function be(){
var x= document.getElementById('ben');
if (x.style.display==='block'){
x.style.display='none';
}
else
{
x.style.display='block';
}
}
</script>
<button class= "button" onclick="be()">BENGALI</button>
<div id="ben">
<?php
$dir = '/home/test/data/Bengali/';
if (!isset($_POST['submit'])) {
if ($dp = opendir($dir)) {
$files = array();
while (($file = readdir($dp)) !== false) {
if (!is_dir($dir . $file)) {
$files[] = $file;
}
}
closedir($dp);
}
if ($files) {
echo '<form action="' . $_SERVER['PHP_SELF'] . '" method="post">';
foreach ($files as $file) {
echo '<input type="checkbox" name="files[]" value="' . $file . '" /> '
.
$file . '<br />';
}
}
}
?></div>
You call the function when you click on a submit button.
So the JS runs, then the form submits, and you load a new page.
The new page doesn't set the default styles to what they were before, so it has the effect of resetting the page.
As already mentioned, a new page is opening because a button has been clicked. The best way to solve this is by modifying your button like this:
<button class= "button" onclick="be()" type="button">BENGALI</button>
This prevents the form from submitting and runs your JavaScript function
Related
Im trying to create a very simple HEART button plugin on Wordpress. It is one of my very first plugins. What I am trying to do is when the button in the form is clicked, so the icon that is inside it, will be replaced/changed for another one.
Here is my code:
function create_the_heart_button($content){
global $wpdb;
$table_name = $wpdb->prefix . 'hearts_table';
if( is_singular() && in_the_loop() && is_main_query() ){
$id = get_the_ID();
$user_id = wp_get_current_user();
$wpdb->get_results( "SELECT * FROM $table_name WHERE (owner_id = $user_id->ID AND post_id = $id)" );
if($wpdb->num_rows == 0){
return $content .
// next: create a form and add style input type=submit?
"
<form method=\"POST\" id=\"heart-btn-form\">
<input type=hidden name=heart-btn value=$id>
<button id=\"heart-btn\">❤</button>
</form>";
} else if(isset($_POST['heart-btn'])) {
/*when the button is clicked so this happens: 😜*/
return $content .
"
<form id=\"heart-btn-clicked\">
<input type=hidden name=heart-btn-clicked value=$id>
<button id=\"heart-btn\">😜</button>
</form>";
}
}
return $content;
}
Right now, the emoji that appears when the form is not submitted yet is: ❤ and i would like it to be replaced for: 😜
I tried using the onclick function before, but it doesn't really work, because the page needs to be updated (it has to send information to the database).
The else if doesn't really work. It doesn't happen anything when I click on the heart. It loads the page, but the heart is still there.
Any ideas or suggestions on how I could solve it?
Thanks
For future recording, I solved it like this:
global $wpdb;
$table_name = $wpdb->prefix . 'hearts_table';
if( is_singular() && in_the_loop() && is_main_query() ){
$id = get_the_ID();
$user_id = wp_get_current_user();
$wpdb->get_results( "SELECT * FROM $table_name WHERE (owner_id = $user_id->ID AND post_id = $id)" );
if($wpdb->num_rows == 0){
return $content .
// next: create a form and add style input type=submit? ❤
"<form method=POST id=\"heart-btn-form\">
<input type=hidden name=heart-btn value=$id>
<button id=\"heart-btn\">❤</button>
</form>";
}else {
/*when the button is clicked so this happens: 😜*/
return $content .
"<form method=POST id=\"heart-btn-clicked\">
<input type=hidden name=heart-btn-clicked value=$id>
<button id=\"heart-btn-clicked\">😜</button>
</form>";
}
}
return $content;
}
I'm trying to make a form work, with submitting from JavaScript and a variable from my JSON.The general idea is to upload the file to a folder, and define the path in a cookie. I'm working in PHP. Somehow I just can't make the if statement return TRUE.
My code looks like this:
From functions.php
function SaveSelfieCam () {
$currentQuiz = GetCurrentQuiz();
if (!empty($_FILES[$currentQuiz->id])) {
$myFile = $_FILES[$currentQuiz->id];
if ($myFile["error"] !== UPLOAD_ERR_OK) {
echo "<p>Der skete en fejl.</p>";
exit;
}
$name = preg_replace("/[^A-Z0-9._-]/i", "_", $myFile["name"]);
$i = 0;
$parts = pathinfo($name);
while (file_exists(QR_DIR . $name)) {
$i++;
$name = $parts["filename"] . "-" . $i . "." . $parts["extension"];
}
$success =
move_uploaded_file($myFile["tmp_name"],QR_DIR . $name);
if (!$success) {
echo "<p>Det lykkedes ikke at gemme filen.</p>";
exit;
}
if ($success) {
echo "Alt er godt!";
setcookie($currentQuiz->id, QR_DIR . $name);
chmod(QR_DIR . $name, 0644);
}
}
}
HTML Form (from my index.php)
echo "<form id='form' action='' method='post'><input id='selfieCam' class='quizCam' type='file' capture='user' accept='image/*' name='" . $currentQuiz->id . "' onchange='submitSelfie()'><label for='selfieCam'>Til kameraet</label></form></div>";
SaveSelfieCam ();
JavaScript (submitting form):
function submitSelfie() {
document.getElementById("form").submit();
}
try to add enctype='multipart/form-data' to your form as attribute-value like this
<form id='form' action='' method='post' enctype='multipart/form-data'>
How do i pass variables into a UIkit Modal?
The Button:
<button type="button" class="uk-button" data-uk-modal="{target:'#info',center:true}" data-added="added-test" data-modified="modified-test"><i class="uk-icon-info"></i></button>
The Modal:
<div class="uk-modal" id="info">
<div class="uk-modal-dialog">
<h4 style="margin-bottom:5px;">Added:</h4>
<div id="added"></div><br>
<h4 style="margin-bottom:5px;">Modified:</h4>
<div id="modified"></div>
<div class="uk-modal-footer">
<button type="button" class="uk-button uk-modal-close">Close</button>
</div>
</div>
</div>
The Script:
$(document).ready(function () {
$('#info').on('uk.modal.show', function (event) {
var button = $(event.relatedTarget);
var added = button.data('added');
var modified = $(e.target).data('modified');
var modal = $(this);
modal.find('.uk-modal-dialog #added').text(added);
modal.find('.uk-modal-dialog #modified').text(modified);
});
});
This is not working. I do not get a error in the console. I´ve already tried a few other ways but all of them didn´t worked as they should.
Update #1
The following jquery works partially. I´ve added the id "infotrigger" to the button.
jQuery('#info').appendTo("body");
jQuery(document).on('click', '#infotrigger', infomodal_handler);
function infomodal_handler(e)
{
var added = jQuery(e.target).data('added');
var modified = jQuery(e.target).data('modified');
jQuery('#info').on({
'show.uk.modal':function(){
jQuery('#added', jQuery(this)).text(added);
jQuery('#modified', jQuery(this)).text(modified);
}
}).trigger('show.uk.modal');
}
The Problem now is that it´s only working partially. I think the reason is that the button is in a foreach loop. Mostly i have old data when opening the modal. If i open it again i have mostly the correct data.
Any ideas how to fix that?
The problem was that sometimes the icon was presssed instead of the button itself. So the data couldn´t be fetched. To fix this the variables need to be changed from:
var added = jQuery(e.target).data('added');
to:
var added = jQuery(this).data('added');
Now the correct dom element is the target.
To use the modal inside a loop i changed everything a bit. I´ve put the modal with the script into a function where i pass the element-id through and apply it to different elements:
function info_modal( $id ) {
return "
<script>
jQuery('#info" . $id . "').appendTo('body');
jQuery(document).on('click', '#infotrigger" . $id . "', infomodal_handler" . $id . ");
function infomodal_handler" . $id . "(e)
{
console.log(e);
var added" . $id . " = jQuery(this).data('added" . $id . "');
var modified" . $id . " = jQuery(this).data('modified" . $id . "');
jQuery('#info" . $id . "').on({
'show.uk.modal':function(){
jQuery('#added" . $id . "', jQuery(this)).text(added" . $id . ");
jQuery('#modified" . $id . "', jQuery(this)).text(modified" . $id . ");
}
}).trigger('show.uk.modal');
}
</script>
<!-- Info Modal -->
<div class='uk-modal' id='info" . $id . "'>
<div class='uk-modal-dialog'>
<h4 style='margin-bottom:5px;'>" . __( 'Added on', 'easy-code-placement' ) . ":</h4>
<div id='added" . $id . "'></div><br>
<h4 style='margin-bottom:5px;'>" . __( 'Last Modified on', 'easy-code-placement' ) . ":</h4>
<div id='modified" . $id . "'></div>
<div class='uk-modal-footer uk-text-right'>
<button type='button' class='uk-button uk-modal-close'>" . __( 'Close', 'easy-code-placement' ) . "</button>
</div>
</div>
</div>
";
}
Inside the loop i´ve placed the button and also apply the element-id to it and after it i call the function (the function is only for the better code readability - the script and modal can, of course, also be placed directly inside the loop):
<button type="button" id="infotrigger<?php echo $code->id; ?>" class="uk-button" data-uk-modal="{target:'#info<?php echo $code->id; ?>',center:true}" data-added<?php echo $code->id; ?>="added" data-modified<?php echo $code->id; ?>="modified"><i class="uk-icon-info"></i></button>
<?php echo info_modal( $code->id ); ?>
I have an application where I want to ADD an AND button that, than creates the option to add an AND statement to the query. This is the php and html code I have to do this at the moment. The problem is I don't know how to connect the php part to the javascript part to create a button that adds exacte the same code?
This the html code:
This is the php code:
<?php
include "connect.php";
$table = $_POST['tableSelected'];
$field = $_POST['fieldSelected'];
$attribute = $_POST['attributeSelected'];
$operator = $_POST['operatorSelected'];
$fieldList = $_POST['fieldList'];
if (!empty($table)){
if (!empty($fieldList)){
$fieldstr = $fieldList . ",ST_AsGeoJSON(ST_Transform(l.geom,4326),6)";
} else {
$fieldstr = "";
}
$pairs = [];
foreach ($_POST['fieldSelected'] as $key => $field) {
if (!empty($field) && !empty($_POST['operatorSelected'][$key]) && !empty($_POST['attributeSelected'][$key])) {
$pairs[] = $field . " " . $_POST['operatorSelected'][$key] . " '" . $_POST['attributeSelected'][$key] . "'";
}
}
if (count($pairs) > 0) {
$sql .= ' WHERE ' . implode(' AND ', $pairs);
}
//echo ($sql);
?>
And this my html at the moment:
<select name="field[]">...</select>
<select name="operator[]">...</select>
<select name="value[]">...</select>
This is what I want:
Button click should produce something like it Javascript (jQuery):
newElement = $("#someSelector").clone(false);
// Some modification of new element. Change id for example
$(newElement).attr("id",newIdValue);
newElement.appendTo("#parentElement");
I'm trying to change an input value using jQuery mouse over.
Scenario: I got 5 div having different colors and user names. When mouseover a div the input text change (and for color input the background color) data according to database values, when change div the text displays new data.
using PHP I echo the part of the script to handle the mouseover function
<?php
$myId = '1';
$uname = 'user1';
$ucolor = 'FFFFFF';
echo "<script>
$('$myId').mouseover( function () {
$('#uname').val('" . $uname . "'),
$('#ucolor').val('" . $ucolor ."'),
$('#ucolor').css('background-color', '" . $ucolor . "')
})
</script>";
This work if i change mouseover() to hover(), but display only the first element, if i do a mouse over the second element data doesn't change.
Try this:
Put your script after body tag:
<body>
<div class="hh" id="1"></div>
<input type="text" id="uname" />
<input type="text" id="ucolor" />
<div class="hh" id="2"></div>
</body>
<?php
$myId = '1';
$uname = 'user1';
$ucolor = 'FFFFFF';
echo "<script>
$('#$myId').mouseover( function () { // add # here
$('#uname').val('" . $uname . "'),
$('#ucolor').val('" . $ucolor ."'),
$('#ucolor').css('background-color', '" . $ucolor . "')
})
</script>";
$myId = '2';
$uname = 'user2';
$ucolor = 'FFF555';
echo "<script>
$('#$myId').mouseover( function () { console.log('fdgfdg')
$('#uname').val('" . $uname . "'),
$('#ucolor').val('" . $ucolor ."'),
$('#ucolor').css('background-color', '" . $ucolor . "')
})
</script>";
?>
In general the div or any DOM must have a unique ID value. Try using class selector(.) instead of ID selector(#).