We Keep Coding

Load script after Ajax call not work

I have an ajax call:
$('#opt').change(function() {
var option = $("#cdc").val();
$.ajax({
type: "POST",
url: "orari_pause/select_spaccato.php",
data: 'option=' + option,
success: function(whatigot) {
$('#spaccato').html(whatigot);
}, //END OF SUCCESS
complete: function() {
$.getScript("orari_pause/script_opener.js", function() {
});
} //END OF COMPLETE
});
});
script_opener.js
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
title: 'Dettaglio sessioni',
height: 600,
width:800,
modal:true,
resizable: false
});
$( ".opener" ).click(function() {
var id = $(this).attr('id');
$( "#dialog" ).load( "orari_pause/dettaglio_sessioni.php?id="+id );
$( "#dialog" ).dialog( "open" );
$('.ui-widget-overlay').css('background', 'silver');
});
$( "#dialog2" ).dialog({
autoOpen: false,
title: 'Inserimento sessione',
height: 380,
width:300,
modal:true,
resizable: false
});
$( ".opener_session" ).click(function() {
var id = $(this).attr('id');
$( "#dialog2" ).load( "orari_pause/form_nuova_sessione.php?id="+id );
$( "#dialog2" ).dialog( "open" );
$('.ui-widget-overlay').css('background', 'silver');
});
});
In select_spaccato.php I have a button with class opener_session. When I click on it, the event doesn't fire (but the script is loaded correctly). I think is a problem with DOM... I also try to search into Stackoverflow forum with no results.
Can you help me?
EDIT
I try to load the JavaScript code inside whatigot variable, same results. The JS code is loaded, but the events not work.

Use event delegation
$('body').on('click',".opener",function() {
$('body').on('click',".opener_session",function() {

After Image drag and drop make AJAX save to save image and its class

I have a page where i am dragging image from one div and dropping it into another div. After drop event user has to click the save button for saving the data in database by making a get request .But after the button is clicked page is refreshed and that image is again in the previous div.
so what i can do to make a AJAX call so that image and its class is saved after drop event ?
javascript
$(function() {
adFitsApp.set_app_cookie("{{ adftoken }}", "{{ adfdy }}");
$('#sortable1 img').css("cursor", "pointer");
$( "#sortable1 div" ).sortable({
connectWith: "div",
stop: function( event, ui ) {
if($('#sortable2').find('img').length==6) {
$('#btn-start').html("<a id='btn-start' href='/dashboard/redeem/{{ pk }}' >Redeem Coupon</a>");
}
}
});
$( "#sortable2" ).sortable({
connectWith: "div",
change: function( event, ui ) {
var theID = ui.item.attr('id');
ui.item.addClass(theID + '-style');
}
});
$('#sortable2').find('img').length
});

Ajax
Sorry but I have no knowledge of ajax can you please give a demo how I
can do that
Ajax is basically just a way to send requests in JS (JQuery)
Using it is really simple:
$("element").on("event", function() {
$.ajax({
url: "your_url",
data: {your: "data"},
success: function(data) {
//success
},
error: function(data) {
//error
}
});
});
Code
For you, I'd try this:
<div class="control-group">
<a id="btn-start" href="/dashboard/save" data-pk="{{ pk }}" class="btn btn-primary btn-embossed">Save</a>
</div>
$("#btn-start").on("click", function() {
$.ajax({
url: $(this).attr("href"),
data: {pk: $(this).data("pk")},
success: function(data) {
//success here
},
error: function(data) {
//error here
}
});
});

javascript works on jsfiddle but not on my browser

I know this is strange but i have a jsfiddle which works fine but when i use it in my browser the 'edit name' button is not being triggered
the only difference between my browser code and the code i made in jsfiddle is that iv added ajax, but that is not the problem
here is my javascript
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
var each = $(this).closest('.each_file').find('.fnl');
$.post( "ajax/edit_filename.php", {
auth:auth
})
.done(function( data ) {
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("close");
}
}
});
$('.ui-dialog-content').html('<input type="text" class="newfname" value="'+data+'"/><div class="btn_l"><input type="submit" class="submit_btn" id="edit_filenameb" value="Edit Name" /></div>');
});
$('#edit_filenameb').click(function(e){
e.preventDefault();
var nname = $('.newfname').val();
console.log(nname);
if(nname == ''){
$('.submit_btn').effect('shake');
} else {
$.post('ajax/change_filename.php', {
nname:nname,
auth:auth
})
.done(function(data){
each.text(data);
$('#dialog').dialog('close');
});
}
});
});
and the jsfiddle is here, http://jsfiddle.net/RSvre/

i sorted this, i ended up just redoing the full code and i use $.ajax instead of $.post and in worked

javascript / jQuery using var as property id

