So I am trying to open modal over other modal which is not working. there is one link say "login" which opens up another modal for me. why this is happening ?
primary modal call from following
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="160">
<li>Sign Up</li>
<li class="menu-item-emphasis"><div>Login</div></li>
</ul>
primary modal
<div class="modal1 mfp-hide" id="modal-get-started" >
<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
<div style="padding: 50px;">
<form name="reg_form" id="get-started-form" class="nobottommargin">
<div class="row clearfix">
<div class="col-sm-12">
<h3 class="font-body">Register for Free Trial</h3>
</div>
</div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn1" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<br>
<div style='padding-top: 30px;padding-left: 50px' ng-show ="errorAlreadyRegister">
<span style='color:red;x' >Seems already registered. <a ng-click= "closePopup()" href="#" > Log in </a> instead?</span>
</div>
</form>
</div>
</div>
</div>
wants to open on login link
<div class="modal1 mfp-hide" id="modal-login" >
<div class="block divcenter" style="background-color: #FFF; max-width: 400px;">
<div style="padding: 50px;">
<h3 class="font-body">Login to your Account</h3>
<form class="nobottommargin">
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-username">Username:</label>
<input type="text" id="login-form-modal-username" name="login-form-modal-username" value="" class="form-control" />
</div>
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-password">Password:</label>
<input type="password" id="login-form-modal-password" name="login-form-modal-password" value="" class="form-control" />
</div>
<div class="col_full nobottommargin">
<button class="button button-rounded nomargin" id="login-form-modal-submit" name="login-form-modal-submit" value="login">Login</button>
Forgot Password?
</div>
</form>
<div class="line line-sm"></div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<!-- Login with Google -->
</div>
</div>
</div>
function called on login link
$scope.closePopup = function(){
$.magnificPopup.close();
$.magnificPopup.open({
items: {
src: '#modal-login'
}
});
}
Related
everyone, I am totally new to this and I was just wondering, is there a way to auto click a button when styling display:block?
I would really appreciate if someone can point me in the right direction.
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You can check the display property to trigger() the click the event:
if($('#advert').css('display') == 'block')
$('#statsContinue').trigger('click');
function closeStats(){
console.log('auto click happened');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You could check if the element is visible using .is(':visible') then trigger the click using click() like :
if ($('#advert').is(':visible')) {
$('#statsContinue').click();
}
function closeStats() {
alert('Clik triggered');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
I'm using a vue.js spa and webpack trying to show a PDF with mozilla's PDF.js. I got the examples working pretty easily but i struggle to get the full viewer with the toolbar working. I am requiring PDFjs with require('pdfjs-dist/webpack') so it doesn't send the "a fake worker has been set up" warning. I can't really find an SO question/guide or video that explains how to use the full viewer with webpack. The Documentation of this project is nearly non-existent either and i think i tried every bit i could find there, too.
Sorry if this seems like a stupid question, but I struggle with it big time and clicked every link i could find with google searches.
Thanks in advance guys
the code that i already have from the examples:
var PDFJS = require('pdfjs-dist/webpack');
const url = 'the-url-to-my-pdf';
const canvasContainer = document.getElementById('preview');
function renderPage(page) {
const viewport = page.getViewport(2);
let canvas = document.createElement('canvas');
let canvasWrapper = document.createElement('div');
canvasWrapper.classList.add('page');
const ctx = canvas.getContext('2d');
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
canvas.height = viewport.height;
canvas.width = viewport.width;
canvasWrapper.appendChild(canvas);
canvasContainer.appendChild(canvasWrapper);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++) {
pdfDoc.getPage(num).then(renderPage);
}
}
PDFJS.getDocument(url).then(renderPages);
the element 'preview' is just a wrapper div for multiple pdf pages
Here is a full example - complete single-file Vue component:
<template>
<div class="pdfjs">
<div id="outerContainer">
<div id="sidebarContainer">
<div id="toolbarSidebar">
<div class="splitToolbarButton toggled">
<button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs">
<span data-l10n-id="thumbs_label">Thumbnails</span>
</button>
<button id="viewOutline" class="toolbarButton group" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="document_outline">
<span data-l10n-id="document_outline_label">Document Outline</span>
</button>
<button id="viewAttachments" class="toolbarButton group" title="Show Attachments" tabindex="4" data-l10n-id="attachments">
<span data-l10n-id="attachments_label">Attachments</span>
</button>
</div>
</div>
<div id="sidebarContent">
<div id="thumbnailView">
</div>
<div id="outlineView" class="hidden">
</div>
<div id="attachmentsView" class="hidden">
</div>
</div>
</div> <!-- sidebarContainer -->
<div id="mainContainer">
<div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
<label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
<input id="findInput" class="toolbarField" tabindex="91">
<div class="splitToolbarButton">
<button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">
<span data-l10n-id="find_previous_label">Previous</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
<span data-l10n-id="find_next_label">Next</span>
</button>
</div>
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
<span id="findResultsCount" class="toolbarLabel hidden"></span>
<span id="findMsg" class="toolbarLabel"></span>
</div> <!-- findbar -->
<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
<div id="secondaryToolbarButtonContainer">
<button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button>
<button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">
<span data-l10n-id="open_file_label">Open</span>
</button>
<button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>
<button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>
<a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
<span data-l10n-id="bookmark_label">Current View</span>
</a>
<div class="horizontalToolbarSeparator visibleLargeView"></div>
<button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="56" data-l10n-id="first_page">
<span data-l10n-id="first_page_label">Go to First Page</span>
</button>
<button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">
<span data-l10n-id="last_page_label">Go to Last Page</span>
</button>
<div class="horizontalToolbarSeparator"></div>
<button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="58" data-l10n-id="page_rotate_cw">
<span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
</button>
<button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">
<span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
</button>
<div class="horizontalToolbarSeparator"></div>
<button id="toggleHandTool" class="secondaryToolbarButton handTool" title="Enable hand tool" tabindex="60" data-l10n-id="hand_tool_enable">
<span data-l10n-id="hand_tool_enable_label">Enable hand tool</span>
</button>
<div class="horizontalToolbarSeparator"></div>
<button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…" tabindex="61" data-l10n-id="document_properties">
<span data-l10n-id="document_properties_label">Document Properties…</span>
</button>
</div>
</div> <!-- secondaryToolbar -->
<div class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="toggle_sidebar">
<span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
</button>
<div class="toolbarButtonSpacer"></div>
<button id="viewFind" class="toolbarButton group hiddenSmallView" title="Find in Document" tabindex="12" data-l10n-id="findbar">
<span data-l10n-id="findbar_label">Find</span>
</button>
<div class="splitToolbarButton">
<button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
<span data-l10n-id="previous_label">Previous</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
<span data-l10n-id="next_label">Next</span>
</button>
</div>
<input type="number" id="pageNumber" class="toolbarField pageNumber" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-id="page">
<span id="numPages" class="toolbarLabel"></span>
</div>
<div id="toolbarViewerRight">
<button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button>
<button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
<span data-l10n-id="open_file_label">Open</span>
</button>
<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>
<button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>
<a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
<span data-l10n-id="bookmark_label">Current View</span>
</a>
<div class="verticalToolbarSeparator hiddenSmallView"></div>
<button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">
<span data-l10n-id="tools_label">Tools</span>
</button>
</div>
<div id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
<span data-l10n-id="zoom_out_label">Zoom Out</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
<span data-l10n-id="zoom_in_label">Zoom In</span>
</button>
</div>
<span id="scaleSelectContainer" class="dropdownToolbarButton">
<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
<option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
<option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
<option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>
<option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
<option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
<option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
<option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
<option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
<option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
<option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
<option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
</select>
</span>
</div>
</div>
<div id="loadingBar">
<div class="progress">
<div class="glimmer">
</div>
</div>
</div>
</div>
</div>
<div type="context" id="viewerContextMenu">
<div id="contextFirstPage" label="First Page"
data-l10n-id="first_page"></div>
<div id="contextLastPage" label="Last Page"
data-l10n-id="last_page"></div>
<div id="contextPageRotateCw" label="Rotate Clockwise"
data-l10n-id="page_rotate_cw"></div>
<div id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
data-l10n-id="page_rotate_ccw"></div>
</div>
<div id="viewerContainer" tabindex="0" v-loading="loading">
<div id="viewer" class="pdfViewer"></div>
</div>
<div id="errorWrapper" hidden='true'>
<div id="errorMessageLeft">
<span id="errorMessage"></span>
<button id="errorShowMore" data-l10n-id="error_more_info">
More Information
</button>
<button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
Less Information
</button>
</div>
<div id="errorMessageRight">
<button id="errorClose" data-l10n-id="error_close">
Close
</button>
</div>
<div class="clearBoth"></div>
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div>
</div> <!-- mainContainer -->
<div id="overlayContainer" class="hidden">
<div id="passwordOverlay" class="container hidden">
<div class="dialog">
<div class="row">
<p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
</div>
<div class="row">
<!-- The type="password" attribute is set via script, to prevent warnings in Firefox for all http:// documents. -->
<input id="password" class="toolbarField">
</div>
<div class="buttonRow">
<button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
<button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
</div>
</div>
</div>
<div id="documentPropertiesOverlay" class="container hidden">
<div class="dialog">
<div class="row">
<span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
</div>
<div class="buttonRow">
<button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
</div>
</div>
</div>
<div id="printServiceOverlay" class="container hidden">
<div class="dialog">
<div class="row">
<span data-l10n-id="print_progress_message">Preparing document for printing…</span>
</div>
<div class="row">
<progress value="0" max="100"></progress>
<span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
</div>
<div class="buttonRow">
<button id="printCancel" class="overlayButton"><span data-l10n-id="print_progress_close">Cancel</span></button>
</div>
</div>
</div>
</div> <!-- overlayContainer -->
</div> <!-- outerContainer -->
<div id="printContainer"></div>
</div>
</template>
<script>
require('pdf.js-viewer/pdf');
require('pdf.js-viewer/viewer.css');
export default
{
props:
{
src:
{
type: String,
required: true
},
filename:
{
type: String,
required: true
}
},
data ()
{
let a =
{
loading: false,
timer: null
};
return a;
},
created ()
{
document.addEventListener('pagerendered', this.pageRendered);
},
beforeDestroy ()
{
document.removeEventListener('pagerendered', this.pageRendered);
if (this.timer) clearInterval(this.timer);
},
mounted ()
{
this.loadFile();
},
watch:
{
src: 'loadFile'
},
methods:
{
loadFile ()
{
this.loading = true;
this.timer = setInterval(this.pollPDF, 100);
window.PDFJS.workerSrc = '/pdf.worker.js';
if (window.PDFView.pdfDocument) window.PDFView.pdfDocument.destroy();
window.PDFJS.webViewerLoad(this.src);
window.PDFView.setScale('page-width', true);
},
pageRendered (evt)
{
this.loading = false;
clearInterval(this.timer);
this.timer = null;
},
pollPDF ()
{
if (!window.PDFView.loading) this.pageRendered();
}
}
}
</script>
<style>
.pdfjs
{
width: 100%;
height: 100%;
}
.pdfjs #scaleSelectContainer
{
min-width: auto !important;
max-width: none !important;
}
#scaleSelect
{
min-width: initial !important;
}
.pdfjs .dropdownToolbarButton
{
background-image: none !important;
}
#toolbarViewerLeft
{
position: static !important;
}
#toolbarViewerRight
{
display: none !important;
}
#sidebarToggle
{
display: none;
}
.pdfjs #thumbnailView
{
width: 100% !important;
}
.pdfjs #errorWrapper
{
margin-top: 3px;
}
.pdfjs #errorWrapper button
{
color: #000;
padding-left: 6px;
padding-right: 6px;
}
</style>
so here is the code i use this for me to show/hide the comment box it works actually but the problem i encounter when i make multiple comments when i tried to click the reply on the 1st comment the comment box show/hide but when i tried to click other comments it doesnt work anymore it only works on the first one.... is there any way to fix this?..
HTML code
<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
<img src="img/icons/no-icon-available.png" class="pull-left" style=" border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>
<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
<span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script>
id must be unique in a HTML Page, you should change id to class replybutton and reply and jquery code would be,
$(document).ready(function(){
$('.replybutton').click(function(){
$(this).next('.reply').toggle();
});
});
Snippet,
$(document).ready(function() {
$('.replybutton').click(function() {
$(this).next('.reply').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
i have html structure like below
<div class="block-compose">
<button class="icon icon-smiley btn-emoji"></button>
<div tabindex="-1" class="input-container">
<div class="input-emoji">
<div class="input-placeholder" style="display: none;">Type a message</div>
<div dir="auto" spellcheck="true" data-tab="1" contenteditable="true" class="input">how r u</div>
</div>
</div>
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span></div></div>
now i want to replace
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span></div>
by
<button class="icon btn-icon icon-send send-container"></button>
i am facing bit difficult do via javascript i am able to do it via jquery .
please help me with this
you need to use replaceChild from the parent:-
var container = document.getElementsByClassName('ptt-container')[0];
var button = document.createElement('button');
button.className = 'icon btn-icon icon-send send-container';
container.parentElement.replaceChild(button, container);
<div class="block-compose">
<button class="icon icon-smiley btn-emoji"></button>
<div tabindex="-1" class="input-container">
<div class="input-emoji">
<div class="input-placeholder" style="display: none;">Type a message</div>
<div dir="auto" spellcheck="true" data-tab="1" contenteditable="true" class="input">how r u</div>
</div>
</div>
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span>
</div>
</div>
I can display the data from one table using ng-repeat tag. but the problem is when I am trying to display data from another table according to previous ng-repeat.
in detail I have 2 table one for sections
section_id section_name
1 php
2 java
another table is lecture
id section_id lecture_name
1 2 basics
2 1 loops
i could display sections using ng-repeat. but i cant display lecture below corresponding sections
<div class="course_curriculum " ng-repeat="section in sections">
<ul class="sections" >
<h4>Section {{$index+1}}: {{section.section_name}}</h4>
<!--<h4>Section 1: Introduction to Mobile Application Development</h4>-->
<li>
<div class="section-head" ng-click="view_lecture(section.id)" data-toggle="collapse" data-target="#section{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> Course Lectures
</div>
<ul id="section{{$index+1}}" class="collapse" >
<li>
<ul ng-repeat="lecture in lectures">
<li >
<div class="section-sub-head" data-toggle="collapse" data-target="#sub1">
<i class="fa fa-bars" aria-hidden="true"></i> {{lecture.lecture_name}}
</div>
<ul id="sub1" class="collapse lecture">
<li>
<div class="col-md-5 article-show" >
<img src="html/img/file.png" style="width: 100px; background-color: black ;margin-right: 10px" />
Article<br>
<a data-toggle="modal" data-target="#text"><i class="fa fa-pencil" aria-hidden="true"></i> Edit Content</a> <br>
</i> Replace With Video <br>
</div>
<div class="col-md-5 right text-right" >
<div class="btn-group" role="group">
<button type="button" class="publish">Publish</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="Preview dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Preview
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>As Instructor</li>
<li>As Student</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<button type="button" data-toggle="collapse" data-target="#Resources1" class="publish">Add Resources</button>
<button type="button" class="publish">Add Captions</button>
</div>
<div id="Resources1" class="collapse lecture">
<ul class="resouse">
<li class="active"><a data-toggle="tab" href="#Downloadable-File">Downloadable File</a></li>
<li><a data-toggle="tab" href="#from-Library">Add from Library</a></li>
<li><a data-toggle="tab" href="#External-Resource">External Resource</a></li>
<li><a data-toggle="tab" href="#Source-Code">Source Code</a></li>
</ul>
<div class="tab-content">
<div id="Downloadable-File" class="tab-pane fade in active">
<br/>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Add files no larger than 1.0 GiB." disabled>
</div>
<div class="col-md-4">
<label class="upload">
upload file<input type="file" style="display: none;">
</label>
</div>
<p>Tip: A resource is for any type of document that can be used to help students in the lecture.
This file is going to be seen as a lecture extra. Make sure everything is legible! </p>
</div>
<div id="from-Library" class="tab-pane fade">
<br/>
<p>Library is empty. Tip: You can use Accounts.academy File Uploader to upload several files at the same time. </p>
</div>
<div id="External-Resource" class="tab-pane fade">
<br/>
<div class="col-md-12">
<div class="form-group">
<label for="usr">Title:</label>
<input type="text" class="form-control" placeholder="A descriptive title" id="usr">
</div>
<div class="form-group">
<label for="pwd">URL:</label>
<input type="password" class="form-control" placeholder="https://example.com" id="pwd">
</div>
<button type="submit" value="Submit" class="publish">Submit</button>
</div>
</div>
<div id="Source-Code" class="tab-pane fade">
<br/>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Add files no larger than 1.0 GiB." disabled>
</div>
<div class="col-md-4">
<label class="upload">
upload File<input type="file" style="display: none;">
</label>
</div>
<p><B>Tip</B>: Only available for Python and Ruby for now. You can upload .py and .rb files</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<button type="button" data-toggle="modal" data-target="#saudio" class="sub-sub-section-add">Add Audio</button>
<button type="button" data-toggle="modal" data-target="#svideo" class="sub-sub-section-add">Add Video</button>
<button type="button" data-toggle="modal" data-target="#stext" class="sub-sub-section-add">Add Text/Article</button>
<button type="button" data-toggle="modal" data-target="#stext" class="sub-sub-section-add">Add File</button>
</li>
</ul>
</li>
</ul>
</li>
<li >
<div class="section-sub-head">
<form ng-submit="lecture_insert($index+1,section.id)">
<input type="text" class="form-control" id=lecture_name{{$index+1}} ng-model="section.lecture_name" placeholder="Enter a Title" required>
<!--<input type="text" ng-hide class="form-control" id=section_id{{$index+1}} ng-model="section.id" >-->
<div class="btn-group sub-section-add">
<button type="submit" style="background: rgba(0,0,0,0); border: none;">Add Lecture</button>
</div>
</form>
</div>
</li>
</ul>
</li>
<li>
<div class="section-head" data-toggle="collapse" data-target="#faq{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> FAQ
</div>
<ul id="faq{{$index+1}}" class="collapse">
<li>
<button type="button" data-toggle="modal" data-target="#mainfaq" class="section-add">Add More Faq</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
</ul>
</li>
<li>
<div class="section-head" data-toggle="collapse" data-target="#Exam{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> Exam
</div>
<ul id="Exam{{$index+1}}" class="collapse">+
<li >
<div class="section-sub-head">
fgfgh
</div>
<ul >
<li>
df
</li>
<li>
df
</li>
</ul>
</li>
</ul>
</li>
<li>
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#lecture" type="button" style="background: rgba(0,0,0,0); border: none;">Add Lecture</button>-->
<!--</div>-->
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#exam" type="button" style="background: rgba(0,0,0,0); border: none;">Add Exam</button>-->
<!--</div>-->
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#mainfaq" type="button" style="background: rgba(0,0,0,0); border: none;">Add FAQ</button>-->
<!--</div>-->
</li>
</ul>
</div>
A couple possible issues in the code provided:
Your inner ng-repeat is on the wrong element. It should be on the <li> element right above it. When nesting lists in bootstrap, you never repeat <ul> without wrapping each in atleast an <li> (usually an <a> too, which holds the dropdown text).
To achieve nested tables (a list of lectures within each section), you want the lectures variable to be on each section. This would make your inner ng-repeat something like ="lecture in section.lectures".
Here is a working JSBin where I made the changes I listed above. I omitted a lot of your HTML, because it was broken without the rest of your controller, but I left in enough to show how to get the nested repeats working.
Since you want to show the lecture conditionally, based on the above section_id, you can use ng-if for the desired result.
E.g.
<div class="section" ng-repeat="sec in sections">
<span>Section Id: <i>{{sec.section_id}}</i></span>
<span>Section Name: <i>{{sec.section_name}}</i></span>
<div class="lecture" ng-repeat="lec in lectures" ng-if="lec.section_id==sec.section_id"> <!--nested ng-repeat for lectures-->
<span>Lecture Id: <i>{{lec.lecture_id}}</i></span>
<span>Lecture Name: {{lec.lecture_name}}</span>
</div>
</div>
In JS my data is in the following format:
$scope.sections=[
{section_id:1,section_name:"php"},
{section_id:2,section_name:"java"}
];
$scope.lectures = [
{section_id:1,lecture_id:2,lecture_name:"basics"},
{section_id:2,lecture_id:1,lecture_name:"loops"}
];
I've prepared a JSBIN so you can see what's going on.