I need to pass an id to my jqmodal popup but I'm not sure the best way to do this.
On my trigger I have a data-id set so it is like this:
data-id="projects"
and then my code which calls the popup
$('.jqmWindow').jqm({
ajax:projects,
onShow:myFadeIn,
onHide:myFadeOut
});
My popup works fine, I just wonder how I can attach my id to pass it to the popup?
There is a bit of detail missing from your questions, but I'm assuming that you have a trigger (let's say an tag with data-id="projects" which should trigger your jqModal?
Take a look at jQuery Selector
Probably something like this.
Click
<script>
$(function () {
$('a[data-id="projects"]').click(function () {
$('.jqmWindow').jqm({
ajax:projects,
onShow:myFadeIn,
onHide:myFadeOut
});
})
});
</script>
Related
Using a SyncFusion Vue Grid component, I need to call a function when a row is selected. I have tried adding a column of edit buttons but I can't find documentation for the correct syntax to use to get the buttons to call a function. I also tried looking for a way to just call a function whenever the row itself is clicked which would be fine as long as I can determine which row was clicked (access the value of one of the fields in the row). The Grid Selection API looks like it is just for programmatically selecting parts of the grid which is not what I am trying to do. I tried following this explanation but I could not figure out the syntax for getting the button to call a function. I have looked at the Vue and SyncFusion documentation but I can't find specifically what I am trying to do. Below are the relevant parts of the code.
<template>
<ejs-grid>
<e-columns>
<e-column
headerText='Buttons'
width='120'
:template='cTemplate'></e-column>
<e-column
field="name"
headerText="Name"
:isPrimaryKey="true"
width="60"
></e-column>
<e-column
field="generalSubject"
headerText="Subject"
width="40"
></e-column>
</e-columns>
</ejs-grid>
</template>
<script>
export default Vue.extend({
data() {
cTemplate: function () {
return { template : Vue.component('columnTemplate',{
template: `<button v-on:click="fx">Edit</button>`, // <-- call fx() syntax??
data: function() {
return {
data: {}
}
},
})}
},
fx: function() { // do something },
},
});
</script>
Your requirement can be achieved by using the Grid’s rowSelected event. This event gets triggered on selecting a Grid row and returns the current row details in the event arguments.
Please find the below sample prepared based on this for your reference,
Sample: https://codesandbox.io/s/vue-forked-0knlb?file=/src/App.vue
API link: https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected
Let us know if you need further assistance.
Regards,
Sujith R
I have a call in my created method which has an await.
I want to know that the results of that call are loaded so that i can conditionally show/hide things in the DOM.
Right now it looks like the DOM is being rendered before that method has completed. But I though that methods in created were called before the DOM rendered?
You're correct in assuming that the created hook runs before the component mounts. However, the lifecycle hooks are not waiting for async calls to complete. If you want to wait for that call to be completed and data to load, you can do so by using a Boolean that you set to true when your data has loaded.
Your template:
<div v-if='dataLoaded'>Now you can see me.</div>
in your vue instace
export default {
data () {
return {
dataLoaded: false
}
},
created () {
loadMyData().then(data => {
// do awesome things with data
this.dataLoaded = true
})
}
}
This way you can keep your content hidden until that call has resolved. Take care with the context when you handle the ajax response. You will want to keep this as a reference to the original vue instance, so that you can set your data correctly. Arrow functions work well for that.
I am having a problem working with JQuery DataTable. I had to use that plugin since I had no other choice allowed due to my project requirements.
So the problem is that, I am adding rows to DataTable and in the row there's a column with button HTML tag. Now I want to bind an on click handler to the button.
dt.Rows.Add({
column_1_data,
column_2_data,
"<button #click='itsVueTime'>MyButton</button>"
});
Here dt is the DataTable's instance. Now the problem is #click won't work. I understand that its not being rendered by Vue thats why its not working.
Is there a way to bind click event in this condition?
Without knowing more context, I would recommend this way of doing it
In your component with the method you want to use, you can expose the component like this. (I use mounted, but you can use other lifecycle methods too like created)
mounted() {
window.app = this;
}
then you can use
<button onclick="app.holler()">Say Hello</button>
you can also expose just the function you want to use like so
mounted() {
window.itsVueTime = this.itsVueTime;
}
I want to call the function "details" when an element with the class "link" is clicked. This code doesn't work:
window.onload = function () {
document.getElementById("link").onclick = details;
}
How can I do this?
document.getElementById("link") will select an element with an id of "link", not an element with a class of "link".
Depending on what browsers you need to support, you might use document.getElementsByClassName() instead. (Won't work in IE8 or below, but works in all other browsers you are likely to care about.) You'll have to assign the click handler to each element that is returned.
is there a callback function (e.g. onComplete) for this? I would like to display a loader.
FB.XFBML.parse()
Yes, the second parameter is the callback function. For example this should work:
FB.XFBML.parse(document.getElementById('some_element'), function() {
alert('I rendered');
});
To parse the whole page by the same time
FB.XFBML.parse(document, function(){
alert('I rendered');
});
As of 2013 this does not work. Google Chrome will have "blinking" like buttons until it is finally rendered for me. This event is called before rendering is done.
To test this I try to hide the container before which has the like buttons (this works fine).
Then I test to show the container in the function() {
}); of the FB.XFBML.parse, that's when it looks like the newly loaded buttons are blinking.
Only having this issue in google chrome, but it proves that it's not after all like buttons have finished rendering in google chrome atleast.