I am trying to build a photo gallery that pulls photos from flickr and displays each photo with a text box. I would like to have the below code, where div class='col-sm-6 col-md-4 center' and all child relations repeat within div class="row".
<div id="body" style="padding-top: 60px;">
<div class="row">
<!-- Section to repeat -->
<div class='col-sm-6 col-md-4 center'>
<div class='thumbnail'>
<div id="gallery"></div> <!-- Photos go here -->
<div class='input-group'>
<!-- textbox and button -->
<input type='text' class='form-control' placeholder='#tag'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>Tag!</button>
</span>
</div>
</div>
</div>
<!-- Above section repeats here 6 times -->
</div><!--./row -->
</div><!--./body -->
The Javascript that I have gotten closet with is:
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
$.getJSON( flickerAPI, {
tags: "porsche",
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#gallery" );
$( "#gallery" ).append( tagForm );
if ( i == 5 ) {
return false;
}
});
});
})();
</script>
This will pull the photos, but the textbox and button will to the right of the photo rather then bellow. I know the problem is from first 2 divs not being included, however, I don't know how embed the photo and textbox/button within the thumbnail and col-sm-6 dig's.
Any help would be amazing! Thanks ahead of time.
Provided that you want each image to go into the #gallery with its own tag button it
will be much easier to style if you group the image and span inside an element.
example output:
<div class="gallery">
<div class="img-box">
<img src="something.jpg">
<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>
</div>
</div>
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
// store this so we dont look it up every iteration
var $gallery = $("#gallery");
$.getJSON( flickerAPI, {
tags: "porsche",
tagmode: "any",
format: "json"
})
.success(function( data ) {
$.each( data.items, function( i, item ) {
// create a div to stuff img and tag in
var $img_box = $('<div class="img-box">');
$( "<img>" ).attr( "src", item.media.m ).appendTo( $img_box );
$img_box.append( tagForm ).appendTo($gallery)
if ( i == 5 ) {
return false;
}
});
});
})();
</script>
Related
ok here is the full code
chenging the background image css property through jquery and the images are not displaying .... checked the paths and they are ok
divs exist, css is ok , paths are ok, images exist BUT it works on the on.show function and it does not work on the click function
// when new category show default images
$('#newCategory').on('show.bs.modal', function () {
var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/default.png';
var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/default.png';
$( '#categoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
$( '#bannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
});
// load category info before display dialog
$('body').on('click', '.btn-upd-id',function(){
var id = $(this).attr('upd-id');
$("#update-category-id").val(id);
if( id != "" ){
$.post('category/category_info.php', {id: id}, function(data){
var obj = JSON.parse(data);
$("#upd-name").val(obj[0].name);
var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/' + obj[0].category_image;
var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/' + obj[0].banner_image;
$( '#updCategoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
$( '#updBannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
})
}
});
HTML
<!-- category image -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="category">Category Image</label>
<br/>
<div id="updCategoryPreview"></div>
<input type="file" class="img" id="upd-category" name="upd-category">
</div>
</div>
</div>
<!-- banner image -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="banner">Category Banner</label>
<br>
<div id="updBannerPreview"></div>
<input type="file" class="img" id="upd-banner" name="upd-banner">
</div>
</div>
</div>
I expect it to load the image but it displays nothing.
fed up
used this piece of code and its working
image = new Image();
image.src = url;
image.onload = function () {
$('#image-holder').empty().append(image);
};
found here
Can I get the image and load via ajax into div
thank you all for your help
I have an issue where the jQuery validation won't work, and after clicking submit, it doesn't validate anything and submits the form.
This is the BootStrap Form input:
Upon successfully clicking the 'submit' button - Whatever was inputted in the field is stored in my SharePoint list:
This is the column in the SharePoint list:
Here is the code that I have:
<script>
$.validator.setDefaults( {
submitHandler: function () {
alert( "Submitted!" );
}
} );
$( "#signupForm1" ).validate( {
rules: {
ACI_client-name-input: "required",
messages: {
ACI_client-name-input: "Please enter the Client name",
/* THIS PART WAS PUT IN FROM GUIDE ONLINE FOR SHAREPOINT SITES - https://redcrust.wordpress.com/2014/04/13/using-jquery-validation-plugin-with-sharepoint-2013/ */
if ($("input[title='ACI_client-name-input']").attr("name") == undefined) {
$("input[title='ACI_client-name-input']").attr("name", $("input[title='ACI_client-name-input']").attr("id"));
}
errorElement: "em",
errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( "help-block" );
// Add `has-feedback` class to the parent div.form-group
// in order to add icons to inputs
element.parents( ".col-sm-5" ).addClass( "has-feedback" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
// Add the span element, if doesn't exists, and apply the icon classes to it.
if ( !element.next( "span" )[ 0 ] ) {
$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
}
},
success: function ( label, element ) {
// Add the span element, if doesn't exists, and apply the icon classes to it.
if ( !$( element ).next( "span" )[ 0 ] ) {
$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
},
unhighlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
}
} );
} );
</script>
<form id="signupForm1" method="post" class="form-horizontal" action novalidate="novalidate">
<div class="form-group row" style="margin-bottom: 15px;">
<label class="col-lg-10 control-label" for="ACI_client-name-input">Client Name</label>
<div class="col-lg-8 required-after"><input type="text" class="form-control" id="ACI_client-name-input" name="ACI_client-name-input" placeholder="Ex: FleishmanHillard" required><span class="">*</span>
</div>
</div>
<div class="form-group row col-lg-8">
<button type="submit" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='//fh126cloud.sharepoint.com/emplsrv/missupport/pages/MailChimpIntake.aspx'">Cancel</button>
</div>
</form>
Here is the JSFiddle url: https://jsfiddle.net/6ysz2eLc/3/
Any help would be highly appreciated!
Replace the "-" with "_" in the ID of the input tag.
Modify "ACI_client-name-input" to "ACI_client_name_input".
The example code for your reference:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%# Page Language="C#" %>
<%# Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery validate</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
<!--[if gte mso 9]>
<SharePoint:CTFieldRefs runat=server Prefix="mso:" FieldList="FileLeafRef,WikiField,_dlc_DocId,_dlc_DocIdUrl,_dlc_DocIdPersistId"><xml>
<mso:CustomDocumentProperties>
<mso:_dlc_DocId msdt:dt="string">5JSTYM4NXMKN-1550736763-50</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">56166d47-3111-4d9e-86c4-34fc0308c55f</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">http://sp2013/sites/team/_layouts/15/DocIdRedir.aspx?ID=5JSTYM4NXMKN-1550736763-50, 5JSTYM4NXMKN-1550736763-50</mso:_dlc_DocIdUrl>
</mso:CustomDocumentProperties>
</xml></SharePoint:CTFieldRefs><![endif]-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
$.validator.setDefaults({
submitHandler: function () {
alert( "Submitted!" );
}
});
$("#signupForm1").validate( {
rules: {
ACI_client_name_input: "required"
},
messages: {
ACI_client_name_input: "Please enter the Client name",
},
/* THIS PART WAS PUT IN FROM GUIDE ONLINE FOR SHAREPOINT SITES */
//if ($("input[title='ACI_client-name-input']").attr("name") == undefined) {
// $("input[title='ACI_client-name-input']").attr("name", $("input[title='ACI_client-name-input']").attr("id"));
//}
errorElement: "em",
errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( "help-block" );
// Add `has-feedback` class to the parent div.form-group
// in order to add icons to inputs
element.parents( ".col-sm-5" ).addClass( "has-feedback" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
// Add the span element, if doesn't exists, and apply the icon classes to it.
if ( !element.next( "span" )[ 0 ] ) {
$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
}
},
success: function ( label, element ) {
// Add the span element, if doesn't exists, and apply the icon classes to it.
if ( !$( element ).next( "span" )[ 0 ] ) {
$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
},
unhighlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
}
});
});
</script>
</head>
<body>
<form id="signupForm1" method="post" class="form-horizontal" action novalidate="novalidate">
<div class="form-group row" style="margin-bottom: 15px;">
<label class="col-lg-10 control-label" for="ACI_client-name-input">Client Name</label>
<div class="col-lg-8 required-after">
<input type="text" class="form-control" id="ACI_client_name_input" name="ACI_client_name_input" placeholder="Ex: FleishmanHillard" required/>
<span class="">*</span>
</div>
</div>
<div class="form-group row col-lg-8">
<button type="submit" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='//fh126cloud.sharepoint.com/emplsrv/missupport/pages/MailChimpIntake.aspx'">Cancel</button>
</div>
</form>
</body>
</html>
I am loading jquery.ime editor which supports the multi language editing, using this library https://github.com/wikimedia/jquery.ime/blob/master/examples/ced/script.js, there behavior is on "change" they are loading corresponding language JSON. I need that work on button click. on button click i am opening modal window, there I have text field, where I have write in regional languages. I know the language code based on that corresponding language is coming there, but right now the issue is I am able write in regional language on second click of button.
Here is my code:
open(writecontent: TemplateRef<any>, countvalue,books) {
this.config.keyboard = false;
this.modalRef = this.modalService.show(writecontent, Object.assign({}, this.config,{ class: 'gray modal-lg' }));
$( document ).ready( function () {
'use strict';
var $ced, ime, $imeSelector, $langSelector;
$.ime.setPath( '../../' );
$ced = $( '#ced' );
// Initialise IME on this element
$ced.ime( {
showSelector: false
} );
// Get the IME object
ime = $ced.data( 'ime' );
ime.enable();
$imeSelector = $( '#imeSelector' );
$langSelector = $( '#go' );
$langSelector.click(function() {
ime.setLanguage(books.language[0].language_id);
});
$ced.on( 'imeLanguageChange', function () {
listInputMethods( ime.getLanguage() );
});
function listInputMethods( lang ) {
$imeSelector.empty();
ime.getInputMethods( lang ).forEach( function ( inputMethod ) {
$imeSelector.append(
$( '<option/>' ).attr( 'value', inputMethod.id ).text( inputMethod.name )
);
});
$imeSelector.trigger( 'change' );
}
$imeSelector.on( 'change', function () {
var inputMethodId = $imeSelector.find( 'option:selected' ).val();
ime.load( inputMethodId ).done( function () {
ime.setIM( inputMethodId );
});
});
});
}
HTML CODE
<button id="go" (click)="open(books)" [ngClass]="{'disabled': disbutton}" [disabled]="disbutton" class="cl_add">ADD CONTENT</button>
<ng-template #writecontent>
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide();destrory()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"> write Content</h4>
</div>
<div class="modal-body" role="application">
<form ngNativeValidate (ngSubmit)="onSubmit()" #writeContentForm="ngForm">
<div class='imeSelector' style="display:none">
<select id="imeSelector"></select>
</div>
<div>
<label for="regLang">Title</label>
<input type="text" id="ced" class="txt_book_inf" name="regLang" minlength="10" maxlength="150" required />
</div>
<div>
<label class="new_span_txt">Write Content</label>
<textarea id="mytextareaid" name="mytextareaid" rows="20" cols="80" style="width: 100%; height:200px;"></textarea>
</div>
<div id="message"></div>
<br />
<div class="text-center">
<button type="submit" class="btn-left" class="btn btn-primary">SAVE</button>
</div>
</form>
</div>
</ng-template>
And i am working on Angular project both id and angular click event on the same button is that causing the issue ?
problem with click event after making this change its working fine.
$(document).on("click", "#go", function(){
});
In my spring project, I have this dashboard page, where each click in a link open the destination page in a separate popup window (created with jquery-ui dialog):
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li> <c:url value="/Usuario/listagem" var="usuario"/> <a class="popup" data-action="${usuario}/1/10/1" data-target="popup" href="#">Usuários</a></li>
<li> <c:url value="/logout" var="logoutUrl"/> Sair do sistema</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="popup"></div>
the code to do that it's the following:
$( ".dialog" ).dialog({
autoOpen: false,
closeOnEscape: true,
closeText: "fechar",
show: {
effect: "fadeIn",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
},
close: function( event, ui ) {
$(this).remove();
}
});
function add_dialog(container_div) {
var id_dialog_div = Math.floor(Math.random() * 1000000);
var dialog_div = $('<div id="dialog-'+id_dialog_div+'" class="dialog" title="Basic dialog"> <p> <span id="text'+id_dialog_div+'"></span> </p> </div>');
$(container_div).append(dialog_div);
return id_dialog_div;
}
function open_dialog(url, dialog_div) {
$.ajax({
type: "GET",
url: url
}).done(function(data){
var id_dialog_div = add_dialog(dialog_div);
var dialog_box = $('#dialog-'+id_dialog_div);
var $temp = $('<div/>', {html:data});
$( dialog_box ).dialog( { title: $temp.find('title').text() } );
$( dialog_box ).find('#text'+id_dialog_div).html( $temp.remove('head').html() );
$( dialog_box ).dialog( { height: 480 } );
$( dialog_box ).dialog( { width: 640 } );
$( dialog_box ).dialog( "open" );
});
}
$(document).on('click', '.popup', function (event) {
event.preventDefault();
var action = $(this).data('action');
var target = $(this).data('target');
var div = $("#"+target);
open_dialog(action, div);
});
the view which should be opened in the popup it's that:
<jsp:include page="../../common/listagem.jsp">
<jsp:param name="name" value="Usuario"/>
<jsp:param name="elements" value="login,first_name,last_name,email"/>
</jsp:include>
and the jsp common/listagem.jsp it's that:
<%# include file="../include/header.jsp" %>
<c:url value="/${param.name}/cadastra" var="cadastra"/>
<c:url value="/${param.name}/altera" var="altera"/>
<c:url value="/${param.name}/remove" var="remove"/>
<input type="hidden" name="pagina" value="${pagina}">
<input type="hidden" name="items" value="${items}">
<input type="hidden" name="ordem" value="${ordem}">
<sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
<p>
<button type="button" class="btn btn-default btn-lg">Cadastrar novo ${param.name} </button>
</p>
</sec:authorize>
<table border="2">
<thead>
<tr>
<th>#</th>
<c:forEach var="item" items="${param.elements}" varStatus="index">
<th class="col" data-property="<c:out value="${item}"/>"> <c:out value="${item}"/> </th>
</c:forEach>
<th></th>
</tr>
</thead>
<tbody class="content">
</tbody>
<tfoot>
<tr class="comando">
<sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
<td data-nome="altera" data-action="${altera}"></td>
</sec:authorize>
<sec:authorize access="hasPermission(#user, 'remove_${param.name}')">
<td data-nome="remove" data-action="${altera}"></td>
</sec:authorize>
</tr>
</tfoot>
</table>
<c:url value="/${param.name}/listagem.json" var="listagem"/>
<script>
$(document).ready(function(){
load_content("${listagem}", $('table'));
});
</script>
<%# include file="../include/footer.jsp" %>
My problem is that when I click in the close button, the windows isn't closed immediately, but it's shrunked, remaining only the titlebar. if I click again in the close button, then it close. Also, no title is displayed in the window, but a second (and smallest) titlebar is displayed on the screen with the correct title, and that one I only get to close after the second click in the first close button.
This is what happening:
Anyone knows what's happening here and how to solve this?
UPDATE
In the code above, the line:
$( dialog_box ).find('#text').html( $temp.remove('head').html() );
should remove from the jsp page the <head> tag and its content and append the <body> content inside the element <span> in this <div>:
<div id="dialog" class="dialog" title="Basic dialog">
<p> <span id="text"> </span> </p>
</div>
But when I run the application, and look the html code in the browser dev tool, all the content from the jsp page is added to the <div>, <head> included.
UPDATE 2
I try remove the function add_dialog, and change the <div> to this:
<div id="popup">
<div id="dialog" class="dialog" title="Basic dialog">
<p> <span id="text"> </span> </p>
</div>
</div>
and the function open_dialog to this:
function open_dialog(url, dialog_div) {
$.ajax({
type: "GET",
url: url
}).done(function(data){
//var id_dialog_div = add_dialog(dialog_div);
var dialog_box = $('#dialog');
var $temp = $('<div/>', {html:data});
$( dialog_box ).dialog( { title: $temp.find('title').text() } );
$( dialog_box ).find('#text').html( $temp.remove('head').html() );
$( dialog_box ).dialog( "open" );
});
}
But this work partially: when I open the dialog in the first time, it's displayeh correctly, but after I close and reopen it, the issue happens again.
UPDATE 3
I solve the problem with the shunkring / duplication with this code:
$( "#popup" ).dialog({
autoOpen: false,
closeOnEscape: true,
closeText: "fechar",
show: {
effect: "fadeIn",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
function open(url, target) {
$.ajax({
type: "GET",
url: url
}).done(function( data ) {
var $temp = $('<div/>', {html:data});
var conteudo = $temp.remove('head').html();
target.empty();
target.find('#text').html(conteudo);
$("#popup").dialog('open');
});
}
$(document).on('click', 'a.link', function (event) {
event.preventDefault();
var action = $(this).attr('href');
var target = $('#dialog');
open(action, target);
});
$(document).on('click', 'button.btn-link', function (event) {
event.preventDefault();
var action = $(this).data('href');
var target = $('#dialog');
open(action, target);
});
But now, my dialog is opened without content. Anyone knows what is wrong now?
not sure about all your javascript and i will be not going there but depending on version of jQueryUI your code uses
close: function( event, ui ) {
$(this).remove();
}
throws an error, check the console output in your browser, in my code i have dialog applied to #page_preview
$("#page_preview").dialog('remove');
Error: no such method 'remove' for dialog widget instance
but as soon as i use
$("#page_preview").dialog('close');
it works
my entrire code looks like this
$("#page_preview").dialog({
title: "Page Preview",
dialogClass: "no-close",
autoOpen: false,
resizable: true,
modal: true,
width: 1100,
buttons: [
{
text: "OK",
click: function() {
$(this).dialog("close");
}
}]
});
i believe that doing what you are doing in that close: section you are actually removing the element that dialog is applied to, but the dialog structure remains, thats why it seems like it has shrunk
hope it helps
FINAL EDIT:
take a look in here, it is slightly different but works, sorry that will be the best i can do for u goo.gl/GLqIYO
Just wondering if there is a better way than this:
var $lftWrp = $( document.createElement( "div" ) ),
$ctrlGrp = $( document.createElement( "div" ) ),
.attr({'data-role':'controlgroup', 'data-type':'horizontal'})
.controlgroup(),
$buttons = $('.someButtons');
$(this).prepend( $lftWrp.prepend( $ctrlGrp.prepend( $buttons ) ) )
to get something like this:
<div>
<div data-role="controlgroup" data-type="horizontal">
Click
Click
</div>
</div>
Specifically, is there a better way than "nesting" prepends()?
Thanks for help!
EDIT:
The prepend looks like this. Specifically, my problem seems to be that the buttons only get added on the last each-iteration. All other elements get the div and controlgroup. The last element gets div, controlgroup and buttons. No clues as to why...
$('.fiveElemnts').each(function() {
var $lftWrp = $( document.createElement( "div" ) ),
$ctrlGrp = $( document.createElement( "div" ) ),
.attr({'data-role':'controlgroup', 'data-type':'horizontal'})
.controlgroup(),
$buttons = $('.someButtons');
//if I log buttons here, they are there
console.log( $buttons );
$(this).prepend( $lftWrp.prepend( $ctrlGrp.prepend( $buttons ) ) )
});
try this:
pure js / jQuery
HTML:
<div class="button-container" style="display:none;">
Click
Click
</div>
<div class="result">
</div>
JS:
$.fn.controlgroup = function() {
return this;
};
(function() {
var
$template = $('<div><div></div></div>'),
$buttons = $('.someButtons');
$template
.find('>div')
.attr({'data-role':'controlgroup', 'data-type':'horizontal'})
.controlgroup()
.append($buttons);
$(this).prepend($template);
}).call($('.result'));
example
template
HTML
<div class="button-container" style="display:none;">
Click
Click
</div>
<div class="template-container" style="display:none;">
<div>
<div data-role="controlgroup" data-type="horizontal"></div>
</div>
</div>
<div class="result">
</div>
JS
$.fn.controlgroup = function() {
return this;
};
(function() {
var
$template = $('.template-container').find('>div').clone(),
$buttons = $('.someButtons');
$template.find('>div').controlgroup().append($buttons);
$(this).prepend($template);
}).call($('.result'));
example
for edit (template)
HTML:
<div class="button-container" style="display:none;">
Click
Click
</div>
<div class="template-container" style="display:none;">
<div>
<div data-role="controlgroup" data-type="horizontal"></div>
</div>
</div>
<div class="fiveElemnts"></div>
<br />
<div class="fiveElemnts"></div>
<br />
<div class="fiveElemnts"></div>
<br />
<div class="fiveElemnts"></div>
<br />
<div class="fiveElemnts"></div>
JS:
$.fn.controlgroup = function() {
return this;
};
var
$template = $('.template-container').find('>div'),
$buttons = $('.someButtons');
$('.fiveElemnts').each(function(i, el) {
//template
var
$templateForThisUse = $template.clone();
//example append
/*
var $buttonsForThisUse = $buttons.clone();
$templateForThisUse.find('>div').controlgroup().append($buttonsForThisUse);
*/
//best append - form link control
var $ref = $templateForThisUse.find('>div').controlgroup();
$buttons.clone().each(function(ib, eb) {
$(this)
.bind('click', function(event) {
console.log('fiveElemnts('+i+') -> link ('+ib+')');
})
.appendTo($ref.append(' <spam>link ('+i+'-'+ib+'): </spam>'));
});
$(this).prepend($templateForThisUse);
});
run example