I created a loading display method like so
function customShowLoading(text){
$.mobile.loading( 'show', {
text: text,
textVisible: true,
theme: 'e',
html: ''
});
}
customShowLoading("Some message");
Every time the loading display shows, it just says 'loading' for its text
instead of the passed in parameter message. Any ideas why?
Have you tried switching the "text" variable to another name? It could be some variable name overlap.
Related
I am developing my first rails application and trying to show/hide a particular web element in my view by clicking an another link in my page. Below is my view,
%p
= link_to 'Show additional details', "#", id: "secondary-link"
%table{:id => "secondary"}
%tr
%th Key
%th Value
where "secondary-link" is the link which shows / hides my table. When the page is loaded first, the table is made to hide by the following line in my application.css.scss
#secondary{
display: none;
}
Also, i have added this following script in my assets/javascripts/application.coffee
#myFunction = (variable) ->
$(document).on "page:change", ->
$('#secondary-link').click ->
$('#secondary').toggle()
But, the table is not shown when i click the link in my page. However, in my console if i enter "myFunction" i am getting the function
ƒ (variable) {
return $(document).on("page:change", function() {
return $('#secondary-link').click(function() {
return $('#secondary').toggle();
});
});
}
and i am getting an error when i enter myFunction()
Uncaught TypeError: Cannot read property 'on' of undefined
at myFunction (application.self-4e74630fd8894bca1e22a8d66c1d7ebfaa39edf4f40e058aae03fc788a9f6d94.js?body=1:3)
at <anonymous>:1:1
Your help is appreciated.
I am not sure why this issue but i fixed it by using jquery directly in my application.js file and deleted the coffee file. My js file has the below coding to handle the event.
$(document).ready(function() {
$('#secondary-link').click(function(event){
return $('#secondary').toggle();
});
});
I have stopped and restarted the server and this worked.
I am giving the 3.5 -> 4.0 upgrade another go and 'almost' have this use case working like it was. What I am stuck on now is how to ALWAYS add a certain option to the ajax results list.
Here is what I have right now :
html:
<select id="vedit-filter" name="settings[filter]" class="form-control select2">
<option value="default" selected="">default</option>
</select>
js:
$("#vedit-filter").select2({
placeholder: "Select or enter application...",
allowClear: true,
multiple: false,
tags: true,
ajax: {
dataType: 'json',
delay: 1000,
type: 'post',
url: '/process/get_application_list.php',
data: function (term, page) {
return {
term: term, // search term
page_limit: 25, // page size
page: page // page number
};
},
results: function (data, page) {
var more = (page * 25) < data.total; // whether or not there are more results available
return {
results: data.results,
more: more
};
}
}
});
That will load 'default' as the initial selected option. If the user changes this then it is gone. I want a way for them to revert back to that initial selection if need be. Is the only way to include it in my returned results from ajax as an option? Or is there a way to do this on the js side?
UPDATE:
The default selection will always be dynamic, but in this example we are using a value/name of 'default'.
<select id="vedit-filter" name="settings[filter]" class="form-control select2">
<option value="default" selected="">default</option>
</select>
then in the js:
var default_filter = $("#vedit-filter").val(); //get the default loaded from the html
placeholder: {
id: default_filter, // or whatever the placeholder value is
text: default_filter // the text to display as the placeholder
},
I recently explained this on GitHub but didn't realize how much of a breaking change it was.
I want a way for them to revert back to that initial selection if need be.
Select2 provides the placeholder option, which can allow you to specify a placeholder like "Select an item" to the user if a selection is not already made. In order to support a <select>, which will select the first option by default (that's done by the browser), Select2 requires that a "placeholder" <option> exists. This also doubles as the option which Select2 uses to determine if the placeholder needs to be displayed.
In addition to the placeholder option, Select2 also allows the user to remove their selected option, which will revert the selection back to the placeholder option. This can be enabled through the allowClear option.
Is the only way to include it in my returned results from ajax as an option? Or is there a way to do this on the js side?
In your example, you are using a placeholder option with a value set on it. Because Select2 expects that the value is blank/empty by default, you need to tell Select2 what to look for when detecting the placeholder. This can be done by passing a data object into placeholder which Select2 will use when checking.
placeholder: {
id: 'default', // or whatever the placeholder value is
text: 'Select or enter application...' // the text to display as the placeholder
}
This will tell Select2 to display the placeholder when the value is set to default, which in your example appears to be the placeholder/default option.
What I am stuck on now is how to ALWAYS add a certain option to the ajax results list.
While I think we might have solved the XY problem here, I did want to note that adding a new option to the AJAX results list is as simple as overriding processResults. This is because processResults passes the list of data objects directly to Select2, which gives you a safe place to inject new options into the list.
You just need to .push the extra data object into the results and then pass them back to Select2.
I am trying to put the '¡' character (¡ in HTML) in one of my jQuery UI dialog buttons, but I can't figure out how this works. Here's my code:
registerhtml.dialog({
modal: true,
title: 'Registro en entreSartenes',
resizable: false,
buttons: [
{
text: "¡Regístrate!",
click: function(){
$(this).dialog('close');
connect();
}
},
{
text: "No gracias",
click: function() {
$(this).dialog('close');
}
}
]
});
When the dialog pops up, I actually get "¡Regístrate!" in my button. I have also tried putting the unescaped text directly in the JS code ("¡Regístrate!") but I get weird characters when it gets displayed.
Does anyone know a solution for this?
Since you're using javascript and not HTML, you'll need to put the actual character, not the HTML entity. You'll be able to do it if you use the right encoding (like UTF-8, but any encoding that can represent the characters you need should work). Make sure your file is UTF-8 and that it is interpreted as such by the browser, by setting the encoding in the HTTP headers or the HTML meta elements.
There is always an alternative in jQuery, you can do this:
var text = $('<i/>').html('í').text();
alert(text); // ---> á
It will create an unattached i tag, then evaluate the string í as HTML, then retrieve the rendered text content.
Also i found out you can use
\hexcode
works well
"Har hentet V\xE6rge": function() {
$( this ).dialog( "close" );
http://www.javascripter.net/faq/accentedcharacters.htm
I'm facing an issue with jqgrid multiple search (php back-end). The search dialog does not show the "+" (add filter) unless I click on the Reset button...
This is the code:
jQuery("#poi_grid").jqGrid({
url:'php/retrieve_pois.php',
datatype: "json",
colNames:['Name', 'Region', 'Type','Website','PDF','Lat','Lon'],
colModel:[
{name:'name',index:'name', width:150},
{name:'region',index:'region', width:70},
{name:'type',index:'type', width:70},
{name:'website',index:'website', width:90,sortable:false,search:false},
{name:'pdf',index:'pdf', width:150,align:"right",sortable:false,search:false},
{name:'lat',index:'lat', width:60, sortable:false,search:false},
{name:'lon',index:'lon', width:60, sortable:false,search:false},
],
pager:'#pager',
rowNum:20,
rowList:[20,30,50],
sortname: 'name',
viewrecords: true,
sortorder: "asc"
});
//Pager
jQuery("#poi_grid").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:false,refresh:false}
)
//Custom buttons
.navButtonAdd('#pager',{
caption:"",
title:"Search",
buttonicon:"ui-icon search",
onClickButton: function(){
jQuery("#poi_grid").jqGrid('searchGrid',
{sopt:['eq','ne','cn','bw','bn']},
{multipleSearch:true}
);
},
position:"last"
});
This is what I get when I open the search dialog (searching works fine but I have no possibilities to add another filter):
When I click on the rest button in the lower left corner of the dialog (even without performing a search before) I see the "correct" structure of the dialog... and multiple filters search works:
How to solve and obtain the complete dialog without clicking on reset?
Thank you in advance
You made an error in the call of searchGrid. Instead of
jQuery("#poi_grid").jqGrid('searchGrid',
{sopt:['eq','ne','cn','bw','bn']},
{multipleSearch:true}
);
you should use
jQuery("#poi_grid").jqGrid('searchGrid',
{sopt:['eq','ne','cn','bw','bn'], multipleSearch:true}
);
The problem which you describe with "Reset" button is just a bug in single field searching of jqGrid (see more here). Because of wrong usage of searchGrid the multipleSearch:true option will be ignored and the Searching dialog will be used as single field searching.
See this one.
jqGridObj = $('#poi_grid');
jqGridObj.navButtonAdd('#' + jqGridObj[0].id + '_toppager_left',{
caption:"",
title:"Search",
buttonicon:"ui-icon-search",
onClickButton: function(){
jqGridObj.jqGrid('searchGrid',
{sopt:['eq','ne','cn','bw','bn'], multipleSearch:true, showQuery: true}
);
},
position:"last"
});
I am trying to get jQuery.post() to run my php script and then open a jQuery UI dialog with the data that php script returns. Its supposed to come back as a form with a table and a textarea in it. It works great with alert(data); and i get a pop-up with all my data.
The problem starts if i turn off alert(). Now it opens 2 dialogs. One containing only the table, without textarea, and the second one absolutely empty.
What am i doing wrong here? How come all my data shows up in the alert(), but not in dialog? What do i need to do to fix it?
Oh, and do i need to also include $.ajax() before the $.post()?
Thank you.
$.post("/path/to/script.php",
{ id: this.id, value: value },
function(data){
// THIS WORKS
//alert(data);
// THIS DOES NOT WORK
$(data).dialog({
autoOpen: true,
width: 400,
modal: true,
position: 'center',
resizable: false,
draggable: true,
title: 'Pending Changes'
});
}
);
You don't need another $.ajax() call. The $.post() method is a wrapper shortcut to $.ajax(). What might be happening is you may be getting both default behavior and Javascript bound behavior. I'm assuming this $.post action triggered on a click. If so, then at the very end of your $.click() handler you need to return false to prevent default behavior.
$('input[type=submit]').click(function() {
$.post( /* ... */ );
return false;
});
This is how I handle it. I have a empty div and initialize the dialog upon document ready. Now on the ajax return load that div's html with the data received from PHP and call the "open" method of dialog. Simple and definitely works.
HTH
Ah! This was not a problem with the JS, but my php file.
The textarea was sitting outside of <div>blah blah</div>.
Problem solved.