access selector from jquery get function

Question

I have a very long form and inside it I have a specific button to import others section of the form inside the HTML.

I'm importing this new section using this code:

    $.get( "nuovotaglio.html", function( data ) {
            //console.log(data);
            $( ".newElement" ).html( data );
            console.log(this);

        });
    };

I need before to import this section to add an ID to a specific tag to one of this element. This piece of code of the imported section

    <div class="optionTaglioCorto">   
        <div class="col-md-10 col-md-offset-2 form-inline">
                <div class='col-md-8 prezzoAllign'> 
                    <label class="titoloPiega">PREZZO:</label>
                    <select class="form-control-2 box3 mySelectBox" id="optionTaglioCorto"style="width: 220px">
                        <option value="0">INSERIRE PREZZO</option>
                        <option value="1">A PARTIRE DA</option>
                        <option value="2">PREZZO DA_ A_ </option>
                    </select>

                </div>    
                <div class="col-md-3"> 
                    <button type="button" class="btn btn-lg bottoneCss6">OK</button>
                </div>
        </div>
        <div class="col-md-8 col-md-offset-2 form-inline">
                <div class=" col-md-5 option1 optionsInput hidden">
                    <label class="titoloPiega">Da:</label>
                    <input type="text"class="form-control value borderBottomInputField" 
                    id="nomeSalone" placeholder="VALUE">
                </div>   
                <div class="col-md-5 option2 optionsInput hidden">
                    <label class="titoloPiega">A:</label>
                    <input type="text" class="form-control value borderBottomInputField" 
                    id="nomeSalone" placeholder="VALUE">   
                </div>
        </div> 
    </div>

I need before to call the function nuovotaglio(), to add some id inside this file. Can someone help me?

I need to add an ID to the main div. I don't know how to set this. I tried to use $(this).attr('id', 'value'), but it doesn't work — Daniele Martini, Mar 24 '16 at 16:48
maybe because you do it before it has been asynchronously loaded inside the DOM of your HTML webpage. If you are producing the HTML with your own server code, you can alter your script to add the `id` attribute in HTML. If you are not responsible for creating the HTML markup you need to import, and if it could change, then manipulate your `data` variable is the way to go. — BendaThierry.com, Mar 24 '16 at 16:51
maybe I didn't explain well what I need. I'm importing an HTML file inside another one using this get function. Before to load it on the page i need to add to it a specific ID. I don't know how to do it because the get function gives back an OBJ and i don't know hot to access the specific selector inside the object and add to it an ID — Daniele Martini, Mar 24 '16 at 16:55

BendaThierry.com · Accepted Answer · 2016-03-24T17:21:29.333

1

If you need to add an ID to a div with class you can do that with the JQuery Code below :

<!-- HTML //-->
<div class="optionTaglioCorto">   ... </div>

<!-- Javascript/JQuery //-->
$(function(){
   $('div.optionTaglioCorto').attr('id','optionTaglioCortoID');
   // in general to add an ID: $('element').attr('id', 'value');
});

If you need to handle the loaded HTML data and modify it:

// If you need to add an ID to load your content, 
// Then I suggest a DIV at the bottom of your HTML document :
$('body').append('<div id="yourAjaxContainer" />');

$.get( "nuovotaglio.html", function( data ) {
   //console.log(data);
   var $data = $(data);
   $('div#yourAjaxContainer').html($data);
});

edited Mar 24 '16 at 17:21

answered Mar 24 '16 at 16:47

BendaThierry.com

2,080
1
15
17

this is what I get if I console log(this) Object {url: "nuovotaglio.html", type: "GET", isLocal: false, global: true, processData: true…} It's an OBJ and i don't kno know how to set to the main div of this HTML a specific ID. – Daniele Martini Mar 24 '16 at 17:05
ok, and now, with `var $data = $(data);` and a call to `.html($data)` – BendaThierry.com Mar 24 '16 at 17:10
Maybe using `$.load`to load html is simpler in these case. Try it! http://stackoverflow.com/questions/3856590/jquery-load-page-then-parse-html – BendaThierry.com Mar 24 '16 at 17:15
sorry but i don't understand. Where do I have to set this var and use .html(data)? If I console log DATA inside the function I see all the HTML code. What I need is to add a specific ID to this HTML before to call my "nuovotaglio" function and load it on the other page. – Daniele Martini Mar 24 '16 at 17:18
then add the id in your doc first, and do `$.get` @see edited answer – BendaThierry.com Mar 24 '16 at 17:24

score 0 · Answer 2 · answered Mar 24 '16 at 17:10

You could do something like this, first load the container with your data and later add the attribute to the tag, but you need to know how to find properly the tag in the returned HTML code.

$.get( "nuovotaglio.html", function( data ) {
        //console.log(data);
        $( ".newElement" ).html( data );
        console.log(this);
        $('.newElement yourTagSelector').attr('id', 'yourID');
    });
};

access selector from jquery get function

2 Answers2