So I want to swap two div elements that have a CKEditor inside. I viewed some of the previous questions and tried to do it that way. It's all OK, the elements are swapped. But one of the elements loses its content and becomes non-editable.
<div id="sections">
<div id="apresentacao_div">
<label id="apresentacao_label" for="apresentacao">Apresentação</label>
<button class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-arrow-up"></span>
</button>
<CKEditor:CKEditorControl ID="apresentacao"></CKEditor:CKEditorControl>
</div>
<div id="intro_div">
<label id="intro_label" for="intro">Introdução</label>
<button class="btn btn-default" onclick="remove(this)">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-default" onclick="upDiv(this)">
<span class="glyphicon glyphicon-arrow-up"></span>
</button>
<CKEditor:CKEditorControl ID="intro"></CKEditor:CKEditorControl>
</div>
</div>
I want to swap the two divs within the div with the id = "sections". And this is my code to swap:
function upDiv(ex) {
var div = document.getElementById("sections").getElementsByTagName("div");
for (i = 0; i < div.length; i = i + 4) {
if (div[i + 4].id.localeCompare(ex.parentNode.id) == 0) {
swapElements(div[i + 4], div[i]);
return false;
}
}
return false;
}
function swapElements(obj1, obj2) {
obj2.nextSibling === obj1 ? obj1.parentNode.insertBefore(obj2, obj1.nextSibling) : obj1.parentNode.insertBefore(obj2, obj1);
}
The for loop increments by 4 because of the transformation of the textarea into CKEditor adds a lot of new divs (4 in this case).
Can anyone help?
Not having too much familiarity with exactly what you are doing but i would try using a 'clone' method and then removing the original element off the page. It may be the values are not being copied, only the outline is but a clone should mean it duplicates as it is on the page and not how it is from the page source.
What about just swapping the data instead? Moving the DOM elements around is causing problems to me as well, but this works:
Replace your upDiv with this:
function upDiv()
{
var introData = CKEDITOR.instances['intro'].getData();
var presentacaoData = CKEDITOR.instances['apresentacao'].getData();
CKEDITOR.instances['intro'].setData(presentacaoData);
CKEDITOR.instances['apresentacao'].setData(introData);
return false;
}
This takes the data from one, and puts it in the other and vice versa.
Also, I noticed your controls don't have the runat server attribute set. You may want to change this:
<CKEditor:CKEditorControl runat="server" ID="intro"></CKEditor:CKEditorControl>
Finally, you call the function from your button like this:
<button class="btn btn-default" onclick="return upDiv();">
<span class="glyphicon glyphicon-arrow-up"></span>
</button>
Related
I made a "Add new shipment" button that creates a whole div that includes like 4 fields and a 2nd submit button under all that. that 2nd submit button is supposed to post this new div onto the page and add it to db but I am having trouble selecting the fields and selecting the new submit button. I think this is because the page is already loaded from the beginning, so this new div cannot be selected anymore? Here is my HTML that is created from the "Add new shipment" button:
// adds new shipment
const ADD_SHIPMENT_GRAY = function (){
return
<div class="shipment panel panel-success col-xs-2">
<div class="shipmentblocks row">
<div class="idzone btn-block classificationline">
<!-- label ---->
<input type="text" class="customer btn btn-default btn-xs col-xs-12" placeholder="Customer"><strong id="customertext"></strong></button>
<!-- contents -->
<input type="text" class="btn btn-default btn-xs col-xs-12" placeholder="File Number">
<strong class="boldedlabels" id="filenumber"></strong>
<span class="labelcontents"></span>
</button>
<button type="button" class="etd btn btn-default btn-xs col-xs-12" placeholder="ETD" id="etd">
<strong class="boldedlabels"></strong>
<span class="labelcontents" id="etddatepicker">ETD</span>
</button>
<button type="button" class="eta btn btn-default btn-xs col-xs-12" placeholder="ETA" id="eta">
<strong class="boldedlabels"></strong>
<span class="labelcontents" id="etadatepicker">ETA</span>
</button>
<button type="button" class="shipmentsubmission btn btn-default btn-xs col-xs-12">
<strong class="boldedlabels eta"></strong>
<span class="labelcontents" id="submitnewshipment">Submit</span>
</button>
</div>
</div>
</div>;
}
Here is my javascript code that executes the above code:
const SCRIPTS = function (){
$(function(){
const addshipment = $("#addshipment"),
labelsubmission = $(".labelsubmission"),
shipment = $(".shipment"),
shipmentblocks = $(".shipmentblocks"),
idzone = $(".idzone"),
etd = $(".etd"),
addsubmit = $("#addsubmit"),
zzz = $("#zzz"), // div to keep maximum new shipment as 1
submitnewshipment = $("#submitnewshipment"), // button to submit the new shipment
// Add New Shipment
addshipment.click(() => { // in console, indexes closer to 0 (ex: index [0]) = newer
//$(".shipment:first").before(ADD_SHIPMENT_GRAY());
// add new shipment green block
$("#zzz").html(ADD_SHIPMENT_GRAY());
});
})
}
You are creating dynamic data which requires you to use .on in jquery, otherwise it will not find the element.
Also dont repeat id's make it a class instead
$(document).on('click', '.addshipment', function () {
// in console, indexes closer to 0 (ex: index [0]) = newer
//$(".shipment:first").before(ADD_SHIPMENT_GRAY());
// add new shipment green block
$("#zzz").html(ADD_SHIPMENT_GRAY());
});
http://api.jquery.com/on/
In my HTML I have a div that is repeated, it is something like this:-
<div class="col-md-3 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<button class="btn btn-default btn-xs IncrementaProduto"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button class="btn btn-default btn-xs DecrementaProduto"><span class="glyphicon glyphicon-arrow-down"></span></button>
</div>
When I click the button that has the DecrementaProduto class, I want to get the specific index of that class, in this case DecrementaProduto is the first time that it appears on my html, I want the index = 0;
In my JavaScript I tried this:-
$(".DecrementaProduto").click(function(){
console.log($(".SeccaoProduto").index(this));
});
But I always get the value = -1 :S
How can I do this?
In your code $(this) refers to the clicked button but the collection does not include the button so the returned value would be -1.
Instead, you need to get the parent element .DecrementaProduto which contains the clicked element. Where you can use the parent() method to get the element.
$(".DecrementaProduto").click(function(){
console.log($(".SeccaoProduto").index($(this).parent()));
// ------------^^^^^^^---
});
Thanks so much for the help.
Here is the code:
<div class="UserActions UserActions--small u-textLeft">
<div class="user-actions btn-group not-following not-muting " data-user-id="1364896129" data-screen-name="VWnews" data-name="Volkswagen USA News" data-protected="false">
<span class="UserActions-moreActions u-inlineBlock">
<button type="button" class="js-tooltip unmute-button btn small plain-btn" title="Unmute #VWnews" data-placement="top">
<span class="Icon Icon--muted Icon--medium"><span class="visuallyhidden">Unmute #VWnews</span></span>
</button><button type="button" class="first-load js-tooltip mute-button btn small plain-btn" title="Mute #VWnews" data-placement="top">
<span class="Icon Icon--unmuted Icon--medium"><span class="visuallyhidden">Mute #VWnews</span></span>
</button>
<div class="dropdown ">
<button type="button" class="user-dropdown dropdown-toggle js-dropdown-toggle js-link js-tooltip btn plain-btn small-user-dropdown" aria-haspopup="true" data-original-title="More user actions">
<span class="user-dropdown-icon Icon Icon--cog Icon--small"><span class="visuallyhidden">User Actions</span></span>
</button>
<div class="dropdown-menu">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<ul>
Trying to click everything containing
<div class="user-actions btn-group not-following not-muting "
The string you are attempting to pass to document.querySelectorAll() does not have legal quoting and thus causes an error.
The string is this:
"[div class='user-actions btn-group not-following not-muting including "']"
which seems to have an extra " near the end. Perhaps is should be this:
"[div class='user-actions btn-group not-following not-muting including']"
But, then looking at that string, I don't see what useful selector you're even making with that. Selectors don't specify class='xxx' in them.
Now that you've edited your question a bit, I think you can just use this:
$(".user-actions.btn-group.not-following.not-muting").click();
This will call the click event on any element that has all of the above classes on it. Since you're question is tagged with jQuery, I used jQuery for the solution.
In CSS selectors, you precede a classname with a . to indicate to the selector query that this is a class name. If you have multiple class names with no space between them, then all those class names must exist on the same object for it to match.
In plain Javascript, you can do this:
var items = document.querySelectorAll(".user-actions.btn-group.not-following.not-muting");
for (var i = 0; i < items.length; i++) {
items[i].click();
}
And, you can see it work here: http://jsfiddle.net/jfriend00/3acy178k/
I want to change the content of a span in my form
HTML:
<form action="javascript:submit()" id="form" class="panel_frame">
<label>Origin:</label>
<div class="input-group" id="input-group">
<input type="text" id="origin" name="origin" class="form-control">
<span class="input-group-btn">
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
</span>
</div>
What I want change is che content of <span class="input-group-btn"> with
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
So what change is: the icon pushpin to remove and the action useCurrentPosition to clearPosition.
I' using jquery and despite I've read other answer about similar question on Stack like: How can I change the text inside my <span> with jQuery? and how to set a value for a span using JQuery I haven't solved the issue.
I tried:
$("#input-group span").html('
<button id="btn-default" class="btn btn-default" type="button" onclick="br_bus.useCurrentPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
');
,giving an id to the span and also modify the full div, but none solved my problem.
What am I missing?
Here's a way to overcome the problem of changing the onclick attribute, which is bad practice, without storing a Global var, and using jQuery delegation (learn to use it, it's really good):
$(document).on('click','.btn', positionChange); // Give that button an id on his own and replace '.btn' with '#newId'
// Not using an anonymous function makes it easire to Debug
function positionChange(){
var $btn = $(this), // Caching jQuery elements is good practice
$span = $btn.find('span'), // Just caching
pushpinApplied = $span.hasClass('glyphicon-pushpin'); // Check which icon is applied
( pushpinApplied ) ? useCurrentPosition() : clearPosition();
$span.toggleClass( 'glyphicon-pushpin glyphicon-remove' );
}
Rather than changing the function called in the onclick attribute I suggest having a flag in one function to define the logic it should follow.
For example:
function positionChange(this){
var $this = $(this);
if(!$this.data("currentpositionused")){
//useCurrentPosition() code here
$this.data("currentpositionused", true);
}
else {
//clearPosition() code here
$this.data("currentpositionused", false);
}
Then change your HTML to:
<button class="btn btn-default" type="button" onclick="positionChange(this)">
If you want to change only the onclick attribute of the button inside the particular span you can use the following in your script.,
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
});
EDIT
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
$("span.input-group-btn button span").attr("class","Your_class");
});
And also learn about how to change/add/remove attribute values....
Try this:
$("span.input-group-btn").html('<button class="btn btn-default" type="button" onclick="clearPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>');
Is it like This ?
how to change onclick event with jquery?
$("#id").attr("onclick","new_function_name()");
jquery change class name
$("#td_id").attr('class', 'newClass');
If you want to add a class, use .addclass() instead, like this:
$("#td_id").addClass('newClass');
I am defining a variable after the page load (storing numerical json data)
I can successfully put this variable in:
<span data-bind="text: extQty"></span>
And when the variable changes it updates the span with the appropriate variable (That works fine).
But it doesn't update my variable within my enable:
<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add, enable: pagedList().length < extQty" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a></p>
I need to have the enable effectively disable based on the value that is presented to "extQty". Right now I'm sending 5 to the extQty, and it seems the variable is only updating inside the "text" data-bind rather than the "enable" data-bind.
Knockout enable binding do not work with anchor tags.
So you have 2 solution to this.
Solution 1
<a href='#' title="edit" class="btn btn-primary" data-bind='click: function() {
if(pagedList().length < extQty())
{
//call the desired method from here
}' >
Solution 2
This button displays only when your condition is success and it has click binding
<a class="btn btn-primary" data-bind="click: $root.add, visible: pagedList().length < extQty()" href="#" title="edit">
This button displays only when your negative condition is success and it do not have click binding
<a class="btn btn-primary" data-bind="visible: pagedList().length >= extQty()" href="#" title="edit">
Try using
<p class="pull-right">
<a class="btn btn-primary" data-bind="style: { display: (pagedList().length < extQty) ? 'block' : 'none' }"
href="#" title="edit">
<i class="icon-plus"></i>Add Extension
</a>
</p>
Or else as pointed by #NaveenKumar.. You can use visible attribute...