I have a piece of HTML that looks like this
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
Above that I have a button that looks like this
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
Once that button is pressed I run a function to get the #imageContent div and append a new row with the same as before.
<script type="text/javascript">
function add_fields() {
var div = document.getElementById("imageContent");
div.insertAdjacentHTML('afterend','<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
</script>
This works as expected and adds a new row into the imageContent div.
See picture. If I click Select Image, it launches a modal window with all of my images, and when I select one, it runs this piece of js.
onInsertCallback: function (obj){
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
}
The problem I am having is that it does not get the correct input area to insert the value into, and instead always updates the first element. The full js code looks like this.
$(document).ready(function() {
jQuery(document).ready(function() {
/** Keep track of which modal button was clicked. **/
var currentModalBtn;
jQuery('.modal-btn').click(function() {
currentModalBtn = jQuery(this);
});
jQuery('.laradrop').laradrop({
onInsertCallback: function(obj) {
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
},
onErrorCallback: function(jqXHR, textStatus, errorThrown) {
// if you need an error status indicator, implement here
//Swal here
swal({
title: 'Error!',
text: 'An Error Occurred',
type: 'error',
showConfirmButton: false,
showCancelButton: true
});
},
onSuccessCallback: function(serverData) {
//
}
});
});
});
My question is, how can I ensure that I get the right input field that the button was clicked on to update that fields value and make sure the others stay as they were.
move var currentModalBtn; outside the ready so it is available to the callback(s)
Also have only one
$(document).ready(function() {
jQuery(document).ready(function() {
you have a mess of jQuery/$ and so on - this will likely work better:
function add_fields() {
var $div = $("#imageContent");
$div.append('<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
var currentModalBtn;
$(function() {
/** Keep track of which modal button was clicked. **/
$("#imageContent").on("click",".modal-btn", function() {
currentModalBtn = $(this);
});
$("#test").on("click",function() {
currentModalBtn.closest('.input-group').find('input.file-src').val("hello");
$('#myModal').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
<button type="button" id="test">
click
</button>
Related
I have different file inputs I want displayed once the previous one has been selected. At the moment I have
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
But I also have a lot more hidden rows for up to 10 inputs. So I dont need to create new code for each input within my Javascript, I am trying to display things dynamically. Essentially, if I select a file, it should display the next file input.
At the moment I have this
$(".fileGroup").on('change',function(){
var id = $(this).attr('id');
if (id.length) {
$(this).parents('.row').nextSibling('.row').child('.hiddenDiv').css("display", "table-footer-group");
}
});
So I get the id of the changed fileGroup. I then attempt to get its parents row, then get the next row, and display its hidden div. At the moment this does not seem to work. What would be the best way to display the next input block?
Thanks
Try with this code:
$(".fileGroup").on('change',function(){
var $next_element = $(this).parents('.row').next('.row').find('input[type="file"]');
if ($next_element.length) {
$next_element.prop('disabled', false);
}
});
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
The code is rather simple:
1. grab .row parent
2. look for the next element with .row class
3. find an file input in the next .row element
4. if the input exists, set its disabled attribute to
false
I have a modal form with tabs. I use AJAX to submit the form, which works fine. I want the form should be public: if the user is not logged in it should display the login, and submit the form after logging in using AJAX and Laravel.
public function acServices()
{
$id = Auth::user()->id;
$post = new Ac_services_request ;
$post->user_id = $id;
$post->services = Request::input('service');
$post->ac_type = Request::input('ac_type');
$post->type_services = Request::input('ac_services');
$post->no_of_ac = Request::input('no_of_ac');
$post->other_info = Request::input('other_info');
$post->address = Request::input('addr');
$post->landmark = Request::input('landmark');
$post->lga = Request::input('lga');
$post->specific_location = Request::input('specific_location');
$post->date = Request::input('date');
$post->time = Request::input('time');
$post->mobile = Request::input('');
$post->code = $string."".$id;
$post->save();
return 'success';
}
<div class="modal fade ac-services ativa-scroll" data-backdrop="static"
data-keyboard="false" id="ac-services" tabindex="-1" role="dialog">
<div class="modal-dialog " role="document">
<div class="modal-content " >
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span style="color: white;" aria-hidden="true">×</span>
</button>
<form class="contact" >
<div class="setup-content" id="step-1">
<div class="form-group input-group col-md-9">
<p>Select AC type</p>
<select required="required" class="form-control lg" name="ac_type">
<option></option>
<option>Window AC(S)</option>
<option>Split AC(S)</option>
<option>Window AC(S) and Split AC(S)</option>
</select>
</div>
<input type="hidden" name="service" value="A/C Repairs and Services">
<div class="form-group input-group col-md-9">
<p>Select type of service you need</p>
<select required="required" class="form-control lg" name="ac_services">
<option></option>
<option>Installation of new AC</option>
<option>General Cleaning</option>
<option>Un-installation of existing AC</option>
<option>Repairs (Diagnosis and rectification of AC(s)</option>
</select>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right"
type="button">Next</button>
</div>
<div class="row setup-content" id="step-2">
<div class="form-group input-group col-md-9">
<p>How many AC(s)</p>
<input type="number" required="required" class="form-control lg"
name="no_of_ac" placeholder="Enter Number of AC e.g 2" >
</div>
<div class="form-group ">
<p>Other Informations</p>
<textarea required="required" rows="5" cols="65" name="other_info">
</textarea>
</div>
<button class="btn btn-primary prevBtn btn-lg pull-left"
type="button">Back</button>
<button class="btn btn-primary nextBtn btn-lg pull-right"
type="button">Next</button>
</div>
<div class="row setup-content" id="step-3">
<div class="form-group input-group col-md-9">
<p>Where do you need the services ?</p>
<span>House/Flat No, Street, City</span>
<input type="text" required="required" class="form-control lg"
name="addr">
</div>
<div class="form-group input-group col-md-9">
<span>Landmark</span>
<input type="text" required="required" class="form-control lg"
name="landmark">
</div>
<div class="form-group input-group col-md-9">
<span>LGA</span>
<input type="text" required="required" class="form-control lg"
name="lga" >
</div>
<div class="form-group input-group col-md-9">
<span>Any other specific location direction/description?</span>
<input type="text" required="required" class="form-control lg"
name="specific_location"><br>
<span><b> Note: Accurate location helps us reach you promptly </b>
</span>
</div>
<input type="hidden" name="userid" value="1">
<button class="btn btn-primary prevBtn btn-lg pull-left"
type="button">Back</button>
<button class="btn btn-primary nextBtn btn-lg pull-right"
type="button">Next</button>
</div>
<div class="row setup-content" id="step-4">
<div class="form-group input-group col-md-9">
<p>Pick Date</p>
<input type="date" required="required" class="form-control lg"
name="date"> </div>
<div class="form-group ">
<p>Select Service Time</p>
<select required="required" class="form-control lg" name="time">
<option></option>
<option>10:00am - 11:00am</option>
<option>11:00am - 12:00pm</option>
<option>12:00pm - 1:00pm</option>
<option>1:00pm - 2:00pm</option>
<option>2:00pm -3:00pm</option>
<option>3:00pm - 4:00pm</option>
<option>4:00pm - 5:00pm</option>
</select>
</div>
<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Back</button>
<button class="btn btn-primary prevBtn btn-lg pull-right" id="submit" data-target=".success">submit</button>
</div>
<script>
$('#ac-services').on('hidden.bs.modal', function () {
location.reload();
})
$(function() {
$("button#submit").click(function(){
$.ajax({
url: 'ac-booked-service',
type: "post",
data: $('form.contact').serialize(),
beforeSend: function() {
$empty = $('form.contact').find("input").filter(function() {
return this.value === "";
});
if($empty.length) {
alert('Please fill all the field');
return false;
}else{
return true;
};
},
success: function (result) {
window.location.replace('/user/dashboard');
},
error: function(){
alert("failure");
}
});
});
});
</script>
It might be beneficial for you to follow a few tutorials to gain some understanding around this concept.
Simple and Easy Laravel Login Authentication
Laravel Docs on Auth
Auth0 Tutorial
I have the following code snippet:
(document)
.on("submit", ".edit-employee-form", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
method: $(this).attr("method"),
dataType: "html",
context: this,
data: $(this).serialize(),
success: function (response) {
p = $(this).parent();
p.prevAll('#first-name').html($(this).find("#first_name").val());
p.prevAll('#last-name').html($(this).find("#last_name").val());
p.prevAll('#email').html($(this).find("#email").val());
p.prevAll('#remain_case').html($(this).find("#remain_case").val());
$(this).parent().hide();
console.log('yay');
},
error: function (response, error) {
console.log("ERROR");
console.log(response);
console.log(error);
}
});
}
);
What it does is it submits a form to edit a particular employee (a list is displayed on the page) and then updates the html to reflect the changes the user submitted.
My problem is that some of the employees are also added via ajax calls, so their corresponding list elements are added dynamically to the html. I don't seem to be able to access their divs with id first-name, last-name, email etc. Any advice on how I can select divs which have been added dynamically?
I'm sorry for this being an image but I don't seem to be able to copy off the chrome console. The second element is added dynamically.
<div class="container firm-employees">
<div class="row">
<div class="col-lg-3 table-header">Name</div>
<div class="col-lg-2 table-header">Surname</div>
<div class="col-lg-3 table-header">E-Mail</div>
<div class="col-lg-1 table-header">Cases</div>
<div class="col-lg-3 table-header">Options</div>
</div>
<div class="row manage-user-row">
<div class="col-lg-3" id="first-name">Gray</div>
<div class="col-lg-2" id="last-name">Sawyer</div>
<div class="col-lg-3" id="email">masakotypu#hotmail.com</div>
<div class="col-lg-1" id="remain_case">1</div>
<div class="col-lg-3">
<button type="button" id="205" class="btn btn-default btn-xs edit-user-button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit User
</button>
<a href="edit/22">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
Edit Secretaries
</button>
</a>
</div>
<div id="ed-205" class="edit-employee-box">
<form id="ef-205" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/205">
<div class="row">
<div class="col-lg-3">
<label for="first_name" class="form_label">First Name</label>
<input type="text" name="first_name" value="Gray" id="first_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="last_name" class="form_label">Last Name</label>
<input type="text" name="last_name" value="Sawyer" id="last_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="email" class="form_label">E-Mail</label>
<input type="text" name="email" value="masakotypu#hotmail.com" id="email" class="form-control">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="phone" class="form_label">Phone Number</label>
<input type="text" name="phone" value="+899-67-1063253" id="phone" class="form-control">
</div>
<div class="col-lg-3">
<label for="remain_case" class="form_label">Remaining Cases</label>
<input type="text" name="remain_case" value="1" id="remain_case" class="form-control">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<br>
<input type="submit" class="btn btn-success btn-md" value="Update User">
<a href="edit/22">
<button type="button" class="btn btn-info btn-md">
Reset Password
</button>
</a>
</div>
<div class="col-gl-3">
</div>
</div>
</form>
</div>
</div>
<div class="row manage-case-row"><div class="col-lg-3" id="first-name">Evan</div><div class="col-lg-2" id="last-name">Thompson</div><div class="col-lg-3" id="email">pubazof#hotmail.com</div><div class="col-lg-1" id="remain_case">2</div><div class="col-lg-3"><button type="button" id="206" class="btn btn-default btn-xs edit-user-button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit User</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Edit Secretaries</button></div></div><div class="edit-employee-box" id="ed-206"><form id="ef-206" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/206"><div class="row"><div class="col-lg-3"><label for="first_name" class="form_label">First Name</label><input type="text" name="first_name" value="Evan" id="first_name" class="form-control"></div><div class="col-lg-3"><label for="last_name" class="form_label">Last Name</label><input type="text" name="last_name" value="Thompson" id="last_name" class="form-control"></div><div class="col-lg-3"><label for="email" class="form_label">E-Mail</label><input type="text" name="email" value="pubazof#hotmail.com" id="email" class="form-control"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><label for="phone" class="form_label">Phone Number</label><input type="text" name="phone" value="+927-10-4155477" id="phone" class="form-control"></div><div class="col-lg-3"><label for="remain_case" class="form_label">Remaining Cases</label><input type="text" name="remain_case" value="2" id="remain_case" class="form-control"></div><div class="col-lg-3"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><br><input type="submit" class="btn btn-success btn-md" value="Update User"><button type="button" class="btn btn-info btn-md">Reset Password</button></div><div class="col-gl-3"></div></div></form></div></div>
</div>
Your code should be sure the order of finished ajax calls because it's too fast to follow with human eyes. If when appending ajax call is not completed, you cannot select those elements using even element id.
To do so, you should put ajax function calls in "success handler".
if Number one is success then Number two in the one's success handler, and Number three in two's success handler, and so on...
The simple solution is to use PROMISE to get all of ajax relative functions in order.
Please refer to the link : https://api.jquery.com/promise/
To check the element is successfully appended in time, check out the console with 'console.info or console.log" or something like that. if it's length is 0, then the appending ajax call is not yet completed.
I making a "to do list" of task to be done. I have some buttons that will move the tasks up and down on the list.
I go the up and down buttons going. My only issue is that the task divs are able to move up and down the entire page. How can I keep the task divs to only moving up and down on on each other?
Thank you!
Here's my code:
$(document).ready(function(){
$('.up_button').click(function(){
$(this).parents('.task').insertBefore($(this).parents('.task').prev());
});
$('.down_button').click(function(){
$(this).parents('.task').insertAfter($(this).parents('.task').next());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write HTML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write XML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
1st: I think you need to define $(this) before going to insertAfter or insertBefore
2nd: you can use .closest()
$(document).ready(function(){
$('.up_button').click(function(){
var ThisIt = $(this);
$(this).closest('.task').insertBefore(ThisIt.closest('.task').prev('.task'));
});
$('.down_button').click(function(){
var ThisIt = $(this);
ThisIt.closest('.task').insertAfter(ThisIt.closest('.task').next('.task'));
});
});
Demo Here
i have a page where I have two buttons, one that opens a modal, and another one that only submits.
I have a .click event on the second button. If i go on the page and click the second button the click event goes fine, BUT if i first open the modal, close it and then i hit the second button, the first time does nothing and the second time it fires the .click event.
I would like to always fire the click event.
this is my code
$(document).ready(function(){
var focusout = false;
$(".prueba").click(function () {
if (focusout == false) {
focusout = true;
return;
}
});
var validator =$('#form1').validate(
{
ignore: "",
rules: {
parametros: {
required: function() { return focusout == true; },
},
terminos: {
required: function() { return focusout == true; },
}
},
highlight: function(element) {
$(element).closest('.grupo').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
}
});
$(".cancel").click(function() {
validator.resetForm();
});
}); // end document.ready
button 1:
<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
button 2:
<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
full form:
<form action="" method="post" id="form1" enctype="multipart/form-data">
<p>
<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
<button type="submit" class="btn btn-primary" name="carga_masiva"><i class="icon-arrow-up"></i> Carga Masiva</button>
</p>
<br>
<div class="col-lg-1 grupo">
</div>
<div class="col-lg-10 grupo">
<div class="panel panel-default pagination-centered">
<div class="panel-heading">Búsqueda en Catálogo</div>
<div class="panel-body">
<div class="form-group ">
<div class="col-lg-6 grupo">
<input type="text" class="form-control " id="terminos" name="terminos" placeholder="Términos de búsqueda">
</div>
<div class="col-lg-6 grupo">
<select id="e1" name="parametros" style=" width:80%">
<option></option>
<option value="1" >Autor</option>
<option value="2" >Título</option>
</select>
</div>
</div>
<br> <br>
<div style="text-align:center">
<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
</div>
</div>
</div>
</div>
<div class="col-lg-1 grupo">
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" name="myModal" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-wide">
<div class="modal-content">
<div class="modal-header">
<button type="submit" class="close cancel" data-dismiss="modal" aria-hidden="true">×</button>
{if isset($smarty.post.nueva_articulo) }
<h4 class="modal-title">Nueva Articulo</h4>
{/if} </div>
<div class="modal-body">
{if isset($smarty.post.nueva_articulo) }
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_titulo" class="control-label">Título</label>
<input type="text" class="form-control input-sm" name="art_titulo">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_enlace" class="control-label">Enlace</label>
<input type="text" class="form-control input-sm" name="art_enlace">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="aut_id" class="control-label">Autor(es)</label>
<input type='hidden' id='e13' name="autores" style='width:100%'/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_contenido" class="control-label">Contenido</label>
<textarea class="form-control input-sm" name="art_contenido" rows="5" ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="etiquetas" class="control-label">Etiquetas</label>
<input type="text" id="e12" name="etiquetas" style="width:100%">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="foto" class="control-label">Imagen</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Buscar… <input type="file" name="foto">
</span>
</span>
<input type="text" class="form-control" name="nombre" readonly="">
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<div class="checkbox">
<label>
<input type="checkbox" name="rating" value="si"> Habilitar Rating y Reviews
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="redes" value="si"> Habilitar Compatir en Redes Sociales
</label>
</div>
</div>
</div>
{/if}
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default cancel" data-dismiss="modal" name="cerrar">Cerrar</button>
{if isset($smarty.post.nueva_articulo) }
<button type="submit" class="btn btn-primary" name="insertar_articulo">Guardar Cambios</button>
{/if}
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<!-- /.modal -->
</form>
They are both of type submit. You should only have 1 submit button on a form
Button 1 could just be a button
<button class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
If you want, you can create a Form Object in javascript and generate it dynamically. That will do that you don't need to depend of the submit and forms, just fill the form object with the inputs that you want programatically (that even accept files or images).
But anyway, it seems that you have more than one click events on the same button if the one you want is triggering at the second attempt. You could try to play with event.preventDefault or $.unbind.
As you said taht you need to submit the inputs of the modal, try to place the content of the modal inside the tag and remove the submit type of one of the buttons.