We Keep Coding

chosen-select doesnt work on adding new row from codeigniter-php code through ajax

I am executing an ajax script which loads a view into a div. The view populates some dropdowns from the database. When this view is loaded into the div, chosen-select doesnt work.
If I try to call
$('.chosen-select').chosen('destroy');
$('.chosen-select').chosen();
inside success block of ajax call, it says:
Uncaught TypeError: $(...).chosen is not a function
If we call these functions outside ajax call function block, it has no effect.
Below is my js
function addnewrow()
{
$.ajax({
type: "post",
url: "<?php echo base_url(); ?>" + "mycontroller/myfunction",
success: function(res){
if(res) {
var list = document.querySelectorAll(".newrow");
var last = list[list.length - 1];
last.innerHTML=res;
//$('.chosen-select').trigger('chosen:updated');
var newDiv = document.createElement('div');
newDiv.setAttribute("class", "newrow");
newDiv.setAttribute("id", "newrow");
newDiv.innerHTML = "";
last.insertAdjacentElement("afterend", newDiv);
}
},
error: function(res, status, error) {
alert('Please Refresh the page and Try Again.');
}
});
}
Below is my controller function which prepares the page with dropsowns and pass the result to js
public function myfunction()
{
$data["data1"]=$this->main_model->getdata1();
$data["data2"]=$this->main_model->getdata2();
$data["data3"]=$this->main_model->getdata3();
$this->load->view('myviews/datapage',$data);
}
Below is the target code for reference which needs to be passed to js and then is placed inside newrow
<div class="row">
<br>
<div class="col-sm-2">
</div>
<div class="col-sm-2">
<label>DATALIST 1</label>
<?php
if(isset($data1) && !empty($data1))
{
echo '<select class="chosen-select form-control" id="datalist1" name="datalist1[]" data-placeholder="Choose an data item">
<option value=""> </option>';
foreach($data1 as $s)
{
echo '<option value="'.$s->sno.'">'.$s->dataname.'</option>';
}
echo '</select>';
}
?>
</div>
<div class="col-sm-2" id="itemdetails">
<!--
ON SELECTING AN ITEM IN DATALIST1, FETCH SOME DATA FROM DATABASE ABOUT THAT ITEM AND SHOW IT HERE
-->
</div>
<div class="col-sm-1"></div>
<div class="col-sm-2">
<label>DATALIST 2</label>
<?php
if(isset($data2) && !empty($data2))
{
echo '<select class="chosen-select form-control" id="datalist2" name="datalist2[]" data-placeholder="Choose a Data">
<option value=""> </option>';
foreach($data2 as $s)
{
echo '<option value="'.$s->sno.'">'.$s->dataname.'</option>';
}
echo '</select>';
}
?>
</div>
<div class="col-sm-2">
<label>DATALIST 3</label>
<?php
if(isset($data2) && !empty($data2))
{
echo '<select class="chosen-select form-control" id="datalist3" name="datalist3[]" data-placeholder="Choose a Data">
<option value=""> </option>';
foreach($data2 as $s)
{
echo '<option value="'.$s->sno.'">'.$s->dataname.'</option>';
}
echo '</select>';
}
?>
</div>
<div class="col col-sm-1">
<br>
<div class="btn btn-primary btn-block mt-4" name="removerows" onclick="removethisrow(this);"><i class="fa fa-minus" aria-hidden="true"></i></div>
</div>
</div>
UPDATE
I tried using 3.3.1 version of JQuery, 1.8.7 version of chosen, 4.0.6-rc.0 version of select2 in place of chosen and I face the same issues everywhere.

Try adding setTimeOut() to the chosen initialisation as follows.
function addnewrow()
{
$.ajax({
type: "post",
url: "<?php echo base_url(); ?>" + "mycontroller/myfunction",
success: function(res){
if(res) {
var list = document.querySelectorAll(".newrow");
var last = list[list.length - 1];
last.innerHTML=res;
setTimeOut(function() {
$('.chosen-select').trigger('chosen:updated');
}, 1000);
var newDiv = document.createElement('div');
newDiv.setAttribute("class", "newrow");
newDiv.setAttribute("id", "newrow");
newDiv.innerHTML = "";
last.insertAdjacentElement("afterend", newDiv);
}
},
error: function(res, status, error) {
alert('Please Refresh the page and Try Again.');
}
});
}

hide div from div when there is no search result

