We Keep Coding

dynamically add/remove image in vue.js

var loaderGif = "https://www.tietennis.com/img/loaders/LoaderIcon.gif"
var processingImageUrl = '<img id="imgProcessing" src="' + loaderGif + '" />'
$(document).on("click", "input[name='PermissionID']", function() {
var PermissionCheckBox = $(this)[0];
$.ajax({
method: "POST",
url: "https://httpbin.org/post",
cache: false,
async: true,
beforeSend: function(xhr, opts) {
$(PermissionCheckBox).after(processingImageUrl);
},
success: function(result) {
$(PermissionCheckBox).parent().find('#imgProcessing').remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
Check me:
<input name="PermissionID" type="checkbox" value="1">
</td>
</tr>
</table>
I was actually trying to convert the jQuery code to vue.js.
I am trying to find a way if I could put the image with checkbox on click in vue.js.
I tried below code, but now sure how could I use event passed from checkbox to add image and remove it
updatePermission(roleModulePermissionID, event) {
}
Can you suggest something for this?

In Vue, you (optimally) don't directly manipulate the DOM. You manipulate the data and configure the template to react to that data according to what you need.
To create multiple rows, use v-for.
So, for instance, instead of adding and removing a "loading image", you would create an <img> whose display depended on some flag from your data, say permission.loading:
<img v-show="permission.loading" :src="loadingImg">
That way, when you set permission.loading to true, the loading image will show. When you set permission.loading to false it will hide.
Since you want to show it while the Ajax is performing, set permission.loading to true before calling the Ajax (the fetch() below) and set permission.loading to false when it completes.
Full demo below.
new Vue({
el: '#app',
data: {
loadingImg: "https://www.tietennis.com/img/loaders/LoaderIcon.gif", // for demo purposes
permissions: [{
id: 1,
label: 'Permission to Take off',
ticked: false,
loading: false,
postURL: "https://httpbin.org/post?take-off" // demo URL
},{
id: 2,
label: 'Permission to Board',
ticked: true,
loading: false,
postURL: "https://httpbin.org/post?board" // demo URL
},{
id: 3,
label: 'Permission to Land',
ticked: false,
loading: false,
postURL: "https://httpbin.org/post?land" // demo URL
}]
},
methods: {
updatePermission(permission) {
permission.loading = true; // set loading and image will be shown
fetch(permission.postURL, {method: "POST", body: {}})
.then(() => permission.loading = false); // setting to false will make it disappear
}
}
})
img { height: 17px; margin-bottom: -1px; }
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<tr v-for="permission in permissions">
<td>
<label>
{{ permission.label }}:
<input name="PermissionID" type="checkbox" :value="permission.id" #change="updatePermission(permission)" v-model="permission.ticked" :disabled="permission.loading">
</label>
<img v-show="permission.loading" :src="loadingImg">
</td>
</tr>
</table>
</div>
I also would add a :disabled="permission.loading" to prevent another click when it is loading.

Jquery UI appendTo NOT WORKING

Im trying to use jquery ui for search bar autocomplete. When I use div id="inputs" autocomplete works fine, but if I use input id="inputs" it's not working and i need to use input in order to search works properly.
(function ($) {
$.fn.googleSuggest = function(opts){
opts = $.extend({service: 'web', secure: false}, opts);
var services = {
web: { client: 'hp', ds: '' },
}, service = services[opts.service], span = $('<span>');
opts.source = function(request, response){
$.ajax({
url: 'http'+(opts.secure?'s':'')+'://clients1.google.com/complete/search',
dataType: 'jsonp',
data: {
q: request.term,
nolabels: 't',
client: service.client,
ds: service.ds
},
success: function(data) {
response($.map(data[1], function(item){
return { value: span.html(item[0]).text() };
}));
}
});
};
return this.each(function(){
$(this).autocomplete(opts);
});
}
}(jQuery));
$.each("web".split(" "), function(i, v){
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div)
input.googleSuggest({ service: v });
});
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="inputs"></div>
</body>
</html>

<input> tags can't have child elements, so you can't append nodes to them.
It looks like what you're trying to append is a div, which contains another input, which you run googleSuggest() against:
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div)
input.googleSuggest({ service: v });
So it seems that you don't need to append anything. Instead, just put googleSuggest on the <input> that's already in the DOM:
$('#inputs').googleSuggest({ /*...*/ })

Display selectmenu inside jQuery confirm

i have a jQUery-confirm and im trying to display some content which have a select and my select.selectMenu() doesn't seem to work because it's being displayed inside the jQUery-confirm. It's just showing the default select.I can easily call .selectMenu() on a select outside the scope and it will change from select to a selectmenu. Example:
HTML:
<div id="aDiv">
<select id="aSelect"> <option value="1"> 1 </option></select>
</div>
<button type="button" id="aButton">Click </button>
CSS:
#aDiv {
display: none;
}
JS:
$(document).ready(function() {
$('#aSelect').selectmenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
How do i make jquery-confirm show jquery ui widgets like selectmenu?

try this, you need to add html markup inside jconfirm and initialize the selectMenu plugin, its better to write the markup inside content instead of defining it outside.
$(document).ready(function() {
// $('#aSelect').selectMenu();
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: function(){
return $('#aDiv').html(); // put in the #aSelect html,
},
onContentReady : function() {
this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens.
},
onClose : function() {
}
});
});
});

