I've read all the other cases and I didn't have any luck. I'm doing my own jQuery grid. I'm trying to trigger a function when a save button is clicked(other jQuery functions are working)..... Here's where I include the Javascript file "newsletter.js"...The jQuery and bootstrap files are being loaded by the configuration file on PHP symfony 1.4 for that module...
<body><div class="col-lg-7 col-lg-7-bc">
<h3 style="font-size:20px"> JURISPRUDENCIA</h3>
<p>
</br>
</p>
<div class="col-xs-6 col-sm-4 item ico "><a id="newsletters" target="_blank">Newsletters |</a></div>
<div class="col-xs-6 col-sm-4 item ico "><a id="fallos" target="_blank">Navegar |</a></div>
<div class="col-xs-6 col-sm-4 item ico"><a id="cuadernos_mpd" target="_blank">Cuadernos del MPD</a></div>
<div id="grilla"></div>
</div>
<?php use_javascript("jurisprudencia/newsletter.js");
use_javascript("jurisprudencia/funciones_grilla.js");
?>
Here's my .js file:
$(document).ready(function(){
//API methods newsletters
//guardar
function guardarNewsletter(id){
alert(id);
/*$("#fieldset_"+id).show();
$("#fieldset_hidden_"+id).hide();
$.ajax({
url:"/newsletter/guardarNewsletter",
data: newsletter.serialize(),
success:function(data) {
alert("Row Guardada");
}
});*/
}
$("#newsletters").click(function(){
$.getJSON("/newsletter/getNewsletters", function(result){
var grid="<br><table id='newsletter_grid'>";
grid+="<thead><tr><th></th><th>Año</th><th>Mes</th><th>Quincena</th><th></th><th></th><th>Publicado</th></tr></thead>";
grid+="<tr><td><button id='agregar_button'>Nuevo</button></td></tr>";
grid+="<tr id='nuevo_field' style='display:none'>";
grid+=crearNuevaRow();
grid+="</tr>";
$.each(result, function(i, elem){
//show view fieldset, son los campos que se muestran para visualizar los datos
grid+="<tr id='fieldset_"+elem.id+"'>";
grid+=mostrarElementosViewMode(elem);
grid+="</tr>";
//hidden field
grid+="<tr id='fieldset_hidden_"+elem.id+"' style='display:none'>";
grid+=crearRowHidden(elem);
grid+="</tr>";
});
grid+="</table>";
$("#grilla").html(grid);
});
});
//crea los elementos editables con el value de su correspondiente existente en modo View o se usa para crear un elemento nuevo
function crearRowHidden(elem){
var nuevoHiddenFieldSet="";
nuevoHiddenFieldSet+="<td><input type='hidden' value='"+elem.id+"'></td>";
nuevoHiddenFieldSet+="<td><input name='anio' value='"+elem.anio+"'/></td>";
nuevoHiddenFieldSet+="<td><input name='anio' value='"+elem.mes+"'/></td>";
nuevoHiddenFieldSet+="<td><input name='quincena' value='"+elem.quincena+"'/></td>";
nuevoHiddenFieldSet+="<td><button value='Guardar' name='guardar_newsletter' id='guardar_newsletter_"+elem.id+"' onclick='guardarNewsletter("+elem.id+")'>Guardar</td>";
nuevoHiddenFieldSet+="<td></td>";
if(elem.publicado==1){
nuevoHiddenFieldSet+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado' checked='checked'></td>";
}else{
nuevoHiddenFieldSet+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado'></td>";
}
return nuevoHiddenFieldSet;
}
function crearNuevaRow(){
var nuevaRow="";
nuevaRow+="<td><input type='hidden' value=''></td>";
nuevaRow+="<td><input name='anio' value=''/></td>";
nuevaRow+="<td><input name='anio' value=''/></td>";
nuevaRow+="<td><input name='quincena' value=''/></td>";
//ver que ponerle en id
nuevaRow+="<td><button value='Guardar' name='guardar_newstletter' id=''>Guardar</td>";
nuevaRow+="<td></td>";
//ver que ponerle en id
nuevaRow+="<td><input type='checkbox' id='' name='publicado'></td>";
return nuevaRow;
}
//muestra los elementos del listado que se trae de la base de datos
function mostrarElementosViewMode(elem){
var elemento;
elemento+="<td><input type='hidden' value='"+elem.id+"'></td>";
elemento+="<td>"+elem.anio+"</td>";
elemento+="<td>"+elem.mes+"</td>";
elemento+="<td>"+elem.quincena+"</td>";
elemento+="<td><button id='editar_"+elem.id+"' value='Editar' onclick='muestraEditarFields(\""+elem.id+"\")'>Editar</td>";
elemento+="<td><button id='eliminar_newsletter_"+elem.id+"' value='Eliminar'>Eliminar</td>";
if(elem.publicado == 1){
elemento+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado' checked='checked'></td>";
} else {
elemento+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado'></td>";
}
return elemento;
}
});
This is the part that doesn't work:
nuevoHiddenFieldSet+="<td><button value='Guardar' name='guardar_newsletter' id='guardar_newsletter_"+elem.id+"' onclick='guardarNewsletter("+elem.id+")'>Guardar</td>";
I tried to use a jQuery click event and I keep getting the same error when I click the button, not the alert that should show up:
ReferenceError: guardarNewsletter is not defined
<!DOCTYPE html>
The edit button on this grid is working so I don't know why jQuery is not recognizing my function. I've read that could be a timing problem of when the function is being called, but I'm not sure in this case. Basically what I do is bring rows from the database, and create one for visualizing and one hidden for editing, the editing fields show up but when I want to save that error comes up. Any light on this matter?