I've tried so many methods from stackoverflow and other websites but whenever i succeed in hiding the div. No search result is displayed at all.
I've tried the :empty selector and fiddling around with the php code and js code. but since i'm very new to this i just can't seem to crack the error. What am i doing wrong?
My HTML
<div class='search'>
<form class="searchbox" action='index.php' method='post' autocomplete='off'>
<input type='text' name='search' class='searchform' placeholder='Søg efter skole...' onkeyup="searchq();">
</form>
<div id="output"></div>
</div>
PHP
<?php
include("connection.php");
$output = '';
//collect
if(isset($_POST['searchVal'])) {
$searchq = $_POST['searchVal'];
$searchq = preg_replace("#[^a-zA-Z0-9æøå]#i"," ", $searchq);
$query = mysqli_query($mysqli, "SELECT * FROM `products` WHERE name LIKE '%$searchq%'") or die("could not search");
$count = mysqli_num_rows($query);
if($_POST['searchVal'] == NULL) {
$output = '';
} else {
while($row = mysqli_fetch_array($query)) {
$name = $row['name'];
$id = $row['id'];
$output .= ''.$name.'<br>';
}
}
}
echo "<div class='output'>$output</div>";
?>
And JS
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("search.php", {
searchVal: searchTxt
}, function(output) {
$("#output").html(output);
});
}

HTML
<div class='search'>
<form class="searchbox" action='index.php' method='post' autocomplete='off'>
<input type='text' name='search' class='searchform' placeholder='Søg efter skole...' onkeyup="searchq();">
</form>
<div id="output" style="display: none;"></div>
</div>
PHP
.....
echo $output;
JS
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("search.php", {
searchVal: searchTxt
}, function(output) {
$("#output").html(output);
if(output.length > 0) {
$("#output").show();
}
});
}

Disabled form submit button when textarea is empty