Please try the following:
You have missed the # for id
$(document).ready(function() {
$('#aSelect').selectMenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});

Bootstrap Dialog (nakupanda) getting form values [JSFiddle]

I've trouble getting values out of my form.
I'm using bootstrap dialog from nakupanda (http://nakupanda.github.io/bootstrap3-dialog/)
The dialog (it is in a fullcalendar select function)
http://arshaw.com/fullcalendar/docs/selection/select_callback/
var form = $('#createEventForm').html();
BootstrapDialog.show({
message: form,
buttons: [{
label: 'Enkel rooster event',
action: function(dialogItself){
console.log('enkel - create')
dialogItself.close();
}
},{
label: 'Herhalend rooster event (elke dag)',
action: function(dialogItself){
console.log('meer - create')
dialogItself.close();
}
},{
label: 'Close',
action: function(dialogItself){
console.log(dialogItself);
alert('The content of the dialog is: ' + dialogItself.getModal().html());
}
}]
});
The html form
<form id="createEventForm">
<label>Klantnaam</label>
<input type="text" id="titleDrop" />
<br/>
<label>Beschrijving</label>
<input type="text" id="descriptionDrop" />
</form>
I don't know how to retrieve the data from the forms input when someone clicks on a button. I've tried $(titleDrop).val()andgetElementById(titleDrop)
Sometimes the form can contain php.
I am not getting javascript errors. I just don't get anything back when clicking on the butotns and using $('titleDrop').val()
EDIT FIDDLE
http://jsfiddle.net/jochem4207/7DcHW/3
This code works:
var form = '<label>Klantnaam</label><input type="text" id="titleDrop"><br><label>Beschrijving</label><input type="text" id="descriptionDrop">';
BootstrapDialog.show({
message: form,
buttons: [{
id: 'submit1',
label: 'See what you got',
cssClass: 'btn-primary',
action: function(dialogRef){
var titleDropVal = $('#titleDrop').val();
console.log(titleDropVal);
}
}]
});
Still curious if it could work when I dont add the html in the JS section.
Edit: Question 2
I have a select list that gets filled from php
var select = $('<select id="selectVisibleUser"></select>');
<?php
$userList = array();
foreach($this->users as $user){
$jsUser = array(
'key' => $user->webuserId,
'value'=> $user->firstName.$user->preposition.$user->lastName
);
array_push($userList, $jsUser);
}
$list = Zend_Json::encode($userList);
?>
$.each(<?php echo $list?>, function(key, value) {
select.append($("<option/>", {
value: key,
text: value
}));
});
BootstrapDialog.show({
message: function (dialogItself){
var form = $('<form></form>');
dialogItself.setData('select-visible', select);
form.append('<label>Select</label>').append(select);
return form;
},
buttons: [{
id: 'submit1',
label: 'See what you got',
cssClass: 'btn-primary',
action: function(dialogItself){
alert(dialogItself.getData('select-visible').val());
}
}]
});
This shows me a empty select list and returns offcourse a null when I click the button.
Should I use your first fiddle in this case?
Tried the first fiddle ( http://jsfiddle.net/b8AJJ/1/ ) works perfectly in this case (except i've some trouble to get the id instead of the value)

Try this:
http://jsfiddle.net/b8AJJ/
If possible I would suggest this way:
http://jsfiddle.net/7DcHW/4/
BootstrapDialog.show({
message: function (dialogItself) {
var $form = $('<form></form>');
var $titleDrop = $('<input type="text" />');
dialogItself.setData('field-title-drop', $titleDrop); // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
$form.append('<label>Title Drop</label>').append($titleDrop);
return $form;
},
buttons: [{
label: 'Get title drop value.',
action: function (dialogItself) {
alert(dialogItself.getData('field-title-drop').val());
}
}]
});

You're using element selector wrong.
Try $('#titleDrop').val() instead of $(titleDrop).val().
Bind submit event to your form. This way you can get the values of form inputs when the form is submitted. Look at the following example:
http://jsbin.com/xiruv/1/

Can i change the event that triggers when Kendo Grid next page button is clicked?

I have a kendo grid with pageable true. I want to trigger a custom function with Next page in kendo grid paging is getting clicked?

Here is what to do:
Set pageable attribute with your custom object as below, and add your own change function:
<div id="grid"></div>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 2,
change:function(e){
console.log("grid pager clicked!");
}
}
});

You will need to trigger a callback in the change event of the datasource bound to the grid.
Fired when the data source is populated from a JavaScript array or a
remote service, a data item is inserted, updated or removed, the data
items are paged, sorted, filtered or grouped.
Datasource Change Event
JS CODE
Subscribe to change on initialisation
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/products",
dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
},
change: function(e) {
// PLACE YOUR CALLBACK CODE HERE
}
});
dataSource.fetch();
Subscribe to change post initialisation
function callback(e) {
// PLACE CALLBACK CODE HERE
}
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/products",
dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
}
});
dataSource.bind("change", callback);
dataSource.fetch();

The solution dcodesmith gave your will work but as an alternative you could bind to the click event on the page links, the following jQuery selector should work:
$(".k-link.k-pager-nav")
And you can get the page it will go to using the page data attribute.