We Keep Coding

HTML content is not being rendered in Visual Composer WordPress

I have implemented a short code to display the product search form in the page built using Visual Composer.
add_shortcode( 'sagar-custom-search', 'sagar_custom_search' );
function sagar_custom_search() {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . ' ">';
$form .= '<div>';
$form .= '<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>';
$form .= '<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />';
$form .= '<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />';
$form .= '<input type="hidden" name="post_type" value="product" />';
$form .= '</div>';
$form .= '</form>';
echo $form;
echo "sagar tamang";
}
The form can be seen using inspect but it is not being rendered. Can anybody help figure it out.

How to post/send form fields return by ajax to the server using jQuery $.post

Good day fellows, I'm displaying a form via ajax based on some drop downs menus. User can can select the class on one dropdown and subject on another, which in turn returns a list of students in that class.
This is formated in a form like manner that allows user to enter scores of subjects that a student have acquire. This is how the form looks after user have selected their preferences:
I want when the save button is click and after user have enter the score, it should be send to the database. I'm facing few problems:
When the score field is empty(since I added a required attribute) it doesn't validate that the field is empty, but rather send a request to the file that is responsible to insert records.
When the request reaches the file responsible to insert records(create_score.php) it's like no values were send through the form. I know this because I var_dump($_POST) and it return this array(0) { }
This is the script I'm using to return the file:
$(document).ready(function() {
$('#subject_id').on('change', function(){
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
$('#class_id').on('change', function(){
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
$('#term').on('change', function() {
/* Act on the event */
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
When the submit is click the is how I structure my code to post values to file responsible to insert records(create_score.php)
$(document).on('click', '#savebtn', function(event) {
event.preventDefault();
// this is where I'm testing if the button is working
alert("Button click");
console.log("Button click for console");
var form = $('#st_score_form');
var formdata = form.serialize();
$.post("includes/ajax/create_score.php", formdata)
.done(function(data){
$("#success").fadeIn('slow', function(){
$("#success").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-check"></i>Alert! </b>'+data+'</div>');
});
})
.fail(function(data){
$("#success").fadeIn('slow', function(){
$("#success").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-warning"></i>Alert! </b>'+data+'</div>');
});
});
});
$('body').append('<button id="#savebtn"></button>');
This is how I'm returning the form(read_student_score_form.php):
if (mysqli_num_rows($result) > 0) {
# code...
$output .= '<h4 align="center">Periodic Report</h4>';
$output .= '<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th scope="row" colspan="1">Subject</th>
<td colspan="5">'.$subject["subject_name"].'</td>
<th scope="row">Class</th>
<td>'.$class['class_name'].'</td>
<th scope="row">Period</th>
<td>'.$period.'</td>
</tr>';
$output .= '</table>';
$output .= '<table class="table table-bordered table-condensed table-responsive table-striped">
<thead>
<tr>
<th>Student</th>
<th>Score</th>
<th>Operations</th>
</tr>
</thead>';
$output .= '<tbody>';
while ($row = mysqli_fetch_array($result)) {
# code...
$output .= '<form action="#" method="post" id="st_score_form">';
// unseen fields values that will be send
$output .= '<tr style="display: none;">';
$output .= '<td><input type="text" name="student_id" value="'.$row['student_id'].'"></td>';
$output .= '<td><input type="text" name="subject_id" value="'.$subject_id.'"></td>';
$output .= '<td><input type="text" name="class_id" value="'.$class_id.'"></td>';
$output .= '<td><input type="text" name="term" value="'.$term.'"></td>';
$output .= '</tr>';
// -- end of unseen fields
$output .= '<tr>';
$output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
$output .= '<div class="form-group">';
$output .= '<td><input type="number" min="59" max="100" name="score" class="form-control" required="required"></td>';
$output .= '<td><input type="submit" name="savebtn" id="savebtn" value="Save" class="btn btn-info form-control"></td>';
$output .= '</div>';
$output .= '</tr>';
$output .= '</form>';
}
$output .= '</tbody>';
$output .= '</table>';
$output .= '</div>';
echo $output;
} else {
echo "Data not found";
}
Contents of file responsible to insert records (create_score.php)
if (isset($_POST)){
// just testing to see values posted
echo var_dump($_POST);
}
I'm open to feed backs and suggestions on ways I can make this work. Thanks!!!
UPDATE This is how I'm now displaying my form
$output .= '<form action="#" method="post" id="st_score_form">';
while ($row = mysqli_fetch_array($result)) {
# code...
// unseen fields values that will be send
$output .= '<tr style="display: none;">';
$output .= '<td><input type="text" id="student_id" name="student_id" value="'.$row['student_id'].'"></td>';
$output .= '<td><input type="text" name="subject_id" value="'.$subject_id.'"></td>';
$output .= '<td><input type="text" name="class_id" value="'.$class_id.'"></td>';
$output .= '<td><input type="text" name="term" value="'.$term.'"></td>';
$output .= '</tr>';
// -- end of unseen fields
$output .= '<tr>';
$output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
$output .= '<div class="form-group">';
$output .= '<td><input type="number" min="59" max="100" name="score" class="form-control" required="required"></td>';
$output .= '<td><input type="submit" name="savebtn" id="savebtn" value="Save" class="btn btn-info form-control"></td>';
$output .= '</div>';
$output .= '</tr>';
}
$output .= '</form>';

you have multiple elements with same ID, specificaly
id="savebtn"
first one is appended with jQuery, and second one comes over wire and you try to add that one too.. that can be a messy,, try to isolate or change the button refs, or classes,, try to switch to classes and ditch ID's once and for all, I did that long time ago and my life changed for the better :)
also,, for your issue number
1) try to add check same way you have for other event
$(document).on('click', '#savebtn', function(event) {
event.preventDefault();
var form = $('#st_score_form');
var formdata = form.serialize();
// check for value if not empty
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.post("includes/ajax/create_score.php", formdata)
.done(function(data){
$("#success").fadeIn('slow', function(){
$("#success").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-check"></i>Alert! </b>'+data+'</div>');
});
})
.fail(function(data){
$("#success").fadeIn('slow', function(){
$("#success").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-warning"></i>Alert! </b>'+data+'</div>');
});
});
}
});
for your issue number
2) when you get results from read_student_score_form.php page try to run this in your browser console to see if you have any results,,, that's before you try to send it to server,,
var form = $('#st_score_form');
var formdata = form.serialize();
run that, and get me your results here so maybe we can continue on this issue,,
UPDATE:
you are loop wrongly... take a look on your while in php and that one would render multiple <form action="#" method="post" id="st_score_form"> and that's wrong.. move it before while,, something like this:
<?php
$output .= '<form action="#" method="post" id="st_score_form">';
while ($row = mysqli_fetch_array($result)) {
} // end while
$output .= '</form>';

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);
}
});