This is a wp front-end post submit the form. Title and content area is required to fill, if not submit button is not clickable. The required title is OK for me but I need to make content area optional. And I believe it's done by JavaScript
I can not find how to change text area to optional or what I found did not work. What should I change here
JavaScript:
* set validate form condition
*/
this.submit_validator = $("form#submit_question").validate({
rules : {
post_title : "required",
question_category : "required",
post_content : "required",
},
messages: {
post_title : qa_front.form_auth.error_msg,
question_category : qa_front.form_auth.error_msg,
post_content : qa_front.form_auth.error_msg,
}
});
if(ae_globals.user_confirm && currentUser.register_status == "unconfirm"){
AE.pubsub.trigger('ae:notification', {
msg: qa_front.texts.confirm_account,
notice_type: 'error',
});
return false;
}
if(currentUser.ID == 0){
AE.pubsub.trigger('ae:notification', {
msg: qa_front.texts.require_login,
notice_type: 'error',
});
Another JavaScript
// initialize modal question
initialize: function() {
this.blockUi = new AE.Views.BlockUi();
},
submitReport: function(event){
event.preventDefault();
var view = this,
form = $(event.currentTarget),
message = form.find('textarea#txt_report').val(),
data = form.serializeObject(),
$button = form.find("input.btn");
this.model.set('do_action', 'report');
this.model.save('data',data, {
beforeSend: function() {
if( message == '' ){
AE.pubsub.trigger('ae:notification', {
msg: qa_front.form_auth.error_msg,
notice_type: 'error',
});
return false;
}
view.blockUi.block($button);
},
success: function(result, status, jqXHR) {
view.blockUi.unblock();
if(status.success) {
view.closeModal();
AE.pubsub.trigger('ae:afterReport', {
msg: status.msg,
notice_type: 'success'
});
view.stopListening(AE.pubsub, 'ae:afterReport');
}
else{
AE.pubsub.trigger('ae:notification', {
msg: status.msg,
notice_type: 'error',
});
}
$("form#report_form")[0].reset();
},
});
},
setModel : function (model) {
this.model = model;
},
});
}
One more JavaScript:
cbUploaded: function(up, file, res) {
if (res.success == true) {
var textarea = $(upload_textarea);
var post_content = textarea.val();
$('.body-poll, .body-question').each(function(){
if(!$(this).hasClass('hide')){
console.log($(this).data('name'));
if($(this).data('name') == 'poll'){
tinymce.get('insert_poll').execCommand('mceInsertContent', false, "[img]" + res.data + "[/img]");
}else{
tinymce.get('post_content').execCommand('mceInsertContent', false, "[img]" + res.data + "[/img]");
}
}
})
post_content = post_content + '[img]'+ res.data +'[/img]';
textarea.val(post_content);
} else {
AE.pubsub.trigger('ae:notification', {
'notice_type' : 'error',
'msg' : res.msg
})
view.blockUi.unblock();
}
},
beforeSend: function() {
view.blockUi.block($upload_image_button);
},
success: function() {
view.blockUi.unblock();
}
});
},
/*
* Show notification
*/
showNotice: function(params) {
var view = this;
// remove existing notification
$('div.notification').remove();
var notification = $(view.noti_templates({
msg: params.msg,
type: params.notice_type
}));
FORM:
<?php
define( 'MOBILE_PATH', dirname(__FILE__) );
/**
*
* TEMPLATE FILTER QUESTIONS FOR MOBILE
* #author ThaiNT
* #since 1.0
*
**/
if( !function_exists('qa_mobile_submit_questions_form')){
function qa_mobile_submit_questions_form(){
global $current_user;
$role = get_user_role($current_user->ID);
$privi = qa_get_privileges();
?>
<section class="post-question-form-wrapper">
<div class="container no-padding">
<div class="tabs-title">
<ul>
<li><span class="title-bar-tab active" id="tab-question"><?php _e('Ask a Question', ET_DOMAIN);?></span></li>
<?php if(ae_get_option('poll_maker') !=="0") { ?>
<li><span class="title-bar-tab" id="tab-poll"><?php _e('Create a Poll', ET_DOMAIN);?></span></li>
<?php } ?>
</ul>
</div>
<div class="form-active-question">
<div class="body-question" data-name="question">
<form id="submit_question" action="">
<input type="hidden" id="qa_nonce" name="qa_nonce" value="<?php echo wp_create_nonce( 'insert_question' ); ?>">
<input id="add_tag_text" type="hidden" value="<?php printf(__("You must have %d points to add tag. Current, you have to select existing tags.", ET_DOMAIN), $privi->create_tag ); ?>" />
<div class="form-post">
<input type="text" name="post_title" id="question_title" placeholder="<?php _e("Your Question", ET_DOMAIN) ?>">
<span id="charNum"><?php echo ae_get_option('max_width_title', 150);?></span>
</div>
<div class="form-post">
<div class="select-categories-wrapper">
<div class="select-categories">
<option value=""><?php _e("Select Category",ET_DOMAIN) ?></option>
<?php
$terms = get_terms( 'question_category', array('hide_empty' => 0, 'orderby' => 'term_group' ) );
$value_type = 'slug';
foreach ($terms as $term) {
if($term->parent == 0){
if($value_type == 'slug') {
echo "<option value='".$term->slug."'>";
} elseif($value_type == 'id') {
echo "<option value='".$term->term_id."'>";
}
echo $term->name;
echo "</option>";
foreach ($terms as $value) {
if($term->term_id == $value->parent){
if($value_type == 'slug') {
echo "<option value='".$value->slug."'>";
} elseif($value_type == 'id') {
echo "<option value='".$value->term_id."'>";
}
echo "--".$value->name;
echo "</option>";
}
}
}
}
?>
</select>
</div>
</div>
</div>
<?php if(ae_get_option('ae_upload_images')){ ?>
<div class="form-post container_upload">
<div class="upload_image" id="mobile_images_upload_container">
<i class="fa fa-image"></i><?php _e("Insert Image", ET_DOMAIN); ?>
<span class="et_ajaxnonce" id="<?php echo wp_create_nonce( 'et_upload_images' ); ?>"></span>
<span id="mobile_images_upload_text">
<?php
global $max_file_size;
printf(__("Size must be less than < %sMB.", ET_DOMAIN),$max_file_size);
?>
</span>
</div>
</div>
<?php } ?>
<div class="form-post">
<textarea name="post_content" id="" cols="30" rows="10" placeholder="<?php _e("Your Description", ET_DOMAIN) ?>"></textarea>
</div>
<div class="form-post">
<input data-provide="typeahead" type="text" name="" id="question_tags" placeholder="<?php _e('Tag(max 5 tags)',ET_DOMAIN) ?>" />
</div>
<ul class="post-question-tags" id="tag_list"></ul>
<?php if(ae_get_option('gg_question_captcha') && $role != 'administrator'){ ?>
<div class="clearfix"></div>
<div class="container_captcha">
<div class="gg-captcha form-group">
<?php ae_gg_recaptcha(); ?>
</div>
</div>
<?php } ?>
<div class="group-btn-post">
<div class="container">
<div class="row">
<div class="col-xs-5 no-pad-left"><span class="text"><?php _e("Ask a Question", ET_DOMAIN) ?></span></div>
<div class="col-xs-7 text-right">
<button type="submit" class="submit-post-question"><?php _e("Submit", ET_DOMAIN) ?></button>
<?php _e("Cancel", ET_DOMAIN) ?>
</div>
</div>
</div>
</div>
</form>
</div>
<?php
/**

Ajax code not working in safari and firefox

Ajax code for language switching from database is not working in safari and Firefox, but its perfectly working on chrome and edge. Safari doesn't respond to ajax call but in firefox it only work after a lot of attempts to change language.
My code is
<?php
session_start();
if($_SESSION)
{
$bid=$_SESSION['latest'];
}
else
{
$bid=1;
}
?>
<select name="sources" id="language_id" onclick="" onchange="location.reload();langchange();">
<?php
$language = mysqli_query($link, "select * from language_reference");
while ($lang = mysqli_fetch_array($language)) {
?>
<option value="<?php echo $lang['lang_id']; ?>"
<?php
if($lang['lang_id']==$bid)
{
echo 'selected="selected"' ;
}
?>
><?php echo $lang['lang_name']; ?>
</option>
<?php } ?>
</select>
<div class="row" >
<?php
$result = mysqli_query($link, "SELECT * FROM category AS c INNER JOIN category_language AS cl ON c.id=cl.category_id where parent_id IS NULL && lang_id='1' ");
$var = 0;
while ($row = mysqli_fetch_array($result))
{
?>
<div class="col-md-3 col-sm-3 col-xs-6 hvr-shrink" style="position: relative; margin-top: 50px;">
<a href="#" style="text-decoration: none;">
<div>
<img src="admin/uploads/category/<?php echo $row['cat_home_image']; ?>" class="img-responsive center-block" width="50px" />
<p class="category-caption" style="padding-top: 20px; text-align: center;" id="cat_desc<?php echo $var; ?>"></p>
</div>
</a>
</div>
<?php
$var++;
}
?>
ajax script
<script>
function langchange() {
var language_id = $('#language_id').val();
$.ajax({
type: "POST",
url: "ajax_lang_change.php",
data: "id=" + language_id,
success: function (value)
{
var data = value.split("|_,_|");
for (var i = 0; i < data.length; i++) {
$("#cat_desc" + i).html(data[i]);
}
}
});
$.ajax({
type: "POST",
url: "ajax_get_session.php",
data: "bid=" + language_id,
success: function (value) {
var data = value;
}
});
}
$(window).ready(function () {
langchange()
});
</script>
php script to get data from db
ajax_lang_change.php
<?php
include 'db_connect.php';
$id = $_POST['id'];
$result = mysqli_query($link, "SELECT * FROM category AS c INNER JOIN category_language AS cl ON c.id=cl.category_id where parent_id IS NULL && lang_id='$id'");
while($row=mysqli_fetch_array($result))
{
echo $row['category_description']."|_,_|";
}
?>
ajax_get_session.php
<?php
include 'db_connect.php';
session_start();
$bid = $_POST['bid'];
$_SESSION['latest']=$bid;
if(isset($_SESSION['latest']))
{
echo 'success';
}
else
{
echo 'failed';
}
?>
is there anyway to solve this problem? should I have to write ajax script for various browsers?

JS code working in chrome and IE, not in safari and firefox

I have the below js code that is working in chrome and IE but not safari and firefox. In both cases, the beforeSend: function works, but the success function does not work. Is this a problem with the CSS or am I missing something in the javascript?
---JS----
$("#updateBidButton").click(function () {
var bid_amount = document.getElementById("auction_bid_input").value;
var item_id = "<?php echo $this->item['id']?>";
var current_bid = "<?php echo $this->item['current_bid']?>";
var url_view = "<?php echo $this->item['url_view']?>";
$.ajax({
type: 'post',
url: "?module=items&controller=index&action=submitBid",
dataType: "text",
data: 'bid_amount=' + bid_amount + '&item_id=' + item_id + '&current_bid=' + current_bid + '&url_view=' + url_view,
beforeSend: function () {
$('.auction_box').animate({
'backgroundColor': '#ffdead'
}, 400);
},
success: function (result) {
if (result == 'ok') {
$.get(window.location.href, function (data) {
$('.auction_box').animate({
'backgroundColor': '#A3D1A3'
}, 400);
});
} else {
alert(result);
$('.auction_box').animate({
'backgroundColor': '#FFBFBF'
}, 400);
}
}
});
});
Here is the html:
<form action="" method="post">
<div id="<?php echo $this->item['id']; ?>">
<div class="auction_bid_box">
<label for="auction_bid_input">
<!-- Starting bid EXISTS -->
<?php if ($this->item['bid_count'] >= '1') { ?>
You have until <?php echo $this->data['item']['auction_start']; ?> to update the current bid.
<!-- Starting bid is MISSING-->
<?php } else { ?>
You have until <?php echo $this->data['item']['auction_start']; ?> to enter a starting bid.
<?php } ?>
</label>
<span class="auction_bid_container">
<input id="auction_bid_input" type="text" maxlength="12"
class="middle nmr event-clear-focus"
name="bid_amount" value="Enter Bid"/>
<input id="updateBidButton" type="submit"
value="<?php echo $this->translate('Update'); ?>"
class="button grey-button num-items-button"/>
</span>
</div>
</div>
</form>