I want to use translations in my code, they are coming from PHP/MySql and are converted into an javascript array:
var translate = <?= json_encode($Object->translate);?>;
Translations are available in Javascript (tested).
Now, I want to use them in my Javascript code, by example Jquery UI dialog:
$("#logoff").click(function(){
var action = "logoff";
var btnLogoff = translate["dialog/buttonLogoff"]; // this gives the translation from the array
var btnCancel = translate["dialog/buttonCancel"]; // this gives the translation from the array
$("#dialog").dialog(
{
title: translate["dialog/titleLogoff"],
modal: true,
resizable: false,
buttons: {
btnLogoff : function() {
var loadUrl = "includes/_ajax/actions.ajax.php";
$.post(loadUrl,{action:action}, function(data) {
if(data)
location.reload();
});
$( this ).dialog( "close" );
},
btnCancel: function() {
$( this ).dialog( "close" );
}
}
}
);
$("#dialog").html("<span class='ui-icon ui-icon-alert' style='float: left; margin: 0 7px 20px 0;'></span>" + translate["dialog/textLogoff"]);
});
The problem is dat the property btnLogoff is not showing the translated text but instead shows itself ("btnLogoff").
In the last section, translate["dialog/textLogoff"] is translated like it is meant to be. I am clearly doin something wrong. Can I use the var as a property id? How?

I think you aren't using the jQuery.dialog API fully. See http://api.jqueryui.com/dialog/#option-buttons
Have a try using the 'text' property of the buttons configuration:
$("#dialog").dialog(
{
title: translate["dialog/titleLogoff"],
modal: true,
resizable: false,
buttons: [
{
text : btnLogoff,
click : function() {
var loadUrl = "includes/_ajax/actions.ajax.php";
$.post(loadUrl,{action:action}, function(data) {
if(data)
location.reload();
});
$( this ).dialog( "close" );
}
}
,
{
text : btnCancel,
click: function() {
$( this ).dialog( "close" );
}
}
]
}
);

jquery dialog with issue after ajax call

I have a page that call from ajax a form with a specific target. this form has a delete entry and for that a warning with a jQuery dialog is used. everything works great.
BUT :
After doing the change or even not doing it, when I open another form (different form by ajax call) and I call the same code below described. When It is submit the dialog the #var_blabla as a value of 1 (the value of the first dialog opened/loaded) and for that moment should be '2'.
I try to figure it out.. So my problem I guess is not for the dialog it self, since I try to load a second page without the constructor and the dialog didn't open (what should be expected).
The problem is on the button 'Submit Delete' that has an event function and it stays active over another that is created.
The site have a lot of forms and many dialogs for each form, is there a wait to unbind, or destroy completely the dialog and the buttons? Ideas please?
Thanks
simplified 1st dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('1');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
simplified 2nd dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('2');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
UPDATE:
<script type="text/javascript">
submited=false;
var toggleOpened = true;
$("#admin_retractil_1").click(function () {
if(!toggleOpened){
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=true;
}
else{
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
var toggleOpened2 = false;
$("#admin_retractil_2").click(function () {
if(!toggleOpened2){
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=true;
}
else{
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
$(document).ready(function() {
//$( "button").button();
var locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$( "#EditDataForm" ).click(function() {
if(locked){
locked = false;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-unlocked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}else{
locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}
return false; });
$( "#DelDataForm").button({ icons: { primary: "ui-icon-scissors" }});
$( "#DelDataForm" ).click(function() {
$('#dialog-confirm-del').dialog('open');
return false; });
/*abre popup de alerta de eliminar */
arrayRemove.push("dialog-confirm-del");
$("#dialog-confirm-del").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Remove Stuff': function() {
$('#sel_action_form').val('TypoDesClients_DelDef');
$('#name').val('_____');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancelar: function() {
$(this).dialog('close');
}
}
});
$( "#AcceptChanges").button({ icons: { primary: "ui-icon-check" }});
$("#form_submeter").validator({
position: 'center right',
offset: [0, 0],
message: '<div><em /></div>'
}).bind("onSuccess", function(e, els) {
var numSucceeded = els.length,
numExpected = $(this).data('validator').getInputs().length;
if (numSucceeded === numExpected) {
if(!submited){submited=true;
SubmitFormSV('form_submit', 'action/action_a.php');
return false;
}else return false;
}
});
$( "#radio" ).buttonset();
$("#1_radio").click(function () {
$("#tr_1").show();
});
$("#2_radio").click(function () {
$("#tr_1").hide();
});
});
local lib:
function SubmitFormSV(formul, address)
{
DoChecks();
$("#loading").show("slow");
$.post(baseURL + address, $('#' + formul).serialize(), function(html){
$('#content').slideUp("slow", function () {
AjaxChargePage(html, true);
});
});
$("#loading").hide("slow");
return false;
}
next the next chuck of javascript is similar to this one.
and with this work because destroy didn't:
DoChecks() As:
$.each(arrayRemove, function() {
var element = arrayRemove.pop();
$('#'+element).remove();
});

When you're done with dialog 1 try...
$("#dialog-confirm-elimina").dialog("destroy");
or in your Cancel function...
$(this).dialog("destroy");
The .dialog command creates a new dialog on the element selected. You're doing this twice, and thus having problems. Once the dialog is created it can be reused using open and close methods or destroyed as I've shown above and then recreated.

Ok, then finally I got a solution that make everything works. Instead of using the
$("#dialog-confirm-elimina").dialog("destroy");
I use:
$("#dialog-confirm-elimina").remove();
I still don't know the reason but clearly don't have the problem anymore.
Thanks for the answer though.
PS: If anyone know how could this append I appreciate to illuminate me about it.Thanks