I am new to Codeigniter framework. I have a scenario where I have to display radio box and checkbox based on the database value 0 or 1. If the value is 0 then the radio buttons should appear for the particular items and if the value is 1 then display items with the checkboxes so the user can select multiple items. How can I accomplish this task? Right now, I am able to display all items only with checkboxes.
I have added new field in database with the name of multi_select. Here I am saving items with the value of 0 and 1.
Here is my code.
$(document).on('click', '.add_cart_modal', function (e) {
$('.item_attr_div_model').empty();
var it_val = $(this).attr('value');
$data = 'item_id=' + it_val;
var rest_id = $("#restid-" + it_val).val();
$url = '<?= base_url() ?>main/get_item_attributes';
$.ajax({
url: $url,
type: "POST",
dataType: 'json',
data: $data,
success: function (data) {
if (data.item_options != null && data.group_attrib == '1') {
var item_group_data = '';
$.each(data.item_options, function (key, item) {
var item_attrib = '';
if (item.attributes != null) {
$.each(item.attributes, function (key, it_attrbues) {
item_attrib += '<div class="col-lg-4" style="margin-top: 10px;">' +
'<div class="checkbox">' +
'<input id="' + it_attrbues.name + '" type="checkbox" value="' + it_attrbues.id + '" class="options_ids" name="options[]" style="margin-right:5px">' +
if (item.attributes != null) {
item_group_data += + item.group_name +
'' + item_attrib +;
}
});
var item_attr_display =
'<input name="item_id" id="attr_item_id" type="hidden" value="' + data.item_id + '" >' +
'<input name="item_name" id="attr_item_name" type="hidden" value="' + data.item_name + '" >' +
'<input name="item_price" id="attr_item_price" type="hidden" value="' + data.item_price + '" >' +
'<input name="rest_id" id="attr_rest_id" type="hidden" value="' + rest_id + '" >' +
data.item_name + data.item_description + Price +
data.item_price + item_group_data;
$('.item_attr_div_model').append(item_attr_display);
$('#add_cart_modal').modal('show');
} else {
var attribute_ids = '';
post_array =
{
"item_id": $("#id-" + it_val).val(),
"item_name": $('#name-' + it_val).val(),
"item_qty": $("#qty-" + it_val).val(),
"item_price": $("#price-" + it_val).val(),
"rest_id": $("#restid-" + it_val).val(),
"attribute_ids": attribute_ids
}
$.post(base_url + "main/add_item_to_cart", post_array,
function (data) {
var res = jQuery.parseJSON(data);
update_cart_items(res.cart_view, res.total_cost, res.items_count);
$('.whole_div').hide();
});
}
}
});
});
How can I read 0 and 1 value from database for particular items and display radio or checkbox based on their value?
Change your $.each function as follow
$.each(item.attributes, function (key, it_attrbues) {
var ty = 'radio';
if(it_attrbues.multi_select == '1') //if the value is 1 then it will pass checkbox
{
ty = 'checkbox';
}
item_attrib += '<div class="col-lg-4" style="margin-top: 10px;">' +
'<div class="checkbox">' +
'<input id="' + it_attrbues.name +
'" type="'+ty+'" value="' + it_attrbues.id + '" class="options_ids" name="options[]" style="margin-right:5px">' +
'<label style="padding-left: 25px;" class="label-radio oswald-font bold font22"for="' + it_attrbues.name + '">' + it_attrbues.name + ' (' + it_attrbues.price + ')</label>' +
'</div>' +
'</div>';
});
Related
I'm trying add extra content to mybb sceditor using three text area fields but it won't allow me to insert content.
I tried to add a function but cant get it working - help is appreciated!
$.sceditor.command.set('hidep', {
_dropDown: function (editor, caller) {
var $content;
$content = $(
'<div>' +
'<div>' +
'<label for="hidep">' + editor._('Amount of gems') + '</label> ' +
'<input type="text" id="hidep" />' +
'</div>' +
'<div>' +
'<label for="des">' + editor._('Content') + '</label> ' +
'<input type="text" id="des" />' +
'</div>' +
'<div>' +
'<label for="destitle">' + editor._('Title') + '</label> ' +
'<input type="text" id="destitle" />' +
'</div>' +
'<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>' +
'</div>'
);
$content.find('.button').on('click', function (e) {
var val = $content.find('#hidep').val(),
description = $content.find('#des').val();
descriptiontitle = $content.find('#destitle').val();
if (val) {
// needed for IE to reset the last range
$(editor).trigger('focus');
if (!editor.getRangeHelper().selectedHtml() || description) {
if (!description)
description = val;
editor.insert('[hide cost="' + val + '" ' + destitle + ']' + description + '[/hide]');
} else
editor.execCommand('createlink', 'mailto:' + val);
}
editor.closeDropDown(true);
e.preventDefault();
});
editor.createDropDown(caller, 'inserthidep', $content.get(0));
},
exec: function (caller) {
$.sceditor.command.get('hidep')._dropDown(this, caller);
}
});
And it should look like this!
[hide cost="50" title="Good Stuff"]This is hidden content[/hide]
I want to replace the whole item inside the id div instead of adding it.I am not familliar with javascript/ajax/jquery and i dont know which file i will edit.
This is the sample code given by pusher.com in activity-stream tutorial
$(function() {
var pusher = new Pusher('pusher key');
var channel = pusher.subscribe('site-activity');
var streamer = new PusherActivityStreamer(channel, '#replace_item');
});
html id that will replace all item inside the div
<div id="replace_item">ITEMS</div>
This is the javascript function
function PusherActivityStreamer(activityChannel, ulSelector, options) {
var self = this;
this._email = null;
options = options || {};
this.settings = $.extend({
maxItems: 10
}, options);
this._activityChannel = activityChannel;
this._activityList = $(ulSelector);
this._activityChannel.bind('activity', function(activity) {
self._handleActivity.call(self, activity, activity.type);
});
this._activityChannel.bind('page-load', function(activity) {
self._handleActivity.call(self, activity, 'page-load');
});
this._activityChannel.bind('test-event', function(activity) {
self._handleActivity.call(self, activity, 'test-event');
});
this._activityChannel.bind('scroll', function(activity) {
self._handleActivity.call(self, activity, 'scroll');
});
this._activityChannel.bind('like', function(activity) {
self._handleActivity.call(self, activity, 'like');
});
this._itemCount = 0;
};
PusherActivityStreamer.prototype._handleActivity = function(activity, eventType) {
var self = this;
++this._itemCount;
var activityItem = PusherActivityStreamer._buildListItem(activity);
activityItem.addClass(eventType);
activityItem.hide();
this._activityList.prepend(activityItem);
activityItem.slideDown('slow');
if(this._itemCount > this.settings.maxItems) {
this._activityList.find('li:last-child').fadeOut(function(){
$(this).remove();
--self._itemCount;
});
}
};
PusherActivityStreamer.prototype.sendActivity = function(activityType, activityData) {
var data = {
activity_type: activityType,
activity_data: activityData
};
if(this._email) {
data.email = this._email;
}
$.ajax({
url: 'php/trigger_activity.php', // PHP
// url: '/trigger_activity', // Node.js
data: data
})
};
PusherActivityStreamer._buildListItem = function(activity) {
var li = $('<li class="activity"></li>');
li.attr('data-activity-id', activity.id);
var item = $('<div class="stream-item-content"></div>');
li.append(item);
var imageInfo = activity.actor.image;
var image = $('<div class="image">' +
'<img src="' + imageInfo.url + '" width="' + imageInfo.width + '" height="' + imageInfo.height + '" />' +
'</div>');
item.append(image);
var content = $('<div class="content"></div>');
item.append(content);
var user = $('<div class="activity-row">' +
'<span class="user-name">' +
'<a class="screen-name" title="' + activity.actor.displayName + '">' + activity.actor.displayName + '</a>' +
//'<span class="full-name">' + activity.actor.displayName + '</span>' +
'</span>' +
'</div>');
content.append(user);
var message = $('<div class="activity-row">' +
'<div class="text">' + activity.body + '</div>' +
'</div>');
content.append(message);
var time = $('<div class="activity-row">' +
'<a href="' + activity.link + '" class="timestamp">' +
'<span title="' + activity.published + '">' + PusherActivityStreamer._timeToDescription(activity.published) + '</span>' +
'</a>' +
'<span class="activity-actions">' +
'<span class="tweet-action action-favorite">' +
'<span><i></i><b>Like</b></span>' +
'</span>' +
'</span>' +
'</div>');
content.append(time);
return li;
};
If you want to replace the entire div instead of adding things to it, I think this will work.
Change
this._activityList.prepend(activityItem);
for
this._activityList.empty();
this._activityList.prepend(activityItem);
".prepend" adds the activityItem to the top of the div as you know, but ".empty()" will clear everything previously in the div before you do this.
I don't know why but I have a piece of code which works on my system but is not working on WAMP or Shared server.
Below is my piece of code :-
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
(function($) {
$.ajax({
url:"select2.json",
type:"GET",
dataType:"json",
success:function(data){
var selectedDepartment, selectedSubproj;
$.fn.changeType = function() {
var options_projname = '<option>Select<\/option>';
$.each(data, function(i, d) {
options_projname += '<option value="' + d.projname + '">' + d.projname + '<\/option>';
});
$("select#projname", this).html(options_projname);
$("select#projname").change(function() {
var index = $(this).get(0).selectedIndex;
var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
selectedDepartment = d;
var options = '';
if (index > 0) {
options += '<option>Select<\/option>';
$.each(d.subproj, function(i, j) {
options += '<option value="' + j.title + '">' + j.title + '<\/option>';
});
} else {
options += '<option>Select<\/option>';
}
$("select#subproj").html(options);
});
$("select#subproj").change(function() {
var index = $(this).get(0).selectedIndex;
selectedSubproj = selectedDepartment.subproj[index -1];
var options = '';
if (index > 0) {
$.each(selectedSubproj.unit, function(i, b) {
//options += '<option value="' + b.name + '">' + b.name + '<\/option>';
options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
});
} else {
options += '<option>Select<\/option>';
}
$("#unit").html(options);
});
};
}
});
})(jQuery);
$(document).ready(function() {
$("form#search").changeType();
});
</script>
<form id="search" action="" name="search">
<select name="projname" id="projname">
<option>Select</option>
</select>
<select name="subproj" id="subproj">
<option>Select</option>
</select>
<div name="unit" id="unit">
</div>
</form>
</body>
</html>
I am getting the following error when I run in WAMP or Shared Server.
http://s8.postimg.org/vj19w76v9/error.png
But it runs fine if I run it like a normal html file on my pc.
My JSON is also rendering very well so I know that there is no issue with it.
I tried clearing cache and all the good stuff but its eating my brain off...
Would be glad if someone could help.
Thanks in advance... Cheers...
The problem is that you are defining your changeType plugin in your success callback of the ajax call. Thus, at the time the document is ready, when you call that plugin, it will be undefined. You will need to define the plugin first and think of a way to pass the data variable you get from the ajax call by parameter. I believe something rough like this should work:
(function ($) {
$.fn.changeType = function (data) {
var selectedDepartment, selectedSubproj;
var options_projname = '<option>Select<\/option>';
$.each(data, function (i, d) {
options_projname += '<option value="' + d.projname + '">' + d.projname + '<\/option>';
});
$("select#projname", this).html(options_projname);
$("select#projname").change(function () {
var index = $(this).get(0).selectedIndex;
var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
selectedDepartment = d;
var options = '';
if (index > 0) {
options += '<option>Select<\/option>';
$.each(d.subproj, function (i, j) {
options += '<option value="' + j.title + '">' + j.title + '<\/option>';
});
} else {
options += '<option>Select<\/option>';
}
$("select#subproj").html(options);
});
$("select#subproj").change(function () {
var index = $(this).get(0).selectedIndex;
selectedSubproj = selectedDepartment.subproj[index - 1];
var options = '';
if (index > 0) {
$.each(selectedSubproj.unit, function (i, b) {
//options += '<option value="' + b.name + '">' + b.name + '<\/option>';
options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
});
} else {
options += '<option>Select<\/option>';
}
$("#unit").html(options);
});
};
})(jQuery);
$(document).ready(function () {
$.ajax({
url: "select2.json",
type: "GET",
dataType: "json",
success: function (data) {
$("form#search").changeType(data);
}
});
});
I am using jQuery (1.9.1) with jQuery Mobile (1.3.0). I am having trouble with the Reflow table in JQM. When I AJAX to get my JSON data from a script to add more rows to my table, the reflow table headings are not generated after I trigger a refresh and create on the table. Here is my code:
HTML/PHP
'<table data-role="table" id="itemTable" data-mode="reflow" class="ui-responsive table-stroke" style="display:table;">' .
'<thead>' .
'<tr>' .
'<th data-priority="1">Location</th>' .
'<th>Name</th>' .
'<th data-priority="3">Barcode</th>' .
'<th data-priority="4">Needed</th>' .
'<th data-priority="5">Scanned</th>' .
'</tr>' .
'</thead>' .
'<tbody>' .
$tableData .
'</tbody>' .
'</table>' .
JavaScript
$('.getOrder, .getStoreOrder').on('vclick', function(e) {
e.preventDefault();
var sel = this;
var theLink = $(this).attr('href');
if (activeOrder === true) {
return false;
}
$.ajax({
url: 'ajax.php',
data: {
pa: ($(sel).hasClass('getStoreOrder') ? 'store' : '') + 'order'
},
dataType: 'json',
beforeSend: function() {
$.mobile.showPageLoadingMsg();
$('#itemTable tbody').html('');
$('#leftPanel ul li').not(':first-child').remove();
},
success: function(data) {
testVar = data;
var i;
for (i=0; i <= data.length -1; i++) {
$('#itemTable tbody').append( '' +
'<tr id="item' + (i+1) + '">' +
'<td><span>' + data[i].Location + '</span></td>' +
'<td><a onclick="showImageOverlay(\'' + data[i].Image + '\');">' + data[i].Name + '</a></td>' +
'<td>' + data[i].Barcode + '</td>' +
'<td>' + data[i].Qty + '</td>' +
'<td>0</td>' +
'</tr>' +
'');
$('#leftPanel ul').append( '' +
'<li>' +
'<a href="#item' + (i+1) + '" class="itemLink" onclick="changeItem(\'item' + (i+1) + '\')">' +
'Item ' + (i+1) +
'</a>' +
'</li>' +
'');
}
$('#itemTable').trigger('refresh');
$('#itemTable').trigger('create');
$('#leftPanel #leftUl').listview('refresh');
},
complete: function() {
$('#rightPanel', '.ui-page-active').panel('close');
$.mobile.hidePageLoadingMsg();
//pageChange(theLink);
}
});
});
The AJAX does succeed and add my rows to the table how I want them to. My question is how do I trigger JQM to add the reflow column names.
I know that I can use <b class="ui-table-cell-label">Column Name</b> to my row appends to add the column names but I want it done dynamically so I don't have to change the jQuery when I change my HTML.
Thank you.
In my opinion its preferable to do like this: $('#tableContainer').load('revisedTable.php?json=yourJsonString');
That way you're doing the table layout in php rather than javascript.
Figured it out. Turns out that jQuery Mobile version 1.3.0 does not have a proper .table('refresh') method implemented. I solved this by upgrading to jQuery Mobile version 1.3.1 which has the proper method I needed.
I have a form that will contain a html table which allows users can add or delete rows from it. That will works fine .
/*add row*/
function add_Items(itemtypeid, itemid, reqqty) {
var mode = 1;
var pstSettings = {
url: 'ajax_Items/' + itemid + '/' + mode
callback: function (data) {
var dyntd = "";
var hidval = "";
var $response = $(data);
var resitmname = $response.filter('#Item_Name').text();
var resitmdesc = $response.filter('#Item_Descrip').text();
dyntd = "<td><label>" + itemid + "</label></td>";
dyntd += "<td><label>" + resitmname + "</label></td>";
dyntd += "<td><label>" + resitmdesc + "</label></td>";
dyntd += "<td><label>" + reqqty + "</label></td>";
hidval += '<input type="hidden" name="itemid" value=' + itemid + ' />';
hidval += '<input type="hidden" name="reqitem" value=' + reqqty + ' />';
dyntd += '<td>' + hidval + '<input type="button" name="min" class="minus" value="-" />';
$('.item-result-table tr:last').after('<tr>' + dyntd + '</tr>');
}
};
post_Call(pstSettings);
}
}
/* delete row */
$(document).ready(function () {
$('.item-result-table').delegate('.minus', 'click', function (e) {
$(this).parent().parent().remove();
});
});
But now my problem is how to submit the html table in a form, because of all are html tags not input type tags . I have added a hidden tag . But it also creates problem that it only takes the first element , others are ignored. Is any other method existing to submit this html table data?
The reason you are only getting one input is because you defined it wrong, you need to define it as array:
<input type="hidden" name="itemid[]" value=' + itemid + ' />
<input type="hidden" name="reqitem[]" value=' + reqqty + ' />'
and then in PHP:
$_POST['itemid'][0];
I think that you could use the $.ajax jquery function. You can serialize all your inputs in the form like this:
$("#btn_submit").on('click', function() {
$.ajax({
url: $(this).closest("#div_content").find("#form").attr( 'action' ),
type: 'post',
data: $(this).closest("#div_content").find("#form").serialize(),
}).done( function(msg) {
//console.log("ok");
}).fail( function(jqXHR, textStatus) {
//console.log("fail");
});
});
With the "serialize" you can send all the variables and on the controller you can read the variables with $_POST and the name of the input.