I am looking to populate a combo box with a Json file that is representing the file contents of a folder in a directory. I have snippets of code but its obviously not working and I am unsure how to go about implementing it correctly.
My Json code i want to populate the combo box looks like this:
["xml/cdcatalog.xml","xml/equip.xml"]
And this is the script i have embedded into the HTML page:
$(document).ready(function() {
$("#list1").jCombo(function() {
$.getJSON('Jsontest.php?q=' + escape($('#list1').val()), function(data) {
if ($("#list1").val() > 0) {
alert("You chose " + $("#list1").val());
}
});
});
});
I think you want something like this:
$(document).ready(function() {
$.getJSON("Jsontest.php", function(result) {
var options = $("#list1");
$.each(result, function(item) {
options.append($("<option />").val(item).text(item));
});
});
});
Code taken from this answer:
jQuery: Best practice to populate drop down?
Related
I'm trying to integrate Page Builder by SiteOrigin into my plugin. I've added some custom fields under the row styles via the siteorigin_panels_row_style_fieldsfilter found here. One of the custom fields is a select. I would like fields to either be hidden or displayed when the select is at a certain value. I've enqueued the Javascript to Page Builder using the siteorigin_panel_enqueue_admin_scriptsaction as per the documentation, and have even added the panelsopen event with some test code:
jQuery( document ).ready(function($) {
$(document).on('panelsopen', function(e) {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
However, this does not seem to be working. Any help or ideas how I could solve this would be greatly appreciated!
After some research I figured this out by using the ajaxComplete() function in jQuery. This is how it works:
$(function() {
$(document).ajaxComplete(function() {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
I hope this helps anyone trying to achieve something similar.
How can I put HTML in custom JavaScript message box? I have an HTML file and I want to load its content (not its code) in a message box. In front of my var I can write HTML code and it works good, but I want to load HTML with a lot of code in a separate file. Here is my JS code:
var showreadylist = function(element) {
var div = //any code that i could load my html here ! ;
div.click(function(event) {
$(".vote-notification").fadeOut("fast", function() { $(this).remove(); });
});
var where = where || 'parent';
if (where == 'parent'){
element.parent().append(div);
}
else {
element.after(div);
}
div.fadeIn("fast");
};
I am assuming you are able to use your custom js box as mentioned in description,
I am just providing you option to get data from html via ajax and append to your target div.
I am not sure about click event handler, but you need to handle in this way, this is just example code provided by you.
Sample code is as below
var showreadylist = function(element) {
var div = //any code that i could load my html here ! ;
$.get("htmlfile", function(data){
div = data;
div.click(function(event) {
$(".vote-notification").fadeOut("fast", function() { $(this).remove(); });
});
var where = where || 'parent';
if (where == 'parent'){
element.parent().append(div);
}
else {
element.after(div);
}
div.fadeIn("fast");
});
};
Alternatively you could use bootstrap modals
http://getbootstrap.com/javascript/#modals
Or JQuery Ui's dialog box
http://jqueryui.com/dialog
Hi i am currently working on a small project where I am supposed to query a JSON API with the format
{
"results": [
{
"livingstd": "80%",
"place": "ClassA"
},
{
"livingstd": "50%",
"place": "ClassC"
}
...
]
}
I am supposed to show the livings td whenever i hover over to a mini house icon.
so i wrote a javascript but it doesnt work. and I dont understand what went wrong. Can anyone shed some light on this? It doesn't show anything at all
<script type="text/javascript" src="js/function1.js"></script>
<script>
$(document).ready(function (e) {
//api url
var url = "dummyurl";
//store search term
var query;
//when the user hover over
$("button").hover(function (e) {
//get value and store in variable
query = $("#query").val();
//get the json file
$.getJSON(url + query, function (json) {
$.each(json.results, function (i, occupancy) {
$("results").append('<p>' + occupancy.occupancy + 'at' + occupancy.time + '</p>')
});
});
});
});
</script>
Did you look at the line that reads var url = "dummyurl";?
Also look at if your url and query are properly separated by a /. You can add query vars with '?' + $.param(queryObj).
Also if you look at the docs for hover, only giving one handler to hover means it gets called on mouseenter and mouseleave. Although that shouldn't prevent your code from working.
in my rails app, I have a select field by itself in a form. When the field changes I would like it to submit the form, and remotely retrieve the results.
Here is my current code (EDIT - this part works, I'm trying to add more to it):
$(function() {
$("#statusFilter").live("change", function() {
this.submit();
});
});
In a different part of the app I have the following, for a hyperlink, when clicked, returns the link remotely. So I'd like the same effect for the above form.
$(function() {
$("#posts_container th a").live("click", function() {
$.getScript(this.href);
return false;
});
});
here is another example of how it works with a search form
$("#dash_search input").keyup(function() {
$.get($("#dash_search").attr("action"), $("#dash_search").serialize(), null, "script");
return false;
});
The content I'm trying to remotely refresh lives in the posts_container
I personally wouldn't use a form around the select field in this instance if you are not using the form to house any other form elements.
From what you have said it looks like you are trying to achieve the following:
A user changes the select field.
The new value in the select field is then used to update the posts_container field.
If I have this correct I would code the following:
Select Field
<div>
<select id="statusFilter">
<option value="1">Option 1</option>
<!-- Other options... -->
</select>
</div>
JavaScript
<script type="text/javascript">
$(document).ready(function() {
$("#statusFilter").change(function() {
// Possibly show an ajax loading image $("#ajax_loading").show();
$("#posts_container").load("somepage.php", { value: $(this).val() }, function() {
// Do something to say the data has loaded sucessfully
// Possibly hide the ajax loading image $("#ajax_loading").hide();
});
});
});
</script>
I don't know if that helps or is on the right lines, but let me know and I will try and help further if not.
Try this
$(function() {
$("#statusFilter").live("change", function() {
//$(this).closest("form").submit();
var $form = $(this).closest("form");
$.post( {
url: $form.action,
data: $form.serialize(),
success: function(){ //Write code here to handle on success }
});
});
I'm trying to use AJAX to dynamically generate a JquerUI Accordion based on what is selected in a box. Currently I have
<div style="display:none" id="testselect">
</div>
With JS
$("#courseselect").change(function () {
$("#testselect").html(""); // Empty any previous data
$("#testselect").css("display", "block"); // Display it if it was hidden
$.getJSON('json.php?show=tests&courseid=' + $(this).val(), function(data) {
for(x in data)
{
$("#testselect").append("<h3 value=\"" + data[x].uno + "\">" + data[x].name + "</h3>");
$("#testselect").append("<div>Foo</div>");
}
$("#testselect").accordion({ change:function(event, ui) { courseid = ui.newHeader.attr("value");
} });
});
});
Now this works the first time I change my selection, but after that it reverts to plain old unformatted HTML. As if the call to .accordion() was never done. I'm guessing this has something to do with JQuery not wanting me to format something twice, but I really have no idea.
Try to destroy the accordion before you empty the div and start again:
$("#courseselect").change(function () {
$("#testselect")
.accordion("destroy")
.empty() // equivalent to .html("");
$.getJSON(...
More info here.
Good luck!