I'm using http://code.google.com/p/jquery-in-place-editor/
In my 'p' tag I have :
<p id="editme2">Hello...<br />Hi</p>
But editing the text produce "Hello...Hi" in the textarea (one line)
How can I replace 'br' with \n when the text show up in the textarea ?
I'm using :
$j("#editme2").editInPlace({
url: "admin.sub.inc.php",
bg_over: "#DBE5C0",
field_type: "textarea",
textarea_rows: "15",
textarea_cols: "35",
saving_image: "../images/indicator.gif",
value_required: true,
show_buttons: true,
success: function(data){
var result = data.replace(/(\r\n|\r|\n)/g, "<br />");
$j("#editme2").html(result);
}
});
Thanks for your help...
Use "pre" tag instead of "p" tag.
Related
I'm trying to place text to the left of my sweetalert box. How can i do it please?
Picture in attache, i would like to place text bordered to the left.
Actual view
My script:
Swal.fire({
title:'<strong>Info produit : '+data.id+'</strong>',
type: 'info',
html: '<b>Designation : </b>'+data.designation+'<br><b>Unite : </b>'+data.unite+'<br><b>Prix : </b>'+data.prix+'<br><b>Categorie : </b>'+data.categorie+'<br><b>Sous Categorie : </b>'+data.sous_categorie+'<br><b>Fournisseur : </b>'+data.fournisseur+'<br><b>Statut : </b>'+data.statut,
showCancelButton: false,
})
Swal.fire({
html: '<div class="align-left">text aligned left</div>',
})
.align-left {
text-align: left;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
I am using select2 plugin(ivaynberg.github.io/select2). I am trying to display a dropdown(select). It is getting all the items in data.php as options. However select2 is meant to be autocomplete plugin and should search for the search term a client input, and display the matching results only. At the moment it is displaying all the items and not getting the search results. Sorry for my language
data.php is echoing out this:
[{
"id": "1",
"text": "item1",
"exercise": "blah text"
}, {
"id": "2",
"text": "item2"
}
]
The code is:
$(document).ready(function () {
$('#thisid').select2({
minimumInputLength: 2,
ajax: {
url: "data.php",
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
});
and the input is:
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
I want to find a clue, I am quite new to this plugin and have spent a day for looking at examples.
select2 will not do AJAX if attached to a standard select form control. It MUST be attached to a hidden input control to load via AJAX.
Update: This has been fixed in Select2 4.0. From Pre-Release notes:
Consistency with standard <select> elements for all data adapters, removing the need for hidden <input> elements.
It can also be seen in function in their examples section.
I guess user2315153 wants to receive multiple remote values, and incorrectly assigning select2() with ajax call to a <select> element.
The correct way to get remote values, is using a normal <input> element, and if is desired multiple values, inform the "multiple" parameter on method call. Example:
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
minimumInputLength: 2,
multiple: true,
ajax: {
...
The <select> element CAN NOT be used to remote values
UPDATE: As of select2 4.0.0, hidden inputs has deprecated:
https://select2.github.io/announcements-4.0.html#hidden-input
This means: Instead of using an input to attrib select2 plugin, use an SELECT tag.
Pay attention: it's easy to use any format of json from your server. Just use "processResults" to do it.
Example:
<select id='thisid' class='select2-input select2'></select>
<script>
$("#thisid").select2({
multiple: true,
closeOnSelect: true,
ajax: {
url: "myurl",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) { //json parse
console.log("processing results");
//Transform your json here, maybe using $.map jquery method
return {
results: yourTransformedJson
};
},
cache: (maybe)true
}
});
</script>
I try the code, it works well. I think you not include jquery framework or check the path of js and css.
<!DOCTYPE html>
<html>
<head>
<link href="select2.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="select2.min.js"></script>
<script>
$(document).ready(function() {
$('#thisid').select2({
minimumInputLength: 2,
ajax: {
url: "data.php",
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
});
</script>
</head>
<body>
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
</body>
</html>
I think no need to go with hidden input element. You can give a try, get plain html data from ajax call and set it in and then init select2 resetting method. Here's code snippet
HTML
<select id="select" name="select" class="select2">
<option value="" selected disabled>Please Select Above Field</option>
</select>
Javascript
$.ajax({
type: "POST",
cache:false,
url: YOUR_AJAX_URL,
success: function(response)
{
$('#select').html(response);
}
});
$('#select').select2("val","");
Ajax Response :
<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>
After much reading, I decided to change the select2.js itself.
At line 2109 change it to
this.focusser.attr("id", "s2id_"+this.select.context.id);
If your input tag is as so
<select id="fichier">
Hence your input tag that is searching through the list will have an id of s2id_fichier_search
As far as I know, there shouldn't be a conflict and THIS will allow you to have multiple select2 on the same page and run your functions (including .get, .post) through their events eg.
$(function() {
$('#s2id_fichier_search').keyup(function() {
console.log('Be Practical')
})
}
So this will run like if you were to use
<select id="fichier" onkeyup="console.log('Be Practical')">
In my case, an older version of select2 library was causing the issue, make sure that you include the latest version of js and css in the web page.
I am using jQuery-ui autocomplete to create a search field with a remote data source. Everything works and I get results, however the results does not display in a list below the textfield like it is supposed to. The results are put in a list and gets displayed at the bottom of the page.
Here is my code:
<script>
$(function() {
$( "#autocomplete" ).autocomplete({
source: function(request,response)
{
$.ajax({
url: "<?php echo $this->webroot; ? >portfolios/ajax_clients_dropdown/"+request.term+".json?callback=ajax_clients_dropdown?",
// dataType: "text",
async: false,
//jsonp: "callback",
jsonpCallback: "ajax_clients_dropdown",
success: function(data)
{
var fin = [];
for(a=0;a<10;a++)
{
fin[a]= data[a].value;
}
console.log(fin);
response(fin);
console.log("success");
},
appendTo: "#autocomplete",
position: {'my': 'left top', 'at': 'left top', 'of': '#autocomplete'},
error: function(response){console.log("Fail");}
});
}
});
});
</script>
<div class = "ui-widget" id="container">
<label for ="autocomplete">Clients</label>
<input id = "autocomplete" style ="" autocomplete = "on">
</div>
It doesn't matter weather I do the appendTo with #container or #autocomplete, it does nothing.
Here is the result that's supposed to be displayed:
["3434a62c bf592581", "a3ee7766 7894a7e0", "ea41d8ec 4e7df334", "919f6fac 96d4cdf0", "24ecac17 bfbed443", "f0270fc4 a2659300", "ea803fac 94b43df4", "5337467f 1a41e158", "fc54b844 0a19b69e", "a7393c7b aaea998b"]
Does anyone have an idea why this is happening?
I think that there might be a few issues here. If you just want the default behaviour for displaying, then you shouldn't need to mess with appendTo or position. Try the following:
<script>
$(function() {
$( "#autocomplete" ).autocomplete({
source: function(request,response) {
$.ajax({
url: "<?php echo $this->webroot; ?>portfolios/ajax_clients_dropdown/"+request.term+".json?callback=ajax_clients_dropdown?",
// dataType: "text",
async: false,
//jsonp: "callback",
jsonpCallback: "ajax_clients_dropdown",
success: function(data) {
var fin = [];
for(a=0;a<10;a++)
{
fin[a]= data[a].value;
}
console.log(fin);
response(fin);
console.log("success");
},
error: function(response){console.log("Fail");}
});
}
});
});
</script>
<div class="ui-widget" id="container">
<label for="autocomplete">Clients</label>
<input id="autocomplete" style="" autocomplete="on">
</div>
Except for the data source, which you say is working, this should be the same as what I have here.
Edit: This answer doesn't fix the problem, see comments for details.
Your appendTo and position properties have been assigned to the AJAX request, not to the autocomplete call. It's easier to see with the indentation fixed.
$(function() {
$( "#autocomplete" ).autocomplete({
source: function(request,response) {
$.ajax({
url: "<?php echo $this->webroot; ?>portfolios/ajax_clients_dropdown/"+request.term+".json?callback=ajax_clients_dropdown?",
// dataType: "text",
async: false,
//jsonp: "callback",
jsonpCallback: "ajax_clients_dropdown",
success: function(data) {
var fin = [];
for(a=0;a<10;a++)
{
fin[a]= data[a].value;
}
console.log(fin);
response(fin);
console.log("success");
},
error: function(response){console.log("Fail");}
});
},
appendTo: "#autocomplete",
position: {'my': 'left top', 'at': 'left top', 'of': '#autocomplete'}
});
});
For those of you who have this issue, first make sure you go here:
https://jqueryui.com/autocomplete/
And you are referencing the correct css and jquery files. Next, this was my issue in ASP.NET MVC 4. I created a bundle, using
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/core.css", .....
but when I referenced it in my layout page, instead of calling #Styles.Render("~/Content/themes/base/css") I was calling #Scripts.Render("~/Content/themes/base/css").
This caused
<script src="/Content/themes/base/jquery-ui.css"></script>
to be inserted rather than
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet"/>
so for those of you running into this situation using MVC, that could be it, or you may just not be referencing the correct css and js files properly.
I'm trying to add a check box column to KendoUI grid.
Here is the fiddle.
I have followed this post from the Kendo forum.
Can somebody please point out what I have done wrong here.
This is the relevant code:
data-columns = '[
{"field":"Name", "filterable":true},
{"field":"Price", "filterable":false},
"UnitsInStock",
{"field":"Recon"},
"template": "<input type='checkbox' #= (Recon == true) ? checked ='checked' : '' # disabled />"
]'
Change your columns to this:
[{"field":"Name", "filterable":true}, {"field":"Price", "filterable":false}, "UnitsInStock", {"field":"Recon", "template": "<input type=\"checkbox\" />" }]'
You had some errors in your syntax there, as well as some unescaped quotes.
Hope this helps.
You can simply add a column as a checkbox column.
data-columns = '[
{"field":"Name", "filterable":true},
{"field":"Price", "filterable":false},
"UnitsInStock",
{"field":"Recon"},
{ selectable: true, width: "50px" } //selectable means it's a checkbox column
]'
In template section use CheckBox see example below:
{
title: "Deck Options",
field: "DeckOption",
template: "<input type='checkbox' #= (DeckOption == true) ? checked ='checked' : '' # disabled/>",
width: "7%",
sortable: {
mode: "single",
allowUnsort: false
}
I am trying to set a Profile Property (ComplexID) through the standard Account controller code that comes with the standard MVC3 template. I am using a autocomplete widget from the jquery library to set the value of a hidden field when a value is selected from the autocomplete. The setter is confirmed by an alert I added, but when I try to save the textbox values, I get an error from the Model.IsValid saying the the ComplexID needs to be set. In the Account Model, I have set the ComplexID field as [Required]. What am I doing wrong? Thanks
<div>
<input type="text" name="q" id="complexes" />
#Html.HiddenFor(m => m.ComplexID, new { id="complexid"})
</div>
and the Jscript is:
$("#complexes").autocomplete({
source: function(request, response) {
$.ajax({
url: "/Account/QuickSearch", type: "POST", dataType: "json",
data: { query: request.term },
success: function(data) {
response($.map(data, function(item) {
return { label: item.Name + " , " + item.Address1, value: item.Name, id: item.ComplexID };
}))
}
})
},
minLength: 3,
select: function(event, ui) {
var selecteditem = ui.item;
$("#complexid").text(selecteditem.id);
alert(ui.item ? ("You picked '" + selecteditem.label + "' and the hidden textbox now has a value of " + $("#complexid").text()) : "Nothing selected");
}
});
Change this:
$("#complexid").text(selecteditem.id);
on
$("#complexid").val(selecteditem.id);