I've tried to fix this problems for a week now without any success. I am a novice in this area so please bear with me.
I am using TastyIgniter, an online ordering system for food. Before you can add any items to your cart, you have to choose between Delivery or Collection. I have disabled the delivery feature as I only want people to order collection. I still have to press the 'Collection' button before I can do anything else. I need to get rid of this step.
// The buttons are basically radio buttons with a value of "1" and "2", where;
Delivery = 1
Collection = 2
After you press one of the buttons, you declare;
$order_type === '1' or $order_type === '2'
Unfortunately, order type 1 is preselected, not order type 2.
To make this easy for myself after trying to modify the model, controller and button, I am looking for a feature that mimics the push of the button so I then can hide it with CSS.
Button Inspection:
function() { if (typeof this.value !== 'undefined') {
var order_type = this.value;
$.ajax({
url: js_site_url('cart_module/cart_module/order_type'),
type: 'post',
data: 'order_type=' + order_type,
dataType: 'json',
success: function(json) {
if (json['redirect'] && json['order_type'] == order_type) {
window.location.href = json['redirect'];
}
}
});
I would appreciate any help, thank you!
Taken from http://api.jquery.com/trigger
$( "#foo" ).on( "click", function() {
alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );
Apply this to your code if you want to simulate a click.
The event is fired from a click on the label, so this should work:
$('input[name="order_type"][value="2"]').parents('label').trigger('click');
Related
Okay, so this little bit of code either posts and then updates #arrival, or it removes it and replaces it with standard text. One click posts, one click resets. The problem I'm having, and cannot figure out, is that the code as is requires two clicks to do the initial posting, and then one click to remove and one click to post again ad infinitum. But it first requires two clicks to get to working.
Any help would be appreciated.
$(document).ready(function(){
$("#change").click(function(e) {
e.preventDefault();
var data = {};
$.each($('input[name^="u\\["]').serializeArray(), function() {
var vv = this.name.replace(/u/, '' ).replace(/(\[[]\])$/,'');
data[vv] = this.value;
});
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$.ajax({
type : "POST",
cache : false,
url : "napad.php?n=<?=$_GET['n']?>&o=<?=$_GET['o']?>&arrival",
data : {'X': data},
success: function(data) {
$("#arrival").html(data);
}
});
} else {
// even clicks
$('#arrival').contents().remove();
$('#arrival').append('Arrival Time: Normal');
}
$(this).data("clicks", !clicks);
});
});
If you saying you doesnt want it firing 2 times but you want it trigger the event one time clicking.
try to add this on you jquery function.
$("#change").unbind("click").click(function() {
// Your code
});
Let me know if it works. Thanks. :)
for this problem I want to pass along data depending if a checkbox is checked. the data comes from the .on() second paramater.
I want to do something like this. I know it is really messed up. Im not sure how the data work and when to use .trigger()
$(document).on('justData', function(e, data){
console.log(data);
})
$('.justData').on('click', function(){
var insert
dataobj ={
"mike" : 'mikevalue',
"john" : 'johnValue'
}
$("#checkThis").on('change', function(e, data){
if(this.checked){
insert = dataobj.mike
}else{
insert = dataobj.john
}
})
$(this).trigger('justData', insert)
})
I wanted to insert "mikevalue" if the box is checked and "johnvalue" if unchecked.
I'm learning how to use mediators. I think that's when you do $emitter = $({}) so I want to separate event. when the user clicks on the $(.justData) i would have $({}).trigger("Ischecked") something like that I'm confused. If some one can show me how to pass along dynamic data to different events using $emitter .trigger() .on() that would be great.
You're on the right track. This is the simple and clear example given from the jQuery API Docs for handling custom events:
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
Also cleaned up your code a little bit:
$('body').on('justData', function(e, data){
console.log(data);
});
$('.justData').on('click', function(e){
var insert = "",
$checkbox = $('#checkThis'),
data = {
"mike" : 'mikevalue',
"john" : 'johnValue'
};
if($checkbox.prop('checked')){
insert = data.mike;
} else {
insert = data.john;
}
$('body').trigger('justData', insert);
});
So I have this gridview:
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'symptoms-grid',
'selectableRows'=>1, //ability to select one symptom at a time
'dataProvider'=>$model->search(),
'htmlOptions'=>array('id'=>'symptomsSearchgrid'),
'columns'=>array(
'symptomCode',
'title',
'inclusions',
'exclusions',
'symptomCategory',
),
)); ?>
And this javascript....script:
Yii::app()->clientScript->registerScript('search', "
$( document ).ready(function() {
$('#symptomSelectDiv').hide();
$('#categorySelectDropDown').change(function(){
$('#symptomSelectDiv').show();
$('#symptoms-grid').yiiGridView('update', {
data: $(this).serialize()
});
return false;
});
$('#symptomsSearchgrid table tbody tr').on('click', function() {
var firstColVal = $(this).find('td:first-child').html();
$('#symptomToBeSearched').val(firstColVal);
});
});
");
My problem is that I can only either get the
$('#symptoms-grid').yiiGridView('update', {
data: $(this).serialize()
});
function to work or the:
$('#symptomsSearchgrid table tbody tr').on('click', function() {
var firstColVal = $(this).find('td:first-child').html();
$('#symptomToBeSearched').val(firstColVal);
});
one, and it seems quite random too. Basically in order to get the other function to "start working" I have to change the id (either the grid id or the DOM id) of one function to something different for the other function to work (while the other doesn't).
So let's say at first the update function works and the click function doesn't. Then I change the ID of update to something wrong and click works. Then I change the id of update back to the correct one, but it still doesn't work, yet click works. THen I change click to a wrong id and update starts working correctly. But again, if I change click to the correct id it doesn't work.....
Any ideas what I'm doing wrong?
I think your issue is that your are giving your grid two id's one when creating it and one in htmloption.
I have the following javascript when my script is loaded:
var current_selected_note = $('#new_note');
current_selected_note.addClass('hover active');
$('#note-item-lists').on('click', '.list-group-item', function () {
//removes the hover color from the previous selected
current_selected_note.removeClass('hover active');
// sets the currently selected equal to the selected note
current_selected_note = $(this);
// adds the hover active to the currently selected
current_selected_note.addClass('hover active');
//adds the title of the currently selected to the title input field
$('#txt_new_note_title').val($(this).find('Strong').text());
selected_note_id = $(this).get(0).id;
getNote(selected_note_id);
load_comments(selected_note_id);
});
$( "#note-item-lists").find('li').first().trigger( "click" );
Now AFTER this is loaded i click one of my buttons which has the following javascript:
$('#note-item-lists').on('click','.close',function(){
var r = confirm('Are you sure you wish to delete "'+$(this).next('div').find('.new_note_title').text()+'" ?')
if(r == true){
deleteNote($(this));
$( "#note-item-lists").find('li').first().click();
}
})
function deleteNote(button){
var id = button.closest('li').get(0).id;
$.ajax({
type: 'POST',
url: '/solo/ajax_delete',
dataType: 'json',
data: {
id: id
},
success: function (data) {
}
});
button.closest('li').remove();
}
When this happens (i debug it) and the event function is called first 1 time (adding the class correctly) but is then happens immediatly again.
Anyone tried this before?
Try this, It will call one time.
$('#note-item-lists .close').on('click',function(){
alert("Hello");
});
Try using .off()
$('#note-item-lists').on('click', '.list-group-item', function () {
$(this).off(); //add this here
I am New to AJAX and have already asked a few question son this matter, but i have another, I use an AJAX call to auto save a value from a drop down list to database, this works great, however every time i change a value (Their are multiple drop downs with several values each can hold) I want the div to update to reflect the change in value. The AJAX I have is as follows:
<script>
$(document).ready(function(){
$('select').on('change',function () {
var statusVal = $(this).val();
var job_id = $(this).prop('id');
$.ajax({
type: "POST",
url: "saveStatus.php",
data: { statusType : statusVal, jobID: job_id },
success: function(data) {
$('#div1').load('jobs.php #div1', function() {});
}
})
});
});
</script>
So when I change a value in one drop down box (In div1) it refreshs the value, but if i was to change another value in the same or different drop down it no longer refreshs the div or saves the value to my DB, without the reload bit in my AJAX i can change the value in multple fields and it saves, but with the reload part it only happens once
-----EDIT-----
Ok further questioning, I have used
$('#div1').on( 'change', 'select', function( ) {
var statusVal = $(this).val();
var job_id = $(this).prop('id');
$.ajax({
type: "POST",
url: "saveStatus.php",
data: { statusType : statusVal, jobID: job_id },
success: function(data) {
$('#div1').load('jobs.php #div1', function() {});
}
})
});
});
and that works great even for multiple select changes. However what if I have a few selects in a few divs, EG div1, div2 and div3. How can I adapt this code to be able to refresh all divs on a change in any of the divs, or is a case of just having the code 3 times adapted for each div.
-----EDIT-----
Thankyou all, I am able to do this with
$('#div1, #div2').on( 'change', 'select', function( ) { //stuff
Ian
Your listener is bound to the select element, which I'm betting is being blown away and relaced with the load(). Check out event delegation. jQuery makes it easy. Try binding the listener on '#div1'
$('#div1').on( 'change', 'select', function( e ) { //stuff
It should then apply to the refreshed content as well.