JQuery .before() add html block escape - javascript

I just want to add a html block using .before() fucntion of JQuery here is the block :
$buttonValue = '<div class="addthis_toolbox addthis_default_style" '.$str .'>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>';
and here is the Script that I use it :
$script = "(function($){\n";
$script .= "$(document).ready(function(){\n";
$script .= "$( \".prod-view\" ).before( \"$buttonValue\" );";
$script .= "}); \n";
$script .= "})(jQuery);" ;
I have already tried php addslashes() function, but with no luck

Try this,
$buttonValue = '<div class="addthis_toolbox addthis_default_style" '.$str .'><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a><a class="addthis_counter addthis_pill_style"></a></div>';
SCRIPT
$script = "(function($){\n";
$script .= "$(document).ready(function(){\n";
$script .= "$( \".prod-view\" ).before( '$buttonValue' );";
$script .= "}); \n";
$script .= "})(jQuery);" ;
Differences from you code is make the html in single line, otherwise it make a js error. And then use semicolon in .before()

Related

Stack messageboard uploads compactly in order, one under eachother in rows of 5, but dont let tall images interfere

I have some kind of message board, users can add images, videos, markdown text.
How I want it to behave
I want items to align like in the image provided; move the blue element to the red area, as it should. the uploads (messages) are all the same width, but different heights, also, They are added by a PHP script which loops through a database and adds elements to the "message board" div, with the ".uploads" class.
if provided an image or video, theres an image or video, if not, theres only text.
home.php (shortened to the point...)
<?php
session_start();
// Check if user is logged in
if (isset($_SESSION['id']) && isset($_SESSION['user_name'])) {
?>
<!DOCTYPE html>
<body>
<div class="functions-holder">
<h1>Hello, <?php echo $_SESSION['name']; ?></h1>
<?php if (isset($_GET['msg'])) { ?>
<p class="message"><?php echo $_GET['msg']; ?></p>
<?php } ?>
Logout
<button onclick="openPopup()" class="fa-solid fa-plus" id="popUp"> Add post</button>
</div>
<div id="message-board"">
</div>
<script src="board.js"></script>
</body>
</html>
<?php
} else {
?>
<!-- ... pretty similar... -->
Sample of board.php
while ($row = $result->fetch_assoc()) {
$html .= '<div class="uploads">';
// Only display the delete button if the logged-in user is "chips"
if (isset($_SESSION['user_name']) && $_SESSION['user_name'] === "chips") {
$html .= '<button class="delete-button" data-id="' . $row['postid'] . '">Delete</button>';
}
$html .= '<h2>' . $row['author'] . ' shared</h2>';
$html .= '' . $row['markdown'] . '';
// Display the image if it exists and is not "noimg"
if ($row['img'] != '' && $row['img'] != 'noimg'){
$mimeType = mime_content_type($row['img']);
$fileType = explode('/', $mimeType)[0];
if (str_contains($fileType, 'image')){
$html .= '<img src="' . $row['img'] . '"/>';
}
else if (str_contains($fileType, 'video')){
$html .= '<video controls width="380" height="auto" src="' . $row['img'] . '"/>';
}
}
$html .= '</div>';
}
How could I do this using; HTML, CSS, and JAVASCRIPT
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.uploads {position: relative;float:left;width: 19%;border:1px dotted #000;margin:3px;height: 365px;width: 365px;background-color: #999;overflow: hidden;}
.uploads h2 {float:left;height: 30px;}
.uploads button {float:right;height: 30px;}
.uploads .markdown {float:left;clear: both;height: 20px;width: 100%;}
.uploads img {position: relative;float: none;display: block;clear: both;width:auto;height: auto;max-height: 285px; max-width: 330px;margin: 0px auto;clear: both;}
hr {width:100%;float:left;clear:both;}
</style>
</head>
<body>
<?php
$i=1;
$html = '';
while ($i<7) {
$html .= '<div class="uploads">';
// Only display the delete button if the logged-in user is "chips"
$html .= '<button class="delete-button" data-id="x' . $i . '">Delete</button>';
$html .= '<h2>xauthor shared</h2>';
$html .= '<div class="markdown">xmarkdown</div>';
// Display the image if it exists and is not "noimg"
$html .= '<img src="' . $i . '.png"/>';
// else if (str_contains($fileType, 'video')){
// $html .= '<video controls width="380" height="auto" src="' . $row['img'] . '"/>';
// }
$html .= '</div>';
if(($i%5)==0) {
$html .= '<br/><hr/><br/>';
}
$i++;
}
echo $html;
?>
</body>
</html>

How to use javascript to activate the button when checkbox is checked?

I need for this php file a modification but I don't know javascript. This makes it really hard for me how to do it.
I want to do this:
If checkbox is checked than activate my submit button else don't activate them (default).
I already did some modifications:
I added the checkbox with id= checkbox and I added the parameter disabled="disabled" to my button.
This is working. Now I need only to activate the button when checkbox is checked.
But I have now 2 problems:
I don't know where to put the javascript code to my file
I don't know to I can call or activate javascript in my code
Would be really nice if someone could help me.
<?php
if(isset($_POST['photo-name'])){
$photo_name = $_POST['photo-name'];
}
if(isset($_POST['photo-title'])){
$photo_title = $_POST['photo-title'];
}
if(isset($_POST['photo-description'])){
$photo_description = $_POST['photo-description'];
}
if(empty($photo_name)){
$photo_name = '';
}
if(empty($photo_description)){
$photo_description = '';
}
$sql= $wpdb->get_results("SELECT name,id FROM ".$wpdb->prefix."u_gallery_cat ORDER BY name ASC");
$html .= '<div><label for="photo-name"><strong>'.__('Caption:','user-gallery').'</strong></label></div>';
$html .= '<div class="contest-input"><input type="text" name="photo-name" id="photo-name" value="'.$photo_name.'" /></div>';
$html .= '<div><label for="photo-content"><strong>'.__('Description:','user-gallery').'</strong> <span class="contest-small-font-2">'.__('(Optional)','user-gallery').'</span></label></div>';
$html .= '<div class="contest-input"><textarea class="photo-description-textarea" name="photo-description" id="photo-description">'.$photo_description.'</textarea></div>';
if(!empty($sql)){
$html .= '<div><label for="photo-category"><strong>'.__('Category:','user-gallery').'</strong></label></div>';
$html .= '<select name="photo-category" id="photo-category">';
foreach($sql as $item){
$html .= '<option value="'.$item->id.'">'.$item->name.'</option>';
}
$html .= '</select>';
}
if ($photo_limit == 100000000){
$html .= '<div><label for="user-photo"><strong>'.__('Select image:','user-gallery').'</strong></label></div>';
}else{
$html .= '<div><label for="user-photo"><strong>'.__('Select image: (max.','user-gallery').' '.$p_limit.')</strong></label></div>';
}
$html .= '<div class="contest-input"><input type="file" name="user-photo" id="user-photo" size="50" accept="image/*" onchange="loadFileU(event)" class="selimg"></div>';
$html .= '<img id="coutput"/>';
$html .= '<div class="ug-clear"></div>';
$html .= '<input type="hidden" name="user_id" />';
$html .= '<input type="hidden" name="action" value="new_post" />';
$html .= '<div class="contest-button-div">';
$html .= '<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox"></div>';
$html .= '<div class="contest-button"><input type="submit" value="'.__('Add Photo','user-gallery').'" id="submit" disabled="disabled" name="submit" class="ug-styled-button tooglebutton" /></div>';
$html .= '<div class="ug-clear"></div>';
$html .= '</div>';
$html .= '<div class="ug-clear"></div>';
$html .= '</form>';
$html .= '<div class="ug-clear"></div>';
$html .= '</div>';
}
?>
Without using Jquery :
On your checkbox add a onchange() event to trigger Javascript:
<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox" onchange="openSubmit()"></div>
Then for your script :
<script type="text/javascript">
function openSubmit(){ // This function is called by the checkbox click
if(document.getElementById('chk').checked == true){ // If it is checked
document.getElementById('submit').disabled = false; // Then we remove the disable attribute
}
</script>
Using Jquery :
$('#chk').change(function(){ // You put an event on your checkbox here
if($(this).is(':checked')){ // If statut of checkbox is checked
document.getElementById('submit').disabled = false; // Then we remove the disable attribute
}
});
You can put this script at the bottom of your file after your PHP.

Wordpress Shortcode associated js not working

I have a plugin that creates a shortcode that outputs a form onto the page. There is nothing overly special about the form its self (just a bunch of html echo'd out). Where I am running into issues is when I need to manipulate that html with js. For some reason if I try to enqueue and register the js, none of the dynamic properties I need the form to have work but if I just put the js directly below the shortcode then everything works as expected. I normally wouldn't care if I had to do this for just esthetic js but I will also need this form to make an ajax call when the the submit button is pressed and I don't know how to do that without properly enqueueing the script. Below is the class for the Form output and the class that will just enqueue all the scripts I need:
namespace mmUserPreference;
class Form
{
public function __construct()
{
add_shortcode('user_preference_form', array($this, 'user_preference_form_shortcode'));
}
public function user_preference_form_shortcode()
{
//the ../ is to keep the form submit on the first page level
$output = '<div class="user_preference_form_container">';
$output .= '<form id="user_preference" method="post">';
$output .= '<div class="top_nav_up">';
$output .= '<div class="top_nav_top_row">';
$output .= '<div class="form_title_up">Manage Your e-Alerts</div>';
$output .= '<div class="top_nav_up_right">';
$output .= '<div class="form_submit_up"><input type="submit" value="Save"></div>';
$output .= '<div class="form_collapse_up"><i class="fa fa-chevron-up rotate" aria-hidden="true"></i></div>';
$output .= '</div>';
$output .= '</div>';
$output .= '<ul class="tabs_up">';
$output .= '<li class="tab_link_up current" data-tab="topics">Topics</li>';
$output .= '<li class="tab_link_up" data-tab="stocks">Stocks</li>';
$output .= '</ul>';
$output .= '</div>';
$output .= '<div class="form_content_up">';
$output .= '<div id="topics" class="tab-content-up current">';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="stocks_field" value="true"> Stocks</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="us_economy_field" value="true"> U.S. Economy</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="stock_market_today_field" value="true"> Stock Market Today</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="technology_article_field" value="true"> Technology Article</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="global_markets_field" value="true"> Global Markets</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="top_news_field" value="true"> Top News</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="nasdaq_field" value="true"> Nasdaq.com</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="investing_ideas" value="true"> Investing Ideas</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="oil" value="true"> Oil</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="tech_stocks" value="true"> Tech Stocks</div>';
$output .= '</div>';
$output .= '</div>';
$output .= '<div id="stocks" class="tab-content-up">';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="aapl" value="true"> AAPL</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="lmt" value="true"> LMT</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="ekso" value="true"> EKOS</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="noc" value="true"> NOC</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="ups" value="true"> UPS</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="tsla" value="true"> TSLA</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="vz" value="true"> VZ</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="nvda" value="true"> NVDA</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="awk" value="true"> AWK</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="rtn" value="true"> RTN</div>';
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
if(isset($_COOKIE['mmp_e'])) {
$output .= '<input type="hidden" name="email" value="' . $_COOKIE['mmp_e'] . '">';
} else {
$output .= '<input type="text" name="email" required><br> Please enter the email address you would like these updates to be sent to. <br>';
}
$output .= '</form>';
$output .= '</div>';
echo $output;
?>
<script>
// jQuery(document).ready(function($) {
// //for the user preference form tabs
// $('div.user_preference_form_container li.tab_link_up').click(function () {
// var tab_id = $(this).attr('data-tab');
//
// $('li.tab_link_up').removeClass('current');
// $('.tab-content-up').removeClass('current');
//
// $(this).addClass('current');
// $("#" + tab_id).addClass('current');
// });
//
// $('div.form_collapse_up').click(function () {
// $('.tabs_up').toggle('slow');
// $('.form_content_up').toggle('slow');
// $('.form_submit_up').toggle('slow');
// $('.form_collapse_up > .fa-chevron-up').toggleClass("down");
// });
// });
</script>
<?php
}
}
then to enqueue the scripts
namespace mmUserPreference;
class loadScripts
{
public function __construct()
{
add_action('wp_enqueue_scripts', array($this, 'loadScripts'));
}
public function loadScripts()
{
wp_register_script(
'user-preference-form-style-js',
plugins_url('../js/mm-user-preference-form-style.js', __FILE__),
array('jquery'),
null,
false);
wp_register_script(
'user-preference-form-submit-js',
plugins_url('../js/mm-user-preference-form-submit.js', __FILE__),
array('jquery'),
null,
true);
wp_register_style(
'user-preference-form-style-css',
plugins_url('../css/mm-user-preference-form.css', __FILE__)
);
wp_enqueue_script('user-preference-form-style-js');
wp_enqueue_script('user-preference-form-submit-js');
wp_enqueue_style('user-preference-form-style-css');
}
}
Then the main plugin file just looks something like this right now:
/*
Plugin Name: ******
Description: *****
Version: 1.0.0
Author: ******
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
include 'classes/Form.php';
include 'classes/loadScripts.php';
use mmUserPreference\Form;
use mmUserPreference\loadScripts;
use mmUserPreference\sendEmail;
use mmUserPreference\userQuery;
$userPrefScripts = new loadScripts();
$userPrefForm = new Form();
Any ideas where I am going wrong?
So for whatever reason I had to load my scripts at the 'wp_footer' hook in order for my shortcode to be effected by the js ie:
add_action('wp_footer', array($this, 'loadScripts'));

how to pass value from a boostrap modal child to parent?

I been trying to pass any value from my window modal child to the parent window, but it doesn't work. The modal doesn't hide or send the value to the parent window when I click Save.
application.php
<body>
<h3 class="h3 black">Application</h3>
<form class="form-horizontal" method="post" action="admin-controller.php" name="f1">
<input type="text" name="p_name" id="n1" >
<?php
include 'includes/calendar.php';
$calendar = new Calendar();
echo $calendar->show();
?>
</form>
</body>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0 /jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
function post_value(){
window.opener.document.f1.p_name = document.myform.skill_id_t.value;
$('#modal_1').modal('hide');
}
</script>
calendar.php
<?php
class Calendar {
public function show() {
//some code
$html .=$this->_showDay($someValues);
//some code
}
private function _showDay($cellNumber){
// Build up the html.
$html = '<td id="' . $this->currentDate . '" class="td-top-text ' . $classNameOne . $classNameTwo . '">';
//Radio button that open the Modal window
$html .= '<input type="radio" data-toggle="modal" data-target="#modal_1" name="schedule_id" value="'. $shedule_id.'">';
//singleModal
$html .=$this->_singleModal();
$html .= '</td>';
return $html;
}
//child window
public function _singleModal(){
//Single Modal
$html = '<form name="myform" method="post" action="">';
$html .= '<div class="modal fade" id="modal_1" role="dialog">';//Modal open
$html .= '<div class="modal-dialog">';//Modal Dialog open
$html .= '<div class="modal-content">';//Modal-Content Open
$html .= '<div class="modal-header">';//Modal-Header open
$html .= '<button type="button" class="close" data-dismiss="modal">×</button>';//bbutton
$html .= '<h4 class="modal-title bold cyan">Sign Up (Single)</h4>';//Title H4
$html .= ' </div>';//Modal-header Close
$html .= '<div class="modal-body">';//Modal-body open
//Type something to pass to parent window
$html .= '<input name="skill_id_t" type="text">';
$html .= '</div>';//Modal-body close
$html .= '<div class="modal-footer">';//Footer open
$html .= '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';//button
$html .= '<input onclick="post_value();" id="save" type="button" name="save-details" value="Save">';//input
$html .= '</div>';//Footer Close
$html .= '</div>';//Modal-content close
$html .= '</div>';//Modal Dialog Close
$html .= '</div>';//Modal close
$html .= '</form>';
return $html;
}
}
I read other posts and according to them, the problem could be javascript because I cant use data-target="#modal_1" with javascript so I tried to delete the target and just add onclick call a function into my <input name="schedule_id"> to do $(#modal_1).modal('show'); but still the $(#modal_1).modal('hide'); doesn't work.
I also had tag php because according to other posts, I need to include the javascript into my php (calendar.php) and not in my application.php
Edit
I also got some error every time I click on Save
TypeError: opener is null
Tried to fix it by adding window.opener... but it didn't work either
New Edit:
I have change my js code to this:
$(function() {
$('#btnLaunch_1').click(function() {
$('#modal_1').modal('show');
});
$('#btnSave_1').click(function() {
opener.document.f1.p_name = document.myform.skill_id_t.value;
$('#modal_1').modal('hide');
});
$('#cancel_1').click(function() {
$('#modal_1').modal('hide');
});
});
and I remove everything that have to be with data-target including the one that close the window data-dismiss. And, I realized that the problem is this line opener.document.f1.p_name = document.myform.skill_id_t.value; for some reason this line fail by giving the above error. ...opener is null
Pleaseeee helpp =/ II am trying hard here....
So, after googling more and more and follow some suggestions from the first comment, I believe that the best way to get the values from a bootstrap modal child window and add it to the parent window is by using jQuery in this way:
$(function() {
//open modal
$('#btnLaunch_1').click(function() {
$('#modal_1').modal('show');//no need data-target just <input id="">
});
$('#btnSave_1').click(function() {
//Get the value from the child into a variable
value = $('[name="skill_id_1"]').val();
//Set the value to the parent window
$('[name="p_name"]').val(value);
//make the modal dismiss (no need data-target)
$('#modal_1').modal('hide');
});
//if user click cancel instead of use data-dismiss, just hide it
$('#cancel_1').click(function() {
$('#modal_1').modal('hide');
});
});
If you find a better solution that this one, please let me know
Thanks
Your opener form name is wrong;
Change
window.opener.document.f1.p_name to
window.opener.document.myform.p_name
as you refer
<form name="myform" method="post" action="">

jquery form results are not showing. Is my code wrong?

I am having difficulty with my form. On one of my pages is a form. You enter info, click submit, and it returns with some result. Well, it is supposed to return with a result. It appears to do nothing, currently. However, if I check the header responses in my developer tools, it does show the results. So I know they are being called correctly, they just are not appearing on the webpage.
Here is the calling code:
$content .= '
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(window).load(function(){
$j("#pubverify-form").submit(function() {
var str = $j(this).serialize();
$j.ajax({
type: "POST",
url: "' . $cs_base_dir . 'verify.php",
data: str,
success: function(msg){
$j("#note").ajaxComplete(function(event, request, settings)
{
$j(this).html(msg);
});
}
});
return false;
});
});
</script>';
Here is the code that I believe should show the results:
$content .= '<div id="verify-a-rec" class="clear">';
$content .= '<div id="fields">';
$content .= '<h4>Verify A Recommendation</h4>';
$content .= '<div class="verify_search">';
$content .= '<form id="pubverify-form" action="">';
$content .= '<div class="label_wrap_verify"><label class="error" for="search_last_name">Last Name </label>';
$content .= '<div class="input_wrap_verify"><input name="search_last_name" type="text" id="search_last_name"/></div></div>';
$content .= '<div class="label_wrap_verify"><label class="error" for="search_dob">Birthdate (mm-dd-yyyy) </label>';
$content .= '<div class="input_wrap_verify"><input name="search_dob" type="text" id="search_dob"/></div></div>';
$content .= '<div class="label_wrap_verify"><label class="error" for="search_issue_date">Issue Date (mm-dd-yyyy)</label>';
$content .= '<div class="input_wrap_verify"><input name="search_issue_date" type="text" id="search_issue_date"/></div></div>';
$content .= '<div class="button_wrap"><input type="submit" value="Verify" class="button" id="pubverify-submit" /></div>';
$content .= '</form>';
$content .= '</div>';
$content .= '</div>';
$content .= '<div style="clear:both"></div>';
$content .= '<div id="note">';
$content .= '<p>Enter a Recommendation ID and click Verify!</p>';
$content .= '<div class="patient_wrapper">';
$content .= '<div class="results_label">First Name </div>';
$content .= '<div class="results_label">Last Name </div>';
$content .= '<div class="results_label">Date of Birth </div>';
$content .= '<div class="results_label">Issue Date </div>';
$content .= '<div class="results_label">Expiration Date </div>';
$content .= '<div class="results_label">Dr. Information </div>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
return $content;
Can someone please help!?
This part is wrong.
$j("#note").ajaxComplete(function(event, request, settings)
{
$j(this).html(msg);
});
You need to remove the ajaxComplete code.
$j.ajax({
type: "POST",
url: "' . $cs_base_dir . 'verify.php",
data: str,
success: function(msg){
$j("#note").html(msg);
}
});

Categories