In selectize, I wont call event, but is it don't working
jquery event Working,
Selectize event don't working
Help please.
<div><select id='select'>
<option value="0">Item 0</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
$(function () {
$('select').on('change', function () {
alert("Original input event: Change");
});
$('select').selectize({
onChange: function () {
alert("Selectize event: Change");
}
});
// this triggers an the event
$('#select').trigger( "change" );
});
http://jsfiddle.net/6zyums3d/9/
$('select').selectize({
onInitialize: function() {
this.trigger('change', this.getValue(), true);
},
onChange: function(value, isOnInitialize) {
alert('Selectize changed: ' + value);
}
});
Make sure that you passed value parameter to the change callback. Otehrwise it would be undefined
This is what worked for me with respect to triggering a change event on the select element itself.
$('select').selectize({
onChange: function() {
this.$input[0].dispatchEvent(new Event("change"))
}
})
Try to trigger the event like this:
$('#select')[0].selectize.trigger( "change" );
Trigger like this,
$('#select').selectize({
onChange: function () {
alert("Selectize event: Change");
}
});
// this triggers an the event
$('#select').trigger( "change" );
Related
I would like to use an AJAX call (via jQuery) to change the HTML of a widget during the upcast function of a CKEditor widget. Here is what I have tried:
CKEDITOR.plugins.add('mywidget', {
requires: 'widget',
icons: 'mywidget',
init: function (editor) {
editor.widgets.add('mywidget', {
button: 'My widget',
template: '<p class="mywidget">Initial text.</p>',
allowedContent: 'p(!mywidget)',
upcast: function (element) {
if (element.hasClass('mywidget')) {
element.setHtml('After upcasting.');
$.get('http://example.com')
.done(function (response) {
element.setHtml('Updated text after AJAX.');
});
return true;
}
return false;
},
});
}
});
When the widget is first instantiated, as expected, it says:
"Initial text."
After I click "Source" and then click "Source" again, as expected again, the text has changed to:
"After upcasting"
However, when the AJAX request comes back, the text does not change to "Updated text after AJAX".
Does anyone know how I can get at the element from inside the AJAX callback? If it is too late to access the element from the AJAX callback, is there any way to use the response from the callback to retroactively edit the markup of the already-upcasted widget? Thank you!
$.get() is asynchronous so the .done part is called after the upcasting had already completed. Use $.ajax() instead and set async: false.
The modified widget code:
CKEDITOR.plugins.add('mywidget', {
requires: 'widget',
icons: 'mywidget',
init: function (editor) {
editor.widgets.add('mywidget', {
button: 'My widget',
template: '<p class="mywidget">Initial text.</p>',
allowedContent: 'p(!mywidget)',
upcast: function (element) {
if (element.hasClass('mywidget')) {
element.setHtml('After upcasting.');
$.ajax({
url: 'http://www.example.com',
async: false,
success: function (result) {
element.setHtml('Updated text after AJAX.');
}
});
return true;
}
return false;
},
});
}
});
I am very new to JQuery - I looked but could not find answers simple enough for my issues...
I have HTML drop down list (generated by a db file) with an ID on a selection common to all lists. It is on this "Add a New" option that I would like to trigger an event that will immediately slide open a div that will allow input & update of a new name to the list.
<select name="NAME" id="NMDROP">
<option value=""></option>
<option value="JOE">Joe</option>
<option value="BOB">Bob</option>
<option id="ADDNM" value="ADD">Add a New Name</option>
</select>
This is the jQuery I am hoping will allow me to call an update pgm.
jQuery(document).ready(function () {
//Jquery for Adding a SalesPerson
$("#ADDNM").click(function () {
if ($(this).is(":clicked")) {
jQuery.ajax({
url: "Update.pgm",
type: "POST",
data: {
"task": "ajax_addsp",
"ajax_add": 'Y',
"NAME": NAME
},
success: function () { alert("success:");
},
error: function () { alert("error on Add a New Name " + data);
}
});
}
});
});
I am confident that many of you will be able to spot my fundamental errors. I am not even sure if this is a click or a change event, I have seen it both ways on this site.
change your code to:
$("#NMDROP").on('change', function () {
if ($(this).val() === 'ADD'){
//rest of code
}
});
DEMO
Instead of using click, use the change event on your dropdown and check if the selected value is "ADD".
$("#NMDROP").on("change", function(e) {
if($("#NMDROP").val() == "ADD") {
//ajax method here
}
});
I've got a problem with the JQuery events in one of my Backbone.Marionette Views. I have defined some click and keyboard events. But some of them are not working. For example I want that the fetch-function is called every time the keyup event is triggered.
So here is the code:
return Backbone.Marionette.ItemView.extend({
tagName: 'div',
template: Template,
events:{
'click .yes': 'yes',
'click .no': 'no',
'keyup #citySearch': 'fetch'
},
yes : function() {
this.close();
},
no : function() {
this.close();
},
initialize: function(){
this.collection = new AreaCollection();
this.collection.on('sync', this.onShow, this);
this.sourceArr = [];
},
onShow: function() {
var that = this;
$('#citySearch').typeahead({
source: that.sourceArr
});
},
fetch: function(ev) {
var that = this;
that.collection.fetch({
data : {
query : $(ev.currentTarget).val(),
type : 'cities'
},
success: function(response) {
for (var i = 0; i < response.length; i++) {
that.sourceArr.push(response.models[i].get('name'));
}
}
});
}
});
But the keyup-Event is never fired. I also tried it with the "change"-event, which is also not working. When i use "keydown" or "keypress" instead then everything is fine and the fetch-function is called correctly.
I also tried to bind the event to that input-field manually in the initialize-function with
$('input#citySearch').bind('keyup',function() {
console.log('keyup');
});
But this is also not working. It only works if I bind the event to the input field within my underscore-Template file. But that couldn't be the solution.
Does anybody have an idea what the problem could be?
I can think of only one reason for this. And that is:
input#citySearch is not part of your itemView. This means you are NOT binding your fetch function to keyup event inside the container element of your view.
If you want to bind to something outside your view, you can trigger an event to the View in which the element resides.
i'm using PhoneGap with JQuery mobile ajax to retrieve some records from a database here's my code !! but unfortunately its not working
can somebody tell me what's wrong
<script>
$(document).ready(function() {
$('#cont').bind('pageshow', function () {
$.get('http://tech-tude.com/freedomwobas/getepisodes.php', function (data) {
$(this).find('div[data-role="content"]').append(data);
});
});
});
</script></head><body ><div data-role="content"></div>
You need to (at least) wait for the device to be ready. Try this:
<script>
function onDeviceReady() {
$('#cont').bind('pageshow', function () {
$.get('http://tech-tude.com/freedomwobas/getepisodes.php', function (data) {
$(this).find('div[data-role="content"]').append(data);
});
});
}
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script></head><body ><div data-role="content"></div>
I have the following code snippet:
$(document).ready(function () {
// bind 'regFormBody' and provide a simple callback function
$('#regFormBody').ajaxForm(function() {
alert("Thank you for your comment!");
});
// validate the #regFormBody form when it is submitted
$("#regFormBody").validate({
submitHandler: function(form) {
alert('form is submitted');
},
rules: {
...
},
messages: {
...
}
});
}
The problem is that after I add the
// bind 'regFormBody' and provide a simple callback function
$('#regFormBody').ajaxForm(function() {
alert("Thank you for your comment!");
});
The form validation doesn't work at all. I always see the message alert('form is submitted') even without entering any information to form.
May you tell me how to solve this problem?
Thank you
You can expand your options object for .ajaxForm(), like this:
$('#regFormBody').ajaxForm({
beforeSubmit: function() {
return $('#regFormBody').valid();
},
success: function() {
alert('Thanks for your comment!');
}
});
This will kick off validation before submitting, and if it's not .valid() it'll stop the submit from happening like you want.