moveTo not working with onClick event in dojox.mobile.ListItem - dojo

I am developing a web page using Dojo mobile v1.5.1.
Below is the sample code.
<div dojotype="dojox.mobile.View" selected="true" id="view1">
<div dojotype="dojox.mobile.Heading" label="dojox.mobile.Heading"></div>
<div dojotype="dojox.mobile.EdgeToEdgeCategory" label=
"dojox.mobile.EdgeToEdgeCategory"></div>
<div dojotype="dojox.mobile.EdgeToEdgeList">
<!-- PROBLEM IS IN THIS DIV TAG -->
<div dojotype="dojox.mobile.ListItem" moveto="view2" transition="slide"
label="dojox.mobile.ListItem" onclick=
"document.getElementById("cfText").innerText = "Value set";"
id="listItem1"></div>
</div>
</div>
<div dojotype="dojox.mobile.View" id="view2">
<div dojotype="dojox.mobile.Heading" label="dojox.mobile.Heading" back="Back" moveto=
"view1"></div>
<div dojotype="dojox.mobile.EdgeToEdgeList">
<div dojotype="dojox.mobile.ListItem">
<span id="cfText" class="xspTextComputedField">Value NOT set</span>
</div>
</div>
</div>
What it does is, when the div tag with with id "listItem1" is clicked it shows div tag with id "view2". But when I add the onClick event in it, it does NOT work. Without the onClick event it works fine.

GOT IT!
Add the following script:
<script type="text/javascript">
function setValue() {
var cfText = dojo.byId("cfText");
cfText.innerHTML = "Value Set";
}
dojo.addOnLoad(
function() {
dojo.connect(dijit.byId("listItem1"), "onClick", dojo.hitch(dijit.byId("listItem1"), setValue));
}
);
</script>
Also remove the "onClick" attribute value from div tag with id "listItem1".
Thanks to this discussion for helping me out.

What are you trying to do with the onclick event?
Couldn't you rewrite that line like the following:
<div dojotype="dojox.mobile.ListItem" transition="slide"
label="dojox.mobile.ListItem" onclick="someNewFunction(this)" id="listItem1">
Then create a new function to do what you want:
function someNewFunction(obj) {
var cfText = dojo.byId("cfText");
cfText.innerHTML = "Value";
obj.transitionTo("move2");
}
Hope that helps and I understood you correctly.
EDIT:
Also I when I tried to use moveTo with an onClick on a listItem the onClick would work and the moveTo would not. You can remove the moveTo attribute and add this line in the last line of your new function:
this.transitionTo("move2");
EDIT AGAIN:
Also you could remove the transition as well and add it to the transitionTo call.

Related

v-on:click not working - dynamically added html element

