We Keep Coding

Conditional fields based on select value in SiteOrigin Page Builder

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.

Jquery If/else slide

I would like to make a filter for some blogs. Each blog will get a class with a category. If it matches it will show when a button is clicked. I thought I made some decent code, but it's not working. Can you please look at it and tell me what is wrong?
$('#filter').on('click', '.het-begin', function() {
if ($('.blogpagina').hasClass('het-begin')) {
$('.blogpagina').filter('.het-begin').slideDown();
}
else {
$('.blogpagina').slideUp();
}
});
If you guys want to see it in action you can look at: http://atmos.beer/blog.html. If you want some more information I can provide it.
Thanks in advance!

When you click the filter you could loop through each .blogpagina and check if it has the class het-begin. So it would look like this:
$('#filter').on('click', '.het-begin', function() {
$('.blogpagina').each(function() {
if ($(this).hasClass('het-begin')) {
$(this).slideDown();
} else {
$(this).slideUp();
}
});
});

Buttons change each other

Good evening!
I have a problem with conversion html code into new one, then go back by pressing new created button to the old one.
Problem is that when you press the button that one will convert into new one, but when I press again (new created code) it is not going back to the old one even when created code is correct (I mean id's).
There is my HTML code:
<div id="me_div">
me
</div>
And JavaScript:
$(function() {
$('#me').click(function() {
alert("Here I am!");
$("#me_div").html('noob');
document.getElementById("me_div").setAttribute("id", "noob_div");
});
$('#noob').click(function() {
alert("Im noob with JS.");
$("#noob_div").html('me');
document.getElementById("noob_div").setAttribute("id", "me_div");
});
});

Tom Rees answer will fix your problem, but consider rethinking your solution. Don't destroy and create new HTML every time a button is clicked and re-assign IDs! Why not show/hide?
http://jsfiddle.net/agmr2ytd/
$(function() {
$('#me').click(function() {
alert("Here I am!");
$("#me_div").hide();
$("#noob_div").show();
});
$('#noob').click(function() {
alert("Here I am!");
$("#noob_div").hide();
$("#me_div").show();
});
});

When that function executes, there is no #noob to bind to. You need to run the bind code every time the DOM is altered, eg.:
$(function() {
window.bindToMe = function() {
$('#me').click(function() {
alert("Here I am!");
$("#me_div").html('noob');
document.getElementById("me_div").setAttribute("id", "noob_div");
bindToNoob();
});
}
window.bindToNoob = function() {
$('#noob').click(function() {
alert("Im noob with JS.");
$("#noob_div").html('me');
document.getElementById("noob_div").setAttribute("id", "me_div");
bindToMe();
});
}
bindToMe();
});

jQuery focus between .click() events

This is homework, just declaring it now.
I have to load a 'quiz' via XML (completed successfully), and generate td cells (done) to display said questions (not done, test data instead).
Here is my source code for the javascript
var selected;
var $cell;
var $cell2;
$(document).ready(function() {
$("#getTitle").click(function() {
selected = $("#quizname>option:selected").text();
$("#quiztitle").html(selected+" Quiz");
$("#quiz2").html(selected+" Quiz");
murl = "quizdata.xml";
$.ajax({type:"GET",
url:murl,
success:loaddata,
cache:false,
dataType:"xml",
data:selected,
error:ajaxerror
});
});
});
var $xml;
function loaddata(respobj,status,xhr) {
//to do:
//dynamic td creation for each xml question
$("#questions").empty();
$xml = $(respobj).find("quiz:contains("+selected+")");
for (var i=0;i<$xml.attr("qnum");i++) {
$('<tr>').attr("id","questions"+(i+1)).appendTo("#questions");
$("<td>").attr("id","question"+(i+1)).appendTo("#questions"+(i+1));
$("#question"+(i+1)).html((i+1)+". "+$xml.find("question[num='"+(i+1)+"']").text());
$("#question"+(i+1)).addClass("th.thirty");
$("<td>").attr("id","blank_question"+(i+1)).appendTo("#questions"+(i+1));
$("#blank_question"+(i+1)).addClass("question");
$("#blank_question"+(i+1)).html("Put Answer Here");
$("<td>").attr("id","answer"+(i+1)).appendTo("#questions"+(i+1));
$("#answer"+(i+1)).addClass("question");
$("#answer"+(i+1)).html((i+1)+". "+$xml.find("answer[num='"+(i+1)+"']").text());
$("#answer"+(i+1)).click(selectCell);
}
}
function selectCell() {
$cell = $(this);
$cell.css("background-color","red");
for (i=0;i<$xml.attr("qnum");i++) {
$("#blank_question"+(i+1)).click(function() {
$cell2 = $(this);
$cell.css("background-color","lightgray");
temp_text = $cell.text();
temp_id = $cell.attr("id");
$cell.attr("id",$cell2.attr("id"));
$cell.text($cell2.attr('id'));
$cell2.attr("id",temp_id);
$cell2.text(temp_id);
$("#answer"+(i+1)).unbind("click");
$("#answer"+(i+1)).bind("click", function() {
selectCell();
});
});
}
}
function swapCell() {
$cell.css("background-color","lightgray");
alert($(this).attr("id"));
}
function ajaxerror(xhr,status,error) {
$("td#desc").attr("class","");
$("td#desc").html("xhr="+xhr);
$("td#desc").append("<br /><br />status="+status)
$("td#desc").append("<br /><br />error="+error);
}
My issue is (try it here: HomeWork Link) that the first time you click the first cell, swap it with the second, it works. However, it only works every OTHER click and swap, which makes me think that there are some binding issues or focus issues because I need it to swap seamlessly. Is there an obvious error in the code or am I missing a specific focus/bind event?
Thanks!
Edit: the values being displayed AFTER swapping are the cells ID attribute

After googling "jquery recursive .click binding" I found that instead of .click() I changed it to .live() and that works perfectly.

JQuery submit select field on change, ajax results

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 }
});
});