I'm using the https://github.com/blueimp/jQuery-File-Upload script and until now I was able to dynamicly update my bootstrap progresse-bar with the following jQuery-File-Upload snippet:
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
console.log("progress: " + progress);
},
The html for this progress-bar looks like:
<div id="progress" class="progress progress-striped">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
But now this progress-bar don't get filled, it always remains at 0%. I added that console.log above to debug this and in the console everything looks good. I get all the "progress: 1" and so on messages.
So why the progressbar div doesn't get updated anymore?
Thanks
**update: Had to change the jquery line to
$('#progress .progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
Related
I have a number of DataGrids in our app.
Running tests with Playwright - Chromium - , sometimes prevents the rows from being rendered.
As can be seen in the screenshot, the rows exist, but just not being rendered.
More details, this mostly happens when running the tests from gitlab, but I have also seen it in the front end. Just rarely.
Anybody have any idea how to fix it?
All the affected Tables have a cell that renders like this:
renderCell: (params: any) => (
<div key={params.row.id} className="action_list_element">
{params.row.actionFile
.filter(
(af: ActionFile) =>
af?.actionFileType === ActionFileType.Output
)
.map((af: ActionFile, index: Number) => {
if (af?.file) {
return (
<div
className="no_line_hight"
key={params.row.id + index}
>
<b>
<FileIcon
fileName={af?.file.name}
isValid={af?.file.isValid}
fontSize={"small"}
/>{" "}
<a
href={
"/activity/" +
params.row.pmxActivity.id +
encodeURIComponent("/" + af?.file.absolutePath) +
encodeURIComponent(
"?versionId=" + af?.file.versionId
)
}
>
{af?.file.absolutePath}
</a>
</b>{" "}
({af?.file.revision}) -{" "}
{af?.file.isValid ? "valid" : "not valid"}
</div>
);
} else {
return "";
}
})}
</div>
),
Tried upgrading both Playwright and MUI to the lates version. Did not work.
Also tried to reproduce with my browser, but it went on fine.
It seams it appeared because we were running our test with a headless browser.
https://mui.com/x/react-data-grid/virtualization/
The Documentation explained what was happening, and how to fix it.
Hi so I have these radio buttons where I want to save their data as json in my Postgres db . It is not being sent I get a message.success back that says I did but when i check my db nothing happens.
I don't exactly know where I am wrong so if u can help please do share.
PS: Im using Ant Design vue that's where the a- come from .
I do click on a button and it opens a modal where I have the radio buttons :
<template #modalite="{ record }">
<span>
<a-button
#click="showModalite(record)"
class="btn btn-sm btn-light mr-2"
>
<i class="fe fe-edit mr-2" />
Modalité
</a-button>
</span>
</template>
and here is my buttons code :
<a-modal
v-model:visible="visible"
:width="500"
#ok="ChangeModalite(modelInfo)"
>
<div class="row">
<a-radio-group name="radioGroup" v-model:value="traitement">
<div class="col-md-6">Négociation directe</div>
<div class="col-md-3">
<a-radio value="Négociation directe" v-model:checked="modalite.negociation" />
</div>
<div class="col-md-6">Appel à concurrence</div>
<div class="col-md-3">
<a-radio value="Appel à concurrence" v-model:checked="modalite.concurrence"/>
</div>
</a-radio-group>
</div>
</a-modal>
The script :
setup() {
const visible = ref(false)
const traitement = ref('Négociation directe');
const modalite = ref({
negociation:false,
concurrence:false,
})
const showModalite = (record) => {
modelInfo.value = record
modalite.value = { ...modalite.value, ...record.modalite }
visible.value = true
}
const ChangeModalite = (record) => {
console.log(record.id+": "+traitement.value)
axios.patch('/prop/' + record.id,{
modalite:modalite.value,
})
.then(()=>{
record.modalite=modalite.value
Object.assign(
dataSource.value.filter((item) => record.id === item.id),
record,
)
message.success(`successfully updated !!`)
visible.value = false
})
.catch((e)=>{
message.warning("smthg wrong ")
})
}
return {
dataSource,
modelInfo,
showModalite,
ChangeModalite,
modalite,
traitement,
}
},
}
So what happens now is i get the 'succefully updated ' msg without being really updated.where did i miss something?
I changed the type from json to string in my db everything works fine when I changed this line :axios.patch('/prop/' + record.id,{ modalite:modalite.value, }) to this axios.patch('/prop/' + record.id,{ modalite:traitement.value, })
so yeah data gets updated, still don't know why with the json type it's not working but at least i found a way if u have an explanation or suggestion it will be appriciated .
I am trying to click on an expand/collapse button and my first code is working for one of the buttons but somehow it is not working for the other two. It is the same structure that is why it is making this as a strange problem.
Html 1
<!-- language: lang-html -->
<button class="collapser__header collapsed " type="button" data-toggle="collapse" data-target="#collapseIndkomstrubrikker" aria-expanded="false" aria-controls="collapseIndkomstrubrikker">Anden indkomst</button>
<div class="collapse" id="collapseIndkomstrubrikker"></div>
<!-- end snippet -->
Code which is not working
case "Anden indkomst":
try {
WebElement wb;
JavascriptExecutor js = (JavascriptExecutor)driver;
wb = driver.findElement(By.xpath("//*[#data-target='#collapseIndkomstrubrikker']"));
js.executeScript("arguments[0].click();", wb);
} catch (Exception b) {
throw new NoSuchElementException("kunne ikke finde " + knap);
}
break;
Html 2
<button class="collapser__header collapsed " type="button" data-toggle="collapse" data-target="#collapseFradragrubrikker" aria-expanded="false" aria-controls="collapseFradragrubrikker">Andre fradrag</button>
<div class="collapse" id="collapseFradragrubrikker"></div>
Code 2 which is working
case "Andre fradrag":
try {
WebElement wb;
JavascriptExecutor js = (JavascriptExecutor)driver;
wb = driver.findElement(By.xpath("//*[#data-target='#collapseFradragrubrikker']"));
js.executeScript("arguments[0].click();", wb);
} catch (Exception b) {
throw new NoSuchElementException("kunne ikke finde " + knap);
}
break;
change
wb = driver.findElement(By.xpath("//[#id='collapseIndkomstrubrikker']"));
to
wb = driver.findElement(By.xpath("//[#data-target='#collapseIndkomstrubrikker']"));
like the second example
Try to use WebDriverWait to wait for element be clickable as below:
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement wb;
wb = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//*[#data-target='#collapseIndkomstrubrikker']")));
js.executeScript("arguments[0].click();", wb);
There was smth wrong with my Eclipse which is the reason why my code didn't work in the first place. When I restarted Eclipse the code worked:)
I am facing a strange error while adding the facebook comment plugin in my AngularJS app.
The simplified structure of the app page is
<html ng-app="myapp">
<head>
...
</head>
<body>
<div>
...
</div>
<div ng-view></div>
...
</body>
</html>
The page with fb comment box is loaded in ng-view. The structure of page that contains fb comment box is as follows
<div id="fb-comment-box>
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div>
</div>
The page is angularjs scope variable which comes from controller. When i load this page in browser and do inspect element. It shows the correct page id i.e. data-href is
data-href = "http://mydomain.com/page/2"
But below the fb comment box, Facebook shows following error
Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is
unreachable.
I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?
This is probably due to the fact that the FB functionality kicks in before Angular is able to change the data-href attribute.
A directive seems like a good choice here:
You basically need to create the comment-box after Angular can provide the correct URL.
Because this involves asynchronous DOM manipulation, you need to use FB.XFBML.parse() to let FB process the comment-box once the data-href attribute is changed.
The directive:
.directive('dynFbCommentBox', function () {
function createHTML(href, numposts, colorscheme) {
return '<div class="fb-comments" ' +
'data-href="' + href + '" ' +
'data-numposts="' + numposts + '" ' +
'data-colorsheme="' + colorscheme + '">' +
'</div>';
}
return {
restrict: 'A',
scope: {},
link: function postLink(scope, elem, attrs) {
attrs.$observe('pageHref', function (newValue) {
var href = newValue;
var numposts = attrs.numposts || 5;
var colorscheme = attrs.colorscheme || 'light';
elem.html(createHTML(href, numposts, colorscheme));
FB.XFBML.parse(elem[0]);
});
}
};
});
The HTML:
<div id="fb-comment-box" dyn-fb-comment-box
page-href="https://example.com/page/{{page.id}}"
numposts="5"
colorscheme="light">
</div>
NOTE:
The directive's scope will constantly watch for changes in the page-href attribute and update the comment-box. You can change this to suit your needs (e.g. also watch for changes in the other attributes or bind it once and stop watching).
See, also, this short demo.
I want . Auto complete text box with multiple keyword. it's from database. if I use jQuery and do operation in client side mean. If the database size is huge, it leads to some issues. I need to know how this is done on the server side and get proper result.
I have already seen this topic but the operation is done on the client side. I need it from the database directly.
<html>
<head>
<title>Testing</title>
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.srchHilite { background: yellow; }
</style>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
NewAuto();
});
function NewAuto() {
var availableTags = ["win the day", "win the heart of", "win the heart of someone"];
alert(availableTags); // alert = win the day,win the heart of,win the heart of someone
$("#tags").autocomplete({
source: function(requestObj, responseFunc) {
var matchArry = availableTags.slice(); // Copy the array
var srchTerms = $.trim(requestObj.term).split(/\s+/);
// For each search term, remove non-matches.
$.each(srchTerms, function(J, term) {
var regX = new RegExp(term, "i");
matchArry = $.map(matchArry, function(item) {
return regX.test(item) ? item : null;
});
});
// Return the match results.
responseFunc(matchArry);
},
open: function(event, ui) {
// This function provides no hooks to the results list, so we have to trust the selector, for now.
var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|');
// Loop through the results list and highlight the terms.
resultsList.each(function() {
var jThis = $(this);
var regX = new RegExp('(' + srchTerm + ')', "ig");
var oldTxt = jThis.text();
jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
});
}
});
}
</script>
</head>
<body>
<div>
<label for="tags">
Multi-word search:
</label>
<input type="text" id="tags" />
</div>
</body>
</html>
take a look to Select2 it may help you.
Select2 is a jQuery based replacement for select boxes. It supports
searching, remote data sets, and infinite scrolling of results.
link
In your code, you have provided source as array. As you mentioned in comments, problem is how to get the data to source in jquery.
To make this work,
You need to do following
load jquery in header, which is you have already done.
Provid array,string or function for the source tag. [See api for
the source tag][1]
[1]: http://api.jqueryui.com/autocomplete/#option-source
In your serverside script, provid Jason encoded string.
If you check the API, you can see they have clear mentioned this.
Here is the jquery code
$(function() {
$( "#option_val" ).autocomplete({
dataType: "json",
source: 'search.php',
minLength: 1,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
Here is the php code, Sorry if you use differnt serverside script language.
<?php
// Create connection
$con=mysqli_connect("localhost","wordpress","password","wordpress");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result=mysqli_query($con,"select * from wp_users");
while($row = mysqli_fetch_array($result))
{
$results[] = array('label' => $row['user_login']);
}
echo json_encode($results);
mysqli_close($con);
?>