Changing <ul><li> to <div> in fineuploader - javascript

I am using http://fineuploader.com/ and Twitter bootstrap
The html code for the uploading files looks like this
<ul class="qq-upload-list-selector">
<li class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector btn-small btn-warning" href="#">Cancel</a>
<a class="qq-upload-retry-selector btn-small btn-info" href="#">Retry</a>
<a class="qq-upload-delete-selector btn-small btn-warning" href="#">Delete</a>
<a class="qq-upload-pause-selector btn-small btn-info" href="#">Pause</a>
<a class="qq-upload-continue-selector btn-small btn-info" href="#">Continue</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<a class="view-btn btn-small btn-info hide" target="_blank">View</a>
</li>
</ul>
I want to change the <ul></ul><li></li> tags to <div> because I want the result to appear in a bootstrap grid. When I change the code can't I get any upload result for my uploaded files. Looks like new li-tags generates by fineuploader javascript.
How do I use div instead and so that I can display the result in a bootstrap grid?
Tested this
<div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6">
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
Rest of the code ....
</div>

Fine Uploader is expecting a container inside of the qq-upload-list-selector to to hold the file item. Consider adding another <div> as the only child of the qq-upload-list-selector.
So...
<div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6">
<div>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
Rest of the code ....
</div>
</div>
Why do you need a <div> for this? There's nothing special about a <div>. Just modify the style of the list item/list appropriately. Fine Uploader doesn't insert <li> tags if they aren't in your template.

Related

Vue js edit content according to its ID

I’m starting with vue js and I’m listing some data from database. More specifically posts with title, description and images.
I have Edit and Delete buttons. All posts are loaded using v-for. So when I click to edit one post, all the posts are “openning” to be edited.
I need to open the editing only in one post at a time. I mean, the specific post I really want to edit.
I made some progress with title input and with image delete badge but still need to work on Save and Cancel buttons (they open in all posts) and input files (when I choose files in second post for example, they load into first post).
<div id="app" class="row mb-50">
<div v-for="(item, index) in tours" v-bind:key="item.id" id="tours" class="col-md-12 mb-30">
<div class="tour-list">
<div class="tour-list-title">
<p>
<!-- here I can block input title to be disabled on other posts not than the specific one and I intend to do the same with textarea -->
<input class="inputEdit" type="text" ref="item.id" v-model="item.title"
:disabled="editingTour !== item.id" :class="{inputEditOpen: !editingTour}" />
</p>
</div>
<div class="tour-list-description">
<p>
<textarea class="inputEdit" :disabled="!editingTour" v-model="item.description"
:class="{inputEditOpen: !editingTour}">
{{ item.description }}
</textarea>
</p>
</div>
<div class="tour-list-pics">
<div class="row mb-20">
<div class="col-md-12">
<ul class="pics-list">
<li v-for="(image, index) in item.images">
<!-- here I could hide badge -->
<span :hidden="editingTour !== item.id" class="badge"
#click="$delete(item.images, index), deleteImage(image.imageID)">
<i class="fa fa-fw fa-times-circle"></i>
</span>
<div class="pics-list-image-container img-fluid cursor-pointer"
v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }"
#click="openModal = true, showModal(image.image)">
</div>
</li>
<li v-if="urls" v-for="(url, key) in urls" :key="key">
<div id="preview" :ref="'url'" class="pics-list-image-container img-fluid"></div>
</li>
<li v-if="editingTour" class="add-pics-item">
<div :hidden="editingTour !== item.id" class="mt-10">
<label for="file-upload" class="custom-file-upload">
<img class="img-fluid" src="./img/plus-icon.png">
</label>
<input id="file-upload" type="file" #change="onFileChange"
name="files[]" multiple />
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tour-list-options">
<div class="row">
<div class="col-md-6">
<span>
<button #click="editingTour = item.id" v-if="!editingTour"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button #click="editTour(item)" v-if="editingTour"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button #click="clearInput" v-if="editingTour"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button #click="deleteTour(item.id, index)" v-if="!editingTour"
class="btn border btn-circle tour-list-delete-btn">Delete</buton>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Update
If I use
<button #click="editTour(item)" v-if="editingTour == item.id" class="btn border btn-circle tour-list-edit-btn">Save</button>
all others Save buttons get hidden.
I think you can use add to each object of list new property isEditing and look for it in each item of the loop to check Save/Edit show.
Now your one prop editingTour can't be used for multiple edit, it can't store array of edited items id.
Template of buttons would look like:
<span>
<button #click="item.isEditing = item.id" v-if="!item.isEditing"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button #click="editTour(item)" v-if="item.isEditing"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button #click="clearInput(item)" v-if="item.isEditing"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button #click="deleteTour(item.id, index)" v-if="!item.isEditing"
class="btn border btn-circle tour-list-delete-btn">Delete</button>
</span>

