Search jQuery

jQuery Forum

Using jQuery

oygodo

Multiple fields with Bootstrap editable and jquery

in Using jQuery • 6 years ago

Hi,

I'm having toruble paassing two different fields with Bootstrap editable and jquery. My script is as follows:

<script type="text/javascript">
jQuery(document).ready(function() {
        $.fn.editable.defaults.mode = 'popup';
        $('.xedit').editable();
        $(document).on('click','.editable-submit',function(){
            var x = $(this).closest('td').children('span').attr('id');
            var y = $('.input-sm').val();
            $.ajax({
                url: "add_homepreds.php?id="+x+"&home="+y,
                type: 'GET',
            });
        });
        $.fn.editable.defaults.mode = 'popup';
        $('.test').editable();
        $(document).on('click','.editable-submit',function(){
            var x = $(this).closest('td').children('span').attr('id');
            var y = $('.input-sm').val();
            $.ajax({
                url: "add_awaypreds.php?id="+x+"&away="+y,
                type: 'GET',
            });
        });

});
</script>

I'm trying to load <span class="xedit"> for one field and <span class="test"> for another with different url outputs, but bootstrap editable js makes the 'input-sm' in both cases and always runs the first url "add_homepreds.php?id="+x+"&home="+y" together with the second one (both fields are always updating).

Can someone help me figure this out?

Replies(11)

jakecigar

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

var x = $(this).closest('td').children('span').attr('id');

Says go up to the first td, go down to the first span, and get it’s id. Your spans don’t have ids.

JΛ̊KE

oygodo

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

Hi jakeigar,

I'm sorry, the span's actually have an id, but the id is the same for both spans (just forgot to put them in the code here).

The class is used to difference between the spans, but I can't get it to work.

I think this code is the problem:

var y = $('.input-sm').val();

The query updates both spans, even if I only want one to update (Either 'xedit' span or 'test' span).

jakecigar

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

but the id is the same for both spans

An id must be unique. Don’t use ids for this use a data- attribute instead.

The class is used to difference between the spans, but I can’t get it to work.

What classes? you didn’t share any HTML.

Can you share a link to the page or a demo that has this problem?

JΛ̊KE

oygodo

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

What I currently have is the match id as the id of the span:

<span class="xedit" id="(matchid from mysql)">
<span class="test" id="(matchid from mysql)">

Adn that is what this is passing on to the php file:

var x = $(this).closest('td').children('span').attr('id');

In the url you can see the id being passed:

url: "add_homepreds.php?id="+x+"&home="+y,

If you have a suggestion on how I can pass this id to the php file different, please share. How would you use data-attribute in this example?

jakecigar

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

<span class="xedit" data-id="(matched from mysql)">
<span class="test" data-id="(matchid from mysql)">

var x = $(this).closest('td').children('span').data('id');

BUT,

var y = $('.input-sm').val();

concerns me. Is there one input-em or is there one per <td>?

JΛ̊KE

oygodo

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

That is the problem, because the Bootstrap js uses "input-sm", and only passes on values with that class name.
If I change the class to for example:

var y = $('.input-sm2').val();

It isn't passing on.

I have attached the Bootstrap js file for reference.

Attachments

bootstrap-editable.rar
Size : 33.35 KB Downloads : 356 Download

jakecigar

Re: Re: Multiple fields with Bootstrap editable and jquery

6 years ago

I don’t want to read a nearly 5000 line program.

Do you wind up with an <input class="input-sm"…> or some other markup? Is there one or many of these?

JΛ̊KE

oygodo

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

If you search for 'input-sm' in the file attached previously, you can see that it defines 'input-sm' as standard value. The way I see it, I cannot change this value.?

jakecigar

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

I see it referenced but it is not obvious what it does with it.

You didn’t answer my question.

Do you wind up with an <input class="input-sm"…> or some other markup? Is there one or many of these?

If you share a link to your page I will look for how it used input-sm.

JΛ̊KE

oygodo

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

I'm sorry, but I can't share link as it is password protected, but I can explain:

The Bootstrap JS makes a new INPUT with class "input-sm". The value of the INPUT is passed through from the variable y.

The problem, as I see it, is that the jquery script always uses the first span, because of this line:

var x = $(this).closest('td').children('span').attr('id');

Thuis is regardless of the span class or data-id.

How can I define the script to find the next span? I'm sure there is a simple solution. I have tried:

var z = $(this).closest('td').next().children('span').attr('data-id');

oygodo

Re: Multiple fields with Bootstrap editable and jquery

6 years ago

Great news, I figured it out:

I had to change this:

<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var x = $(this).closest('td').children('span').attr('id');
var y = $('.input-sm').val();
$.ajax({
url: "add_homepreds.php?id="+x+"&home="+y,
type: 'GET',
});
});
$.fn.editable.defaults.mode = 'popup';
$('.test').editable();
$(document).on('click','.editable-submit',function(){
var x = $(this).closest('td').children('span').attr('id');
var y = $('.input-sm').val();
$.ajax({
url: "add_awaypreds.php?id="+x+"&away="+y,
type: 'GET',
});
});
});
</script>

To this:

<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var x = $(this).closest('.editable-container').prev().attr('data-id');
var key = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev();
$.ajax({
url: "add_preds.php?id="+x+"&pred="+y+"&key="+key,
type: 'GET',
success: function(s){
if(s == 'status'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>

It seems like it was solved using next ".editable-container", and process all the fields through at once (instead of one for home and one for away).

Top Reply

Response title

Attachments

jQuery Forum

Multiple fields with Bootstrap editable and jquery

Replies(11)

Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Attachments

Re: Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Re: Multiple fields with Bootstrap editable and jquery

Statistics

Tags

Actions