I am trying to get all images for a category using Vue
<div class="col-md-12 col-sm-2 p-2">
<a v-on:click="onCategoryManageImageClick($event)" data-target="#location-
category-images">
</span>
</a>
</div>
So the event onCategoryManageImageClick ($event) does not work, if I am adding a html block and then click on get image button.
this is index.js
methods:{
onImagesTabClick(){
this.$root.$emit('activated-tab:location-images');
},
onCategoriesTabClick(){
window.j1App.eventBus.$emit("j1-location-image-list:shown");
},
onCategoryManageImageClick: function(event) {console.log('working event..');
event.preventDefault();
window.j1App.eventBus.$emit("j1-location-category-image-
list:shown",event.currentTarget.id);
}
}
So basically it need to to work like we do in jQuery
$(document).on('click',function{
})
So it works either page load or if adding any new html element on DOM. same I want in Vue.
You cannot alter the Vue template outside of Vue. That won't work. Vue compiles the template once when starting up and adds the event listeners to the rendered elements. If you add elements afterwards, Vue will not know about them.
The correct way of doing this would be to add those new elements in Vue.
<div
class="col-md-12 col-sm-2 p-2"
v-for="item in items"
:key="item.id"
>
<a
v-on:click="onCategoryManageImageClick($event, item)"
data-target="#location-category-images"
>
</a>
</div>
See https://v2.vuejs.org/v2/guide/list.html for documentation. In this case you need the items array variable in data and add more array elements to it, if you need more links.
Try raplacing your a tag with p
<div class="col-md-12 col-sm-2 p-2">
<p v-on:click="onCategoryManageImageClick" data-target="#location-
category-images">
</p>
</div>

Hide-Show N divs with Vuejs and #click [beginner]

I am confused on how to hide and show 3 divs according to the click.
I have been able to show and hide 2 divs with v-show but v-show does not apply I think for more than 2 divs.
This is my code without vuejs, because I don't understand how to render with v-else-if
<div id="element_one">
ONE
<a>Go to two</a>
<a>Go to three</a>
Some content
</div>
<div id="element_two>
<a>Go back to one</a>
Some content
</div>
<div id="element_three>
<a>Go back to one</a>
Some content
</div>
app.js could be like this?
new Vue({
el: '#app',
data: {
isOne: true,
isTwo: true,
isThree: true
}
});
Sorry, I understand is a basic question but if you could guide me.
I saw what there is about v-else-if in the documentation but it is still not clear to me how to apply it.
I understand that each div applies a display none to it and when it is activated it disappears.
So basically it is, that two divs are in display none when the div that I accessed through its corresponding button is activated.
Thank you.
for using v if directive
<p v-if="inStock">{{product}}</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
and so on and the last is what`s below
<p v-else>..</>
you can also use v-show(note this toggles css property display:none)
<p v-show="showProductDetails">..</p>
<div id="element_one" v-if="visibleDivId == 1">
ONE
<a #click="showDivById(2)">Go to two</a>
<a #click="showDivById(3)>Go to three</a>
Some content
</div>
<div id="element_two v-if="visibleDivId == 2">
<a #click="showDivById(1)">Go back to one</a>
Some content
</div>
<div id="element_three v-if="visibleDivId == 3">
<a #click="showDivById(1)">Go back to one</a>
Some content
</div>
new Vue({
el: '#app',
data: {
visibleDivId: 1,
},
methods: {
showDivById(divId) {
this.visibleDivId = divId
}
}
});
You can write a function and use it to show or hide div on click.

ie11 caching background images while changing styles

I have a DIV which holds background images, and I change them by bootstrap carousel item change by passing data-bg attribute like below:
HTML
<div class="bg-holder" data-bg="bg-1">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS
const bgHolder= document.querySelector(".bg-holder");
$('#carousel').on('slide.bs.carousel', function (e) {
bgHolder.dataset.bg = e.relatedTarget.dataset.bg;
})
CSS
.bg-holder[data-bg="bg-1"] {
background-image: url(image1.jpg)
}
.bg-holder[data-bg="bg-2"] {
background-image: url(image2.jpg)
}
I set data-bg="bg-1" by default and then on every carousel change i pass the new data-bg value. it works great in all modern browsers except IE11 which do not refresh the images from css, and it keeps displaying the one i loaded by default. When I open developers tools and uncheck/check the declaration it displays the proper image. Any ideas ?
I test in IE and reproduce the issue. As a workaround, you could set the background-image as inline style of bg-holder and change it on every carousel change according to bg value. The sample code is like below:
HTML:
<div class="bg-holder" style="background-image: url(image1.jpg)">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS:
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.relatedTarget.dataset.bg == "bg-2") {
$(".bg-holder").css("background-image", "url(image2.jpg)");
}
else {
$(".bg-holder").css("background-image", "url(image1.jpg)");
}
})
You could also check this online demo in IE 11.

how to fix jquery error "Uncaught TypeError: Cannot read property 'style' of undefined" for blue-imp gallery in modal Bootstrap?

I used bootstrap 3 and blueimp-gallery in a web html5. My problem is a carousel-gallery dont show images and receive a error in a console "Uncaught TypeError: Cannot read property 'style' of undefined" when i use a blueimp-gallery-carousel in a modal div, but if i enter in a developer tools for chrome, this error disappears, and the images show in carousel-gallery.
The code.
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Vinilos</h2>
<div id="links">
1
2
3
</div>
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<p>Vinilos para rotulacion, decorativos, efecto espejo, fibra de carbono, refractivos, hologramas y farolas</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar Producto</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my javascript
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
</script>
and the link web problem
http://www.colombiawaterprint.com/web/index3.html
How i Solve this error?
I believe your problem is that your blueimp gallery is initially hidden as it is in a Bootstrap Modal. As such, when you first initialize the gallery it can't find the gallery. I think all you need to do is wait for the Bootstrap modal to be shown and then initialize the gallery.
Bootstrap triggers an event that you can listen for for this very purpose - http://getbootstrap.com/javascript/#modals-events - You probably want the shown.bs.modal event.
You would use it something like this. (assuming jQuery is loaded)
$('#portfolioModal1').on('shown.bs.modal', function (e) {
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
})
Bear in mind this is untested code and may not 'just work'. But hopefully you get the idea. You also may want to do a test to see if you've already initialized the gallery, as it stands this would re-initialize it every time the shown.bs.modal event was fired.

Dojo loading templated widget into data-dojo-type

I've created a very simple HTML templated widget.
<div class="tool">
<a href="" id="freehand">
<i class="flaticon-writing9"></i>
</a>
</div>
<div class="tool">
<a href="" id="polygon">
<i class="flaticon-constellation"></i>
</a>
</div>
My widget declaration looks like this:
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/DrawingToolsWidget.html",
"dojo/parser",
"dojo/ready"
],
function(declare, _WidgetBase, _TemplatedMixin, template, parser, ready) {
return declare("DrawingToolsWidget",[_WidgetBase, _TemplatedMixin], {
templateString: template,
constructor: function() {
console.log(this);
}
});
ready(function(){
parser.parse();
});
}
);
I try to attach it to a point in my main DOM with a data-dojo-type attribute:
<div id="drawing-tools-container" data-dojo-type="DrawingToolsWidget"></div>
But I keep getting a generic dojo/parser::parse() error Error {} which is completely useless for debugging.
My directory structure is: /index.html(main DOM) /app/DrawingToolWidget/templates/DrawingToolsWidget.html(template) /app/DrawingToolWidget/DrawingToolWidget.js(declaration)
I've also tried to attach "app/DrawingToolWidget/DrawingToolWidget" just in case it wanted the path to the widget declaration. Nope.
What am I doing wrong? Why is it so hard just to attach a fragment of markup to the DOM?
Your template is invalid because you can only have 1 root element. I'm not sure if that's the main problem, but this might solve certain things. A quote from the documentation:
Note that when you define a template, it can only have one root
node definition ( just like with XML documents). Multiple nodes at the
top level is not allowed.
The article: http://dojotoolkit.org/documentation/tutorials/1.9/templated/
A working template would be:
<div>
<div class="tool">
<a href="" id="freehand">
<i class="flaticon-writing9"></i>
</a>
</div>
<div class="tool">
<a href="" id="polygon">
<i class="flaticon-constellation"></i>
</a>
</div>
</div>
The working example can be found here.
About your debugging problem, do you use Google Chrome? When encountering an error, you should try to close and open the developer tools/console, if you do that, there should be a small arrow next to the Error, for example:
As you can see here, there are 2 arrows, the left one gives you the stacktrace, while the right one (almost at the end of the error line), will give you detailed information about the error (if you click/expand it).