How I can make appear a custom widget (WordPress) - php

In my WordPress website, I added a custom widget with help of this plugin: https://wordpress.org/plugins/custom-post-type-widgets/
I want to show that widget on my archive page with PHP.
I went to https://codex.wordpress.org/Function_Reference/the_widge but didn't get what I use to make that widget appear in website. I still do not understand how to use it or what name, class, etc. I should use in website to make it appear.
It's created by an option in theme so not getting how to get it's class or ID
but in Appearance->widget code is listed below.
<div class="widgets-holder-wrap closed">
<div id="sidebar-18" class="widgets-sortables"> <div class="sidebar-name">
<div class="sidebar-name-arrow"><br /></div>
<h2>Custom Post Type - course <span class="spinner"></span></h2>
</div>
<div class="sidebar-description">
<p class="description">course</p>
</div>
<div id='widget-61_custom-post-type-categories-4' class='widget'> <div class="widget-top">
<div class="widget-title-action">
<button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
<span class="screen-reader-text">Edit widget: Categories (Custom Post Type)</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<a class="widget-control-edit hide-if-js" href="/wp-admin/widgets.php?editwidget=custom-post-type-categories-4&sidebar=sidebar-18&key=0">
<span class="edit">Edit</span>
<span class="add">Add</span>
<span class="screen-reader-text">Categories (Custom Post Type)</span>
</a>
</div>
<div class="widget-title"><h3>Categories (Custom Post Type)<span class="in-widget-title"></span></h3></div>
</div>
<div class="widget-inside">
<form method="post"> <div class="widget-content"> <p><label for="widget-custom-post-type-categories-4-title">Title:</label>
<input class="widefat" id="widget-custom-post-type-categories-4-title" name="widget-custom-post-type-categories[4][title]" type="text" value="asdf" /></p>
<p><label for="widget-custom-post-type-categories-4-taxonomy">Taxonomy:</label><select class="widefat" id="widget-custom-post-type-categories-4-taxonomy" name="widget-custom-post-type-categories[4][taxonomy]"><option value="category">Categories category</option><option value="employees_category">Employees Categories employees_category</option><option value="faq_category">Faq Categories faq_category</option><option value="news_category">News Categories news_category</option><option value="portfolio_category">Portfolio Categories portfolio_category</option><option value="testimonial_category">Testimonial Categories testimonial_category</option><option value="photo_album_category">Photo Album Categories photo_album_category</option><option value="wp_cc_tax_country">Country wp_cc_tax_country</option><option value="course-category" selected='selected'>Course Categories course-category</option><option value="expert-field">Expert fields expert-field</option><option value="internship-category">Internship Categories internship-category</option><option value="country-cost">Countries for Cost country-cost</option><option value="application-basket">Applications Baskets application-basket</option><option value="scholarship-category">Scholarship categories scholarship-category</option><option value="entry-requirement">Entry Requirements entry-requirement</option><option value="awarding-level">Awarding levels awarding-level</option><option value="intake">Intakes intake</option><option value="study-mode">Study Modes study-mode</option><option value="status">Statuses status</option><option value="course-keyword-taxonomy">Course Keywords course-keyword-taxonomy</option></select></p>
<p><input type="checkbox" class="checkbox" id="widget-custom-post-type-categories-4-dropdown" name="widget-custom-post-type-categories[4][dropdown]" />
<label for="widget-custom-post-type-categories-4-dropdown">Display as dropdown</label><br />
<input type="checkbox" class="checkbox" id="widget-custom-post-type-categories-4-count" name="widget-custom-post-type-categories[4][count]" checked='checked' />
<label for="widget-custom-post-type-categories-4-count">Show post counts</label><br />
<input type="checkbox" class="checkbox" id="widget-custom-post-type-categories-4-hierarchical" name="widget-custom-post-type-categories[4][hierarchical]" checked='checked' />
<label for="widget-custom-post-type-categories-4-hierarchical">Show hierarchy</label></p>
</div> <input type="hidden" name="widget-id" class="widget-id" value="custom-post-type-categories-4" />
<input type="hidden" name="id_base" class="id_base" value="custom-post-type-categories" />
<input type="hidden" name="widget-width" class="widget-width" value="250" />
<input type="hidden" name="widget-height" class="widget-height" value="200" />
<input type="hidden" name="widget_number" class="widget_number" value="4" />
<input type="hidden" name="multi_number" class="multi_number" value="" />
<input type="hidden" name="add_new" class="add_new" value="" />
<div class="widget-control-actions">
<div class="alignleft">
<button type="button" class="button-link button-link-delete widget-control-remove">Delete</button> |
<button type="button" class="button-link widget-control-close">Close</button>
</div>
<div class="alignright">
<input type="submit" name="savewidget" id="widget-custom-post-type-categories-4-savewidget" class="button button-primary widget-control-save right" value="Save" /> <span class="spinner"></span>
</div>
<br class="clear" />
</div>
</form> </div>

