I am trying to make a web app using jQuery mobile and jQuery tmpl framework.
I want to load the second page and apply a template but the appendTo method doesn't seem to work.
<div class="ui-block-a" >
<a href="#" data-transition="slide" id="organiser">
<div class="ui-bar ui-bar-a homepage-block homepage-block-purple">
<div>
<img src="../img/organiser.png" width="30px" height="30px">
</div>
<div class="homepage-block-text">
<span style="font-size:30px;">10</span></br>
Organiser
</div>
</div>
</a>
</div>
$(document).on("click", '#organiser', function() {
$(":mobile-pagecontainer").pagecontainer(
"change",
"organiser.html",
{
//reload : true,
transition: "slide",
}
);
var data = getData(1019386);
$("ul.myclass").empty();
$.tmpl(templateList, data).appendTo($("ul.myclass"));
})
I am new to jQuery and I don't understand why it's not working.
See comments above, and yes try the following...
$(document).ready(function(){
$('#organiser').on('click', function(){
$(":mobile-pagecontainer").pagecontainer(
"change",
"organiser.html",
{
//reload : true,
transition: "slide",
}
);
var data = getData(1019386);
var myClass = $('ul.myclass');
myClass.empty();
var tmpl = $.tmpl(templateList, data); // $.tmpl(templateList, data).someProperty()
myClass.append(tmpl);
});
});
Related
I want to send data via jquery (jquery-3.2.1.min.js) and ajax from inside of a bootstrap popover.
The popover works fine, but I cannot get the submit to work.
I initialized the popover with
$(document).ready(function() {
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
});
This is the html trigger:
<span tabindex="0" role="button" data-toggle="popover" data-placement="right" data-popover-content="#comment230" data-original-title="" title="">
<img src="/ds/img/comment.svg" alt="comment" height="16px">
</span>
And this is the html inside the popover:
<div id="comment225" style="display:none;">
<div class="popover-heading">Comments</div>
<div class="popover-body">
<div class="commentbody">
<div>
<fieldset>
<div class="input text">
<label for="comment">Comment</label>
<input name="comment" id="comment" type="text" />
</div>
</fieldset>
<button class="submittest" id="acomment225button">Test</button>
</div>
</div>
</div>
</div>
For testing reasons I did this:
$(".submittest").click(function(e) {
alert('test');
e.preventDefault();
});
The alert does not work from buttons inside the popover, but from buttons placed on the rest of the page.
How can I get this to work?
Those DOM elements are not present at the time you are subscribing to the event.
You need to hook up to events in this fashion:
$(document).on("click", ".submittest", function(e){
alert("test");
});
html
<a class="popper btn" rel="popover" data-toggle="popover"><h3 class="gv layout">Layout Plan</h3> </a>
<div class="popper-content hide">
<img src="images/layout1.jpg" class="btn"/>
<img src="images/layout2.jpg" class="btn"/>
<img src="images/layout3.jpg" class="btn"/>
</div>
script:
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
i want this to execute on popover show, thanks in advance can any find what is the problem here,
script:
$popover.on("show", function(e) {
$("#transbg").css("padding-bottom","2600px");
});
the below ref code works fine in fiddle but not with my code
var $popover = $(".poper").popover({
trigger: "click"
}).click(function(e) {
e.$("#transbg").css("padding-bottom","260px");
});
$popover.on("hide", function(e) {
$("#transbg").css("padding-bottom","50px");
});
The popover show event syntax is not correct,Can you try the following
HTML
<a class="poper btn" rel="popover" data-toggle="popover">
<h3 class="gv layout">
Layout Plan</h3>
</a>
<div class="popper-content hide">
html
</div>
JS
var abc = $('.poper').popover({
placement: 'bottom',
container: 'body',
trigger: 'hover',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
abc.on("shown.bs.popover", function (e) {
console.log("popover shown");
});
abc.on("hidden.bs.popover", function (e) {
console.log("popover hidden");
});
Fiddler
Please refer this link regarding bootstrap popover
Here I need to click on a thumbnail, so that it will show the details on other page, it should show the details of that particular thumb only. I used xml file here to fetch the data and display thumbnail. I am unable to pass the values to other page and open it at the same time onclick event. pls help
<div class="container-page">
<div class="row" id="portfolio">
<div class="col-md-2">
<nav>
<ul class="nav nav-pills nav-stacked" id="test">
<li role="presentation" class="active">Services</li>
<li role="presentation">Desktop</li>
<li role="presentation">Web</li>
<li role="presentation">Mobile</li>
<li role="presentation">Design</li>
</ul>
</nav>
</div>
<div class="col-md-10">
<div class="row" id="thumb">
</div>
</div>
</div>
</div>
<!-- js -->
$.ajax({
type:"GET",
url:"portfolio.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('thumbnail').each(function()
{
var $thumbnail=$(this);
var type=$thumbnail.find('type').text();
var descr=$thumbnail.find('description').text();
var title=$thumbnail.attr('title');
var imageurl=$thumbnail.attr('imageurl');
var thum='<div class="col-xs-6 col-md-3"> </div>';
thum=$(thum).appendTo("#thumb");
thum = $('').appendTo(thum);
var thumName = $('<div class="thumTitle"></div>').appendTo(thum);
$('<h2>'+title+'</h2>').appendTo(thumName);
$('<p>'+type+'</p>').appendTo(thumName)
thum = $('<img src="'+imageurl+'" alt="image" class="thumbImgSize imgSlide">').appendTo(thum);
$(".forHove").mouseup(function()
{
//here is the redirection code, and want to pass $thumbnail to testxml.html page
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
});
}
});
Well, one of the alternative is using Web Storage API.
Just store img html and use it.
// use 'click' instead of 'mouseup'
$(".forHove").click(function()
{
// store image html to sessionStorage
window.sessionStorage.image_data = $thumbnail.clone().wrapAll("<div>").parent().html();
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
// in http://www.bookmane.in/skillworks/testxml.html
// You have data sotred and insert it somewhere
$(document.body).append(window.sessionStorage.image_data);
You can achieve this thing using the following steps:
Add a form tag like
<form action="YOUR_PATH" method="GET">
<a class="thubnailClick" href="#" >
<html_of_your_thumbnail>
<input type="text" name="NAME_OF_PARAMETER" />
</a>
</form>
Now override the click event of <a> tag with
$(document).ready(function() {
$(".thubnailClick").on('click', function(event) {
// to override the default behavior of <a> tag.
preventDefault();
// Find the form element using closest() of jQuery.
// Call submit event of that form using $(form_element).submit();
});
})
Now on the other page you can get parameter from URL using location.search or follow:
Getting Query params using JavaScript
Now use these Params according to your needs.
I have a list view to choose content from
<div id="mediumListIconTextTemplate"
data-win-control="WinJS.Binding.Template"
style="display: none">
<div class="mediumListIconTextItem">
<img class="mediumListIconTextItem-Image" src="img/tegan.jpg" />
<div class="mediumListIconTextItem-Detail">
<h4 data-win-bind="innerText: title"></h4>
<h6 data-win-bind="innerText: text"></h6>
</div>
</div>
</div>
<div id="groupedListView" style="display:none;"
data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource: myData.groupedItemsList.dataSource, tapBehavior: 'toggleSelect',
itemTemplate: select('#mediumListIconTextTemplate'),
groupDataSource: myData.groupedItemsList.groups.dataSource,
groupHeaderTemplate: select('#headerTemplate'),
layout: {type: WinJS.UI.GridLayout}}">
</div>
What i did is, i just made listview 'display:none' and on click add i just made 'display:block'. The code below
$("#groupedListView").css('display', 'block');
var name ='';
var myListView = document.getElementById("groupedListView").winControl;
myListView.forceLayout();
myListView.selection.clear();
myListView.addEventListener("iteminvoked", function (e) {
e.detail.itemPromise.then(function (invokedItem) {
name = invokedItem.data.picture; //name of selected data
alert(name + "\"s defined: " + num + ".", 'i');
$("#groupedListView").css('display', 'none'); //hide the listview
});
}, false);
Its works fine for one time, On 2nd, 3rd... list item selection it fails and shows exception
What is the best way to load listview and access the content..?
P.S: The whole listview and other functions are in single html page
I'm a jQuery novice, I have the following jQuery written to show a div when a specific link on a map is shown:
<div id="locationmap">
<a class="linkhide" id="link1" href="#">Occupier 1</a>
<a class="linkhide" id="link2" href="#">Occupier 2</a>
<a class="linkhide" id="link3" href="#">Occupier 3</a>
</div>
<div id="mapdetail">
<div class="hideme" id="local1" style="display:none;">
<p>Some content one</p>
</div>
<div class="hideme" id="local2" style="display:none;">
<p>Some content two</p>
</div>
<div class="hideme" id="local3" style="display:none;">
<p>Some content three</p>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$("#link1").mouseover(function() { $("#local1").fadeIn(500); });
$("#link2").mouseover(function() { $("#local2").fadeIn(500); });
$("#link3").mouseover(function() { $("#local3").fadeIn(500); });
$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });
//]]>
</script>
However, as you can see the .fadeIn(500) is being repeated for each link. How would I make this a variable once and call it for each line? This would save me repeating the same piece of code 30 times or so for each link.
I have a JSfiddle here: http://jsfiddle.net/karlgoldstraw/4NRY7/
Thanks.
function mouseOver(localId) {
return function() { $("#local" + localId).fadeIn(500); }
}
$("#link1").mouseover(mouseOver(1));
you could use a data-attribute to make the connection between the links and the div simpler,,,
<a data-id="2"...
$('a.linkhide').mouseover(function() {
var el = '#local' + $(this).data('id');
$(el).fadeIn(500);
});
Because i don't see it yet i thought i would add my answer here. Though i realize that the above answers are perfectly viable my solution lets the link tell the function what the content to show is called. By adding a javascript function that will inspect the hash value of the link you can use that as a selector to do your fadein's. This would also give the benefit of degrading better as the hash link would still put the user on the correct content in the event javascript is disabled.
JavaScript
var fade = function(){
var contentSelector = this.hash;
$(contentSelector).fadeIn(500);
};
Then to declare the mouseovers:
$("#linkone").mouseover(fade);
$("#linktwo").mouseover(fade);
$("#linkthree").mouseover(fade);
$("#linkfour").mouseover(fade);
Or you could even do it like this:
$(".linkhide").mouseover(fade);
Then on the HTML
<a class="linkhide" id="linkone" href="#content1">Link 1</a>
<a class="linkhide" id="linktwo" href="#content2">Link 2</a>
<a class="linkhide" id="linkthree" href="#content3">Link 3</a>
<a class="linkhide" id="linkfour" href="#content4">Link 4</a>
etc...
JSFiddle - http://jsfiddle.net/4NRY7/11/
This is one way that doesn't involve changing the HTML. As you can probably tell, changing the id of the link could make this much more efficient.
$(".linkhide").mouseover(function() {
var linkDivMap = { 'one' : 1, 'two' : 2, 'three' : 3, 'four' : 4 };
var contentBox =$(this).attr('id').replace('link','');
$("#content" + linkDivMap[contentBox] ).fadeIn(500);
});
$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });
Replacement for your current script.
This allows you to use a single dynamic function, and a single jQuery.mouseover() call, for all .linkhide elements, to avoid the duplication of code that still results from #MikeThomsen's answer.
$( document ).ready( function () {
$( ".linkhide" ).mouseover( function ( event ) {
var item_id = this.id.match( /([0-9]+)$/ )[1];
$( "#local" + item_id ).fadeIn( 500 );
} );
$( ".linkhide" ).mouseout( function () {
$( ".hideme" ).css( 'display', 'none' );
} );
} );