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...
Related
good morning:
<html>
<button type="button" class="btn btn-primary">Notifications <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-primary">Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
</html>
now how I implement these ?
for example like facebook when i click the notification appear a little submenu
anyone can help me ?
thanks
You can get the notifications from the database in your controller, put them in a variable, and pass it to a view.
In the view itself you can do something like this:
// $notificationsCount is the variable with number of notifications you passed to the
view in your controller
<button type="button" class="btn btn-primary">Notifications
<span class="badge badge-light"><?php echo $notificationsCount ?></span>
</button>
If you don't want to refresh the page, you could use ajax or some kind of event.
Example:
$('#someElement').on('click', function () {
//change value of the notification btn
});
I have a JS variable showing properly in an alert window. I am trying to place the same value in my href link on the modal that immediately follows the alert.
On the main page I have a script that shows the value in an alert box - It gets the clicked_id value from here:
<span onclick='executeChildSupport(this.id)'><a href='#' data-toggle='modal'><i class='fa fa-th' aria-hidden='true'></i></a></span>
This is the JS script that catches the clicked_id and shows in the alert box
function executeChildSupport(clicked_id) {
$(this).tooltip('hide');
event.currentTarget.innerHTML = "<i class='fa fa-th' aria-hidden='true' style='margin-left:10px'></i>";
alert(clicked_id);
$('#supportShare').modal('show');
return false
}
Following the alert, a modal is then shown, I am trying to place the "clicked_id" JS variable that was shown in the alert also in the modal's page where there is an HREF string as shown below (where it says "document.write(clicked_id)")
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK HERE <script>document.write(clicked_id);</script>
Any suggestions?
HERE IS THE MODAL CODE (BODY AREA ONLY - I believe that is all that is needed by the request)
<div class="modal-body" style="padding: 40px;color:#fff">
<table border="0" style="width:100%">
<tr>
<td colspan="3" style="padding:8px 3px 3px 2px">
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary" style="background-color:#171717;width:100%;border:none;padding:30px">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK <script>document.write(+clicked_id+);</script></a>
</td>
</tr>
</table>
</div>
What about this direction?
LINK
If I've understood your query then you can follow two ways,
(all codes below are not absolute working code, these are given for understanding, you may want to change them as you want)
not-recommended way is to use a global variable then using it in your link
example:
var current_id = null;
......
alert(clicked_id);
current_id = clicked_id;
....
Then doing
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE
<script>document.write(current_id);</script>
</a>
Recommended Way is to access and change the value of the dom after alert
example:
......
alert(clicked_id);
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
$('#supportShare').modal('show');
.....
or you can use a callback after the modal loads
......
alert(clicked_id);
$('#supportShare').modal('show', function(){
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
});
.....
Then changing a bit like:
<a href="#" target="_blank" class="btn btn-primary" id="dynamic_link">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE
<span id="clicked_id"></span>
</a>
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');
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>
I've a button under one class. They are configured to be dual-actioned.
They are disabled before a certain event. Their DOM while they are disabled:
<div class="doc-buttons">
<a href="#" onclick="actualsize();" id="tip-size" class="left btn btn-white btn-rounded btn-sm icon-size tooltipstered" disabled="disabled">
<i></i>
</a>
<a href="#" onclick="scaletofit();" id="tip-fit" class="left btn btn-white btn-rounded btn-sm icon-fit tooltipstered" disabled="disabled" style="display: none;">
<i></i>
</a>
...
After a certain event, they are enabled and their DOM changes to:
<div class="doc-buttons">
<a href="#" onclick="actualsize();" id="tip-size" class="left btn btn-white btn-rounded btn-sm icon-size tooltipstered">
<i></i>
</a>
<a href="#" onclick="scaletofit();" id="tip-fit" class="left btn btn-white btn-rounded btn-sm icon-fit tooltipstered" style="display: none;">
<i></i>
</a>
...
...
...
All I have to do is to Assert (using TestNG) that they are enabled and disabled at the right time (sounds pretty simple!)
ele1 = _driver.findElement(By.xpath("//a[#id='tip-size']"));
ele2 = _driver.findElement(By.xpath("//a[#id='tip-fit']"));
ele1,2 represent the locator of these button/s.
System.out.println("ele1.getAttribute("disabled")");
System.out.println("ele2.getAttribute("disabled")");
To my surprise, above print statements always return TRUE irrespective of the state of the buttons (enabled or disabled)
How should I assert them in their disabled and enabled state?
PS: I'm new to WebDriver, Java and TestNG. Any explanation, link to blogs, etc. would be highly appreciated
Yours should work. Not sure why does not. But, another workaround could be to check if the attribute present with JavaScriptExecutor
boolean hasTipSize = (boolean) ((JavascriptExecutor)driver).executeScript("return document.getElementById('tip-size').hasAttribute('disable')");
boolean hasTipFit = (boolean) ((JavascriptExecutor)driver).executeScript("return document.getElementById('tip-fit').hasAttribute('disable')");
They should return true if disabled attribute present else false
The elements should be re-initialized after the so-called "event".
Steps :
1. Capture the elements ele1, ele2.
ele1.getAttribute("disabled") will be "true/disabled"
ele2.getAttribute("disabled") will be "true/disabled"
Perform the event (which changes the state of the elements)
Now capture the elements once again.
ele1 = _driver.findElement(By.xpath("//a[#id='tip-size']"))
ele2 = _driver.findElement(By.xpath("//a[#id='tip-fit']"));
Now extract the element properties/attributes.
ele1.getAttribute("disabled") should be updated
ele2.getAttribute("disabled") should be updated