Related

How can I make sure a user either inserted a description or file before form submission?

i have a foreach row that displays the "message icon" (i dont think it has anything to do with the form since the form is outside the loop:
enter image description here
which displays a chat form that you can either type a chat or send an attachment:
enter image description here
How can i make one of them required before submission? I tried through multiple JQuery ways but because they are in a for loop and each of them do not have a special id, its not working. any help please? I just need it to show an alert
Here is my code for the form:
<form method="post"action="<?php echo base_url();?>form_support_chat" enctype="multipart/form-data" class="ticket-reply-form">
<div class="row">
<div class="col-xs-12">
<div class="chat-left">
<input type="text" name="message" placeholder="Type Message ..." class="form-control" autocomplete="off">
<input type="hidden" name="cst_id" value="<?php echo $cst_id; ?>">
<input type="hidden" name="arch_ticket" value="<?php echo $arch_ticket; ?>">
<input type="hidden" name="ticket_number" value="<?php echo $ticket_number?>">
</div>
<div class="chat-right">
<label>
<img src="<?php echo base_url();?>/assest/icon-img/paperclip.png" class="ic_img" >
<input type="file" name="file" class="form-control" style="display:none;" id="hidden_upload_file_chatting">
</label>
<button type="submit" class="btn btn-flat" name="reply" value="reply" >Reply</button>
<button type="button" class="btn btn-flat" data-dismiss="modal" style="margin-left: 10px !important;">Close</button>
<span id="_showName"></span>
</div>
</div>
</div>
</form>
Simply use html5's required value
<input name="cst_id" value="<?php echo $cst_id; ?>" required>
or
<input name="cst_id" value="<?php echo $cst_id; ?>" required="true">
update
Using jQuery, add id value to each input
$(document).ready(function() {
if( $('#input1').valid() || $('#input2').valid(); ):
console.log("Success");
endif;
});

How to auto create divs depending on the data in mysql table using php?

I want to create an ecommerce website, using PHP and mySQL DB. I have this code below and I want (with the use of php if possible), after connecting to sql DB(I did this) to repeat this DIV depending on the entries in the DB table and echo the data of each entry in table. I found this but I don't know if it's the right example: Automatically creating div's using data from a sql table
Here's the code:
<div class="col-md-4 agileinfo_new_products_grid agileinfo_new_products_grid_mobiles">
<div class="agile_ecommerce_tab_left mobiles_grid">
<div class="hs-wrapper hs-wrapper2">
<img src="images/<image>.jpg" alt=" " class="img-responsive" />
<div class="hs_bottom hs_bottom_sub1">
<ul>
<li>
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</li>
</ul>
</div>
</div>
<h5><Itemname></h5>
<div class="simpleCart_shelfItem">
<p><i class="item_price"><Price></i></p>
<p><i class="item_price"><Description></i></p>
<form action="#" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="item" value="Itemname" />
<input type="hidden" name="amount" value="Price"/>
<button type="submit" class="cart">Add to cart</button>
</form>
</div>
</div>
The example you provided above will work just fine, all you need to do is put the div/div's you want to generate multiple times inside a loop. then they will be generated as long as the loop condition is met.
But though the example u provided works but you need to note that it
is using mysql_* functions which are depreciated and no longer
supported by newer php versions .
Therefore I would advice that you learn about prepared statements instead, and use PDO.
consider the following :
<?php
$sql = $pdo->query("SELECT * FROM products")->fetchall(PDO::FETCH_ASSOC);
foreach($sql as $row):?>
<div class="col-md-4 agileinfo_new_products_grid agileinfo_new_products_grid_mobiles">
<div class="agile_ecommerce_tab_left mobiles_grid">
<div class="hs-wrapper hs-wrapper2">
<img src="images/<?php echo $row['productImg'];?>" alt=" " class="img-responsive" />
<div class="hs_bottom hs_bottom_sub1">
<ul>
<li>
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</li>
</ul>
</div>
</div>
<h5><?php echo $row['item_name'];?></h5>
<div class="simpleCart_shelfItem">
<p><i class="item_price"> Price : <?php echo $row['item_price'];?></i></p>
<p><i class="item_price">Description <?php echo $row['item_description'];?></i></p>
<form action="#" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="item" value="<?php echo $row['item_name'];?>" />
<input type="hidden" name="amount" value="<?php echo $row['item_price'];?>"/>
<button type="submit" class="cart">Add to cart</button>
</form>
</div>
</div>
<?php
endforeach;
?>
OR
<?php
$sql = $pdo->query("SELECT * FROM products");
while ($row = $sql->fetchall(PDO::FETCH_ASSOC)):?>
<div class="col-md-4 agileinfo_new_products_grid agileinfo_new_products_grid_mobiles">
<div class="agile_ecommerce_tab_left mobiles_grid">
<div class="hs-wrapper hs-wrapper2">
<img src="images/<?php echo $row['productImg'];?>" alt=" " class="img-responsive" />
<div class="hs_bottom hs_bottom_sub1">
<ul>
<li>
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</li>
</ul>
</div>
</div>
<h5><?php echo $row['item_name'];?></h5>
<div class="simpleCart_shelfItem">
<p><i class="item_price"> Price : <?php echo $row['item_price'];?></i></p>
<p><i class="item_price">Description <?php echo $row['item_description'];?></i></p>
<form action="#" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="item" value="<?php echo $row['item_name'];?>" />
<input type="hidden" name="amount" value="<?php echo $row['item_price'];?>"/>
<button type="submit" class="cart">Add to cart</button>
</form>
</div>
</div>
<?php
endwhile;
?>
Where $pdo is your database connection string.
This will fetch data and generates the div for each product.
If you not using prepared statements for your application, I would advice you to use them more especially pdo prepared statements, below are the places you can learn pdo prepared statements
https://phpdelusions.net/pdo#foreach
http://jayblanchard.net/demystifying_php_pdo.html

WooCommerce: adding form elements to variable.php breaks quantity functionality

I added two extra form elements (radio buttons) within the form of single-product/add-to-cart/variable.php. Now quantity field doesn't work: if I pick "5" for instance, click Add-to-Cart button and visit my Cart, only 1 item was added instead of 5. If I remove my extra elements, it works again. Any suggestion as to what's going on?
I added my form elements right after do_action( 'woocommerce_after_single_variation' ); :
<?php do_action( 'woocommerce_after_single_variation' ); ?>
<div class="auto_replenish_wrap">
<div class="auto_replenish_option">
<input type="radio" name="auto_replenish" value="auto_replenish_no" checked="checked">
<label for="auto_replenish_no">
Deliver one-time only
</label>
</div>
<div class="auto_replenish_option">
<input type="radio" name="auto_replenish" value="auto_replenish_yes">
<label for="auto_replenish_yes">
<div class="auto_replenish_yes_label">
Auto-replenish <a href='#'>(See details)</a>
</div>
<div class="auto_replenish_yes_label_frequency">
<span class="delivery_frequency">
Deliver every
<input type="button" class="minus" value="-">
<input type="text" size="4" class="input-text qty text" title="Qty" value="1" name="quantity" step="1" pattern="[0-9]*" id="delivery_frequency_value" min="1">
<input type="button" class="plus" value="+">
month(s)
</span>
</div>
</label>
</div>
</div>
<div class="add_to_cart_and_learn_more">
<a class="learn_more_after_add_to_cart_button" href="<?php the_permalink(); ?>">Learn More</a>
</div>

How to call a jQuery function on click event in the following scenario?

I'm using PHP, Smarty and jQuery for my website. There is a functionality of showing and hiding an element on a form. The HTML as well as code from jQuery function is as below:
HTML Code:
<div class="c-mega-accord">
<ol class="fnAccordion">
<li>
<a class="fnTrigger" href="#">Practice Sheet Basic Details <span></span></a>
<div class="fnAccContent">
<div class="c-grad-box">
<div class="form-wrapper">
{if $error_msg}<div class="error-info">{$error_msg.error_msgs}</div>{/if}
<form name="manage_practice_sheet" id="manage_practice_sheet" action="practice_sheet.php" method="post">
<input type="hidden" name="op" id="op" value="{$op}" />
<input type="hidden" name="sheet_type" id="sheet_type" value="{$sheet_type}" />
<input type="hidden" name="form_submitted" id="form_submitted" value="yes" />
<input type="hidden" name="practice_sheet_id" id="practice_sheet_id" value="{$practice_sheet_id}" />
<input type="hidden" name="hidden_practice_sheet_category_id" id="hidden_practice_sheet_category_id" value="{$practice_sheet_category_id}" />
<input type="hidden" name="practice_sheet_id" id="practice_sheet_id" value="{$practice_sheet_id}" />
<p class="form-info fl-right">* Mandatory fields</p>
<ul>
<li>
<label>{'Category'|signal_on_error:$error_msg:'practice_sheet_category_id'}<span class="reqd">*</span></label>
<div class="form-element">
<select name="practice_sheet_category_id" id="practice_sheet_category_id" <!--onChange="get_subcategory_by_category('{$control_url}modules/category/manage_category.php', this.value, 'get_subcategory_by_category', '#practice_sheet_sub_category_id');"--> >
<option value="">Select</option>
{if $all_parent_categories}
{foreach from=$all_parent_categories item="parent_category"}
<option value="{$parent_category.category_id}" {if $data.practice_sheet_category_id==$parent_category.category_id || $practice_sheet_category_id==$parent_category.category_id} selected="selected"{/if}>{$parent_category.category_name}</option>
{/foreach}
{/if}
</select>
</div>
</li>
<li>
<label>{'Practice Sheet Name'|signal_on_error:$error_msg:'practice_sheet_name'}<span class="reqd">*</span></label>
<div class="form-element">
<input class="" type="text" name="practice_sheet_name" id="practice_sheet_name" value="{$data.practice_sheet_name}" maxlength="50">
</div>
</li>
<li>
<label>Display Date</label>
<div class="form-element">
<input type="text" class="cal fl-left" id="frmDate" name="frmDate" value="{if $data.practice_sheet_display_date !='0' && $data.practice_sheet_display_date !=''}{$data.practice_sheet_display_date}{/if}">
</div>
</li>
<li>
<label>Practice Sheet For</label>
<div class="form-element">
<input class="" type="text" name="practice_sheet_for" id="practice_sheet_for" value="{$data.practice_sheet_for}" maxlength="50">
</div>
</li>
<li>
<label></label>
<div class="form-element">
<!--<input type="submit" value="{$submit_value}" class="c-btn" id="saveAddMore" name="submit">
<input type="button" value="{$cancel_value}" class="c-gray-btn" id="done" name="done" onclick="javascript:window.location.href='{$control_url}modules/practice_sheet/practice_sheet.php?op={$query_string}'"><br/>-->
<span class="c-btn c-continus-btn"><input type="button" name="continus" id="continus" value="Continue" id="" name=""></span>
<span class="c-gray-btn c-cancel-btn"><input type="button" value="Cancel" id="" name=""></span>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</li>
<li>
<a class="fnTrigger" href="#">Select Category <span></span></a>
<div class="fnAccContent">
<div class="c-grad-box">
</div>
</div>
</li>
</ol>
</div>
jQUery Code:
function accordion(){
var li = $(".fnAccordion > li");
li.eq(0).addClass("active");
li.children('.fnAccContent').not(':first').hide();
$(".fnAccordion .fnTrigger").click(function(e){
e.preventDefault();
var numLi = $(this).parent('li').siblings();
if(numLi.length > 0){
$(this).parent('li').siblings().removeClass("active");
var curState = $(this).parent().find(".fnAccContent").css("display");
if(curState == "none"){
$(".fnAccContent").slideUp();
$(this).parent().addClass("active");
$(this).parent().find(".fnAccContent").slideDown();
}
}else{
$(this).parent('li').toggleClass("active");
$(this).parent().find(".fnAccContent").slideToggle();
}
})
}
$(document).ready(function(){
accordion();
})
Now the functionality of hide/show is working fine when I click on following two elements:
<a class="fnTrigger" href="#">Practice Sheet Basic Details <span></span></a>
<a class="fnTrigger" href="#">Select Category <span></span></a>
Actually I want to make this functionality work on Continue button(following is the HTML code snippet for it):
<input type="button" name="continus" id="continus" value="Continue" id="" name="">
I tried to make it work on Continue button by applying the class fnTrigger but it didn't work. Can you help me in this regard? Thanks in advance.
If you want the function to be triggered when both the classes are present,
you use
$(".fnAccordion .fnTrigger").click(function(){
//Your code here
});
If you want the function to get triggered when element of either class is clicked, use a "," to separate the classes.
$(".fnAccordion, .fnTrigger").click(function(){
//Your code here
});
Your check only checks for the fnTrigger class INSIDE an element with the class fnAccordion
$(".fnAccordion .fnTrigger").click(function(e){});
Is your button inside the element with the class fnAccordion?

submit form data into iframe via post [file upload]

UGH.
Hi.
I have a form. I'd like to know how/if I could submit this form to an iFrame that has the page that will handle the file upload/naming.
If I try even something simple like post an input/text to the form, nothing happens (the handler is set to echo the $_POST). I have tried setting the iframe name/id et. al. and setting the form target to the respective iframe name/id. When I hit submit, the iframe just sits there like a dummy. WTF am I doing wrong?
Thx.
<form action="/clients/testAddTrans/<?=$clientID?>" id="reportEdit" class="EditName" method="POST" target="transFrame">
<div class="inputDiv">
<span class="inputLabel">Description:</span>
<span class="textInput">
<input type="text" id="transDesc" name="transDesc" value="" size="40" class=""/>
</span>
</div>
<div class="inputDiv">
<span class="inputLabel">Date:</span>
<span class="textInput">
<input type="text" id="date" name="transDate" value="" size="40" class=""/>
</span>
</div>
<div class="inputDiv">
<span class="inputLabel">File:</span>
<span class="textInput">
<input type="file" id="file" name="transFile" value="" size="40" class=""/>
</span>
</div>
<input name="name_id" type="hidden" value="<?=$itemid?>" />
<input type="submit" value="Submit" name="submit"/>
<input type="button" class="secondaryAction" onclick="hideOverDiv()" value="Close"/>
<div id="overDivNotice" class="overDivNotice" style="display:none"></div>
<iframe action="/clients/testAddTrans/<?=$clid?>" id="transFrame" name="transFrame" style=""></iframe>
</form>
Generated html via firebug:
<div class="content" id="overDivContent"><div class="inputDivContainer">
<fieldset class="inputOverDiv" id="tfa_Names">
<legend><b>Add Transmittal:</b></legend>
<div class="data"><form target="transFrame" method="POST" class="EditName" id="reportEdit" action="/clients/testAddTrans/fsdf1556"><div class="inputDiv"><span class="inputLabel">Description:</span><span class="textInput"><input type="text" class="" size="40" value="" name="transDesc" id="transDesc"/></span></div><div class="inputDiv"><span class="inputLabel">Date:</span><span class="textInput"><input type="text" class="" size="40" value="" name="transDate" id="date"/></span></div><div class="inputDiv"><span class="inputLabel">File:</span><span class="textInput"><input type="file" class="" size="40" value="" name="transFile" id="file"/></span></div><input type="hidden" value="121" name="name_id"/>
</form><br/>
<div align="center" class="actions" id="overDivActions">
<input type="submit" name="submit" value="Submit"/>
<input type="button" value="Close" onclick="hideOverDiv()" class="secondaryAction"/>
</div>
<div style="display: none;" class="overDivNotice" id="overDivNotice">
</div></div>
<iframe style="" name="transFrame" id="transFrame">tyh</iframe>
</fieldset>
</div></div>
I don't know why it is putting the </form> tag where it is.. It is supposed to be after the iframe, but whatever. Does that even matter? Is the iframe supposed to be inside the form?
Nice, I was wrong.. I found the problem.
First use html for write html;
With the code below works:
for 'testSubmitiFrame.html':
<form target="transFrame" method="POST" class="EditName" id="reportEdit" action="testSubmitiFrame.php">
<div class="content" id="overDivContent">
<div class="inputDivContainer">
<fieldset class="inputOverDiv" id="tfa_Names">
<legend><b>Add Transmittal:</b></legend>
<div class="data">
<div class="inputDiv">
<span class="inputLabel">Description:</span>
<span class="textInput"><input type="text" class="" size="40" value="" name="transDesc" id="transDesc"/></span>
</div>
<div class="inputDiv">
<span class="inputLabel">Date:</span>
<span class="textInput"><input type="text" class="" size="40" value="" name="transDate" id="date"/></span>
</div>
<div class="inputDiv">
<span class="inputLabel">File:</span>
<span class="textInput"><input type="file" class="" size="40" value="" name="transFile" id="file"/></span>
</div>
<input type="hidden" value="121" name="name_id"/>
<br/>
<div align="center" class="actions" id="overDivActions">
<input type="submit" name="submit" value="Submit"/>
<input type="button" value="Close" onclick="hideOverDiv()" class="secondaryAction"/>
</div>
<div style="display: none;" class="overDivNotice" id="overDivNotice"></div>
</div>
</fieldset>
</div>
</div>
</form>
<iframe style="" name="transFrame" id="transFrame">tyh</iframe>
for 'testSubmitiFrame.php':
<?php
var_dump($_POST);
?>
Your problem is html syntax. This works.
Apparently, a div or stupid fieldset tag being out of place was preventing the thing from working. I really gotta start checking my code before bothering you nice people.
Thanks anyway.
Your logic appears valid, can you setup a test page?
This page will do what you want, so you may want to look through it and see what may be different from what you are already doing:
http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml
Is the action in the html the php file that will do the processing?
I think it's because of these two lines:
echo "</div>";
echo "</div><br>
You're closing <div> with no opening tags. This is making Firefox close the <form> early - your submit button isn't inside your form, which is why it's not working.
The position of the iframe inside or outside the form doesn't matter - just make sure the rest of the HTML is valid and it should work.

Categories