i am a newbie in rails 3.2. now i have a problem following:
i have 2 patials for showing highchart are _device_per_product.html.erb and device_per_platform.html.erb. and i render these by this way:
jQuery("#element_div").html("<%= escape_javascript(render(:partial => 'partial_page')) %>");
when i click a link to render my partial,it works. but next time, i render another partial,it just load javascript code but not generate highchart form these code.
In my opinion,For First time the javascript is freshly loading in my page. So it will work. Next time my javascript is not working. please help me solve that problem
I suspect you have something like:
$('#element_div a').click(function() {
//do something
});
This only binds to what's on the page when it fires. If you are introducing new (or replacing) this then you need to change the listener.
$(document).on("click","#element_div a", function () {
// do something
}} );
A more detailed explanation along with alternatives for older versions of jquery can be found at https://stackoverflow.com/a/10394566/2197771
Related
Im a little lost on this, Im trying to get started with Vue but I cannot seem to get the delimiters changed and working. Would someone be nice enough to take a look at this code and tell me if it looks like it should be working? Im using this with Django and need to change them. In addition, even experimenting with the basic tags but loading the HTML page manually in my browser doesn't seem to be working. Any ideas? I can confirm Vue is loading because I get the message in the console when it loads. I am loading this from the CDN.
const app = Vue.createApp({
el: '#table-div',
compilerOptions: {
delimiters: ["[[',']]"],
},
data(){
return {
objects: {},
text: 'This is a test',
}
}
});
OK, so in case someone else runs into issues. My particular issue is that the scripts needed to be loaded outside the ending body tag in my base.html file. I was using a template with Django and I could not get it to work within the template fragment. Loading it in the main file after the </body> tag worked like it should. I'd also add that the new compilerOptions way of changing the delimiter works as intended as well in case anyone stumbles on this trying to change the delimiter for any version 3.1+.
I'm trying to debug a problem we have in vue editor js package
where everything works ok except for the "loadData" button which although it's
changing the prop initData, the Editor component doesn't seem to render again.
I'm not a js master and this API is not clear to me, I suspect the problem is in the
watch(_ => props.initData, _ => initEditor)
Which looks like it's watching for initData changes but than called a function with no params ??? But i don't understand how it works (or what's the problem making it not work) ? , can anyone have a look and help debug it or say what's wrong?
you should call the initEditor function not just return it
for example
watch(_ => props.initData, _ => initEditor(props))
I'd like to call close on a mouseleave event on an md-menu component. I'm using version 0.7.4 of the vue-materiallibrary, and using this documentation it says that there is a close method.
How do I call this method? I've tried the following:
<md-menu md-size="1" ref="aRef" id="aRef">
<div #mouseleave="this.$refs['aRef'].close()">
...other stuff...
</md-menu>
When I run this I get an error saying:
Uncaught TypeError: Cannot read property 'aRef' of undefined
I'm guessing this is something to do with the component not being available at creation time. What's the correct way of doing this?
I should say that the md-menu is actually nested inside another md-menu (which seems to work ok from a functional perspective). Not sure if that screws up the event hierarchy.
I stumbled across the solution for this one while I was trying to solve a different problem (how to close any other menus before opening another).
Your problem is that you can't use this inline in the html template. You need to send the event to a method and then call it...
<md-menu
ref="aRef"
#mouseleave="closeMenu"
>
// menu contents
</md-menu>
Then in your script section:
methods: {
closeMenu() {
this.$refs['aRef'].close();
}
}
I have a problem with CJuiDatePicker in the module JQRelcopy on Yii framework.
I use this module as I have a form with a datepicker field to be copied as many times as the user wishes.
The module works fine if I put a normal field (without datepicker), but as soon as I add the module CJuiDatePicker which is also a module of the Yii framework, I have a blank page appears. I followed the following tutorial: http://www.yiiframework.com/extension/jqrelcopy/ explains the integration jqrelcopy in a form containing CJuiDatePickerm, which is exactly what I need.
I study the problem and I saw that it was when I Atoute the following line in the properties of my widget JQRelcopy the problem occurs:
'jsAfterNewId' => JQRelcopy::afterNewIdDatePicker($datePickerConfig),
in
$this->widget('ext.jqrelcopy.JQRelcopy', array(
'id' => 'copylink',
'removeText' => 'remove',
//add the datapicker functionality to the cloned datepicker with the same options
'jsAfterNewId' => JQRelcopy::afterNewIdDatePicker($datePickerConfig),
));
I look in several forums and anywhere a person has had the same problem as me.
The only way I could do this in the past, was ditching the CJuiDatePicker and using the on method of JQuery.
$('body').on('focus', '.idata', function(){
jQuery(this).datepicker(
jQuery.extend(
{showMonthAfterYear:false},
jQuery.datepicker.regional['pt-BR'],
{'showAnim':'fold','dateFormat':'dd/mm/yy'}
)
);
});
Or, you can use live method...
Just Import ext.jqrelcopy.JQRelcopy in your form file at the top
Yii::import('ext.jqrelcopy.JQRelcopy');
Your Problem be solved if any Issue let me know i will further assist.
I am getting an error message as element.dispatchEvent is not a function. I am using jQuery with prototype in rails 3 application. In my layout file, I have added the js files as below
javascript_include_tag 'jquery','jquery_ujs','prototype','shadowbox/shadowbox.js'
<script type="text/javascript">jQuery.noConflict();</script>
I have also added jQuery.noConflict as above and used jQuery instead of $ in jQuery functions. Any idea how to resolve this.?
In my another controller page action I have also mentioned the same thing as there are some js files which needs to be reloaded only for that particular page.
I am a newbie in js as well as rails also.
you should use jQuery.noConflict right after src to the jQuery library
Using jQuery.noConflict(); should be enough. Please check the code of the page in your browser so you can see when prototype is actually added.
You should have jQuery, then the .noConflict call, then prototype.
Besides adding the 'no conflict' method, I do this instead (though both would probably be best):
I'll 'preset' my custom script page. Let's say my prediction is that I will use maybe 5 blocks of code in a page - this is how I preset my page:
jQuery(document).ready(function($) {
// use $ in here like normal!
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
etc. etc.
Notice this uses the jQuery object itself to pass as the callback function to the .ready method so you can once again use the $ identifier within the functions. I can rename it so their will never be a conflict, and I can use the $ identifier within the function like I normally would. Hope that helps.