how to stop iterating my like button inside my post

I am working on a post system with likes where the user can toggle the post`s like I have done everything correctly except the last step, the problem inside my v-for loop I fetch likes table from post-like relation(many to many since likes table has user_id and post_id) but it is iterating my button even when I add a condition look here-> duplicated like button, I have tried many things v-if, v-show I think the problem is with my algorithm I hope someone can fix that for me thanks.
<div class="panel panel-white post panel-shadow" v-for="post in posts" >
<div class="post-heading">
<div class="pull-left image">
<img v-bind:src="'img/profile/' + post.user.photo" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">{{post.created_at | hour}}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" v-for="(like) in post.likes" v-bind:style="like.user_id===id && like.post_id===post.id?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
<a class="btn btn-default stat-item" #click.prevent>
<i class="fa fa-reply-all"> {{post.comments.length}}</i> Comments
</a>
</div>
</div>
<comment-input :post="post" :userId="id" :userPhoto="userPhoto"></comment-input>
<ul class="comments-list" v-for="comment in post.comments?post.comments:''">
<comments :comment="comment" :userId="id" :userPhoto="userPhoto"></comments>
</ul>
</div>
<hr>
</div>
</div>
Don't loop through the button element, try to use a method likedBythisUser to check if the current user liked the post in order to bind it to the button style :
methods:{
likedBythisUser(post,id){
return post.likes.find(like=>{
return like.user_id===id && like.post_id===post.id;
}) // return a boolean value
}
}
template :
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" bind:style="likedBythisUser(post,id)?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>

not able to get the selected tab value to the controller in angular.js

In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input

How to use Jquery to handle dropdown implemented as a button

<div class="btn-group btn-grp-uk col-xs-12 ">
<button id="colorList" type="button" class="btn-phn btn btn-dropdown-white-
uk dropdown-toggle col-xs-12" data-toggle="dropdown">Red
</button>
<ul id="colordrop" class="dropdown-menu col-xs-12 p-l-0">
<sly data-sly-list.color="${modelobj.list}">
<li>${color}</li>
</sly>
</ul>
</div>
<div>
<p><strong>MONTHLY COST</strong></p>
<h3 id="monthly-price">£35<small>.00</small></h3>
</div>
I need help in changing the price in the tag when a value from the dropdown value is selected. Since the dropdown is implemented as a button which i cannot change can someone help me achieve this.
I have tried this but it is happening on first click of the button itself not the dropdown values. I am trying to get the event trigger on the second click since the first click will open the dropdown and the second click is responsible for option selection from the dropdown.
**var count=0;
$( "#colordrop" ).click(function(event){
count++;
if(count%2==0)
var colorListData = document.getElementById("colordrop").innerHTML;
document.getElementById('monthly-price').innerHTML = colorListData;
});**
The actual HTML is:
<div class="btn-group btn-grp-uk col-xs-12 ">
<button type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default Color <span class="glyphicon glyphicon-menu-down"></span> <span class="glyphicon glyphicon-menu-up"></span>
</button>
<ul class="dropdown-menu col-xs-12 p-l-0">
<li> Color1 </li>
<li> Color2 </li>
<li> Color3 </li>
<li> Color4 </li>
</ul>
</div>
<div class="col-xs-12 col-md-8 col-md-offset-4 text-center ">
<div class="col-xs-6 col-sm-4 col-sm-offset-2 col-md-3 col-md-offset-0 mob-cost">
<p><strong>MONTHLY COST FROM</strong> </p>
<h3>£35<small>.00</small></h3> </div>
</div>
You need to handle a click on each <li>, instead of the <ul>. I also notice in your HTML that you're missing the ID on the <ul> so make sure to add that as well.
$("#colordrop > li").click(function(event){
var colorListData = $(this).text();
console.log(colorListData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-grp-uk col-xs-12 ">
<button type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default Color <span class="glyphicon glyphicon-menu-down"></span> <span class="glyphicon glyphicon-menu-up"></span>
</button>
<ul id="colordrop" class="dropdown-menu col-xs-12 p-l-0">
<li> Color1 </li>
<li> Color2 </li>
<li> Color3 </li>
<li> Color4 </li>
</ul>
</div>
<div class="col-xs-12 col-md-8 col-md-offset-4 text-center ">
<div class="col-xs-6 col-sm-4 col-sm-offset-2 col-md-3 col-md-offset-0 mob-cost">
<p><strong>MONTHLY COST FROM</strong> </p>
<h3>£35<small>.00</small></h3> </div>
</div>
JSFiddle: https://jsfiddle.net/bf43v8vy/

How to display data from another table nested ng-repeat in angular js

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.

Categories