0

Is is possible to swap a .load text with one that can be edited by a user using form input or something similar? Basically I'm trying to write a code that fetches information using the div IDs (unique per emp) that hold their information within tables within multiple HTML documents for many years.

Example:

.load('day.html #empId')

the "day" and "empid" part of .load can be changed on the user end.

[Link] [ID] submit

then it runs the rest of the script.

The part of the script I'm trying to make adjustable:

            $('a').click(function() {
                $('#metrics').load('day.html #empId', function() {
                    $(this).hide()
                            .appendTo('#main')
                            .slideDown(500);
                    });

                    return false;
            })
        });

I'm not sure if I explained it clear enough(new to jquery)

Improve this question
4
  • 1
    Maybe a duplicate? "Passing a variable into a jquery load() function syntax" stackoverflow.com/questions/13567992/… Commented Jun 22, 2014 at 1:06
  • sorry, that was a mistake in the code on my end(updated the code). I'm able to get process that pulls the information correctly, it's just making it so that someone can change where the id tags and location of the information pulled through a submit feature Commented Jun 22, 2014 at 1:22
  • Both the first and the second argument. The user selects the database(the name of the html document) and the specifies their id ''JXR1111'' within the data base (which is also the name of a div element within each database), clicks a button, and then the information is present within #main. Commented Jun 22, 2014 at 2:03
  • ignore the "Both the first and the second argument" part, I misread. Yes that is exactly what I'm trying to do Commented Jun 22, 2014 at 2:15

2 Answers 2

Reset to default
0

Get the selected options of two form select elements, combine into string and insert them into the jQuery .load function. 

$('a').click(function() {
    var ds = $('#datasources option:selected').text();
    var empId = $('#empIds option:selected').text();
    $('#metrics').load(ds + '.html #' + empId, function() {
        $(this).hide()
        .appendTo('#main')
        .slideDown(500);
    });

    return false;
});

And the HTML affected:

<div id="main">
        <h1 id="metrics">Metrics</h1>
</div>

JSFiddle: http://jsfiddle.net/a8dTR/ (Open the console to see what's going on. This will give an error because the loading won't work on JSFiddle but you can see it's send the correct argument.)

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

Sorry about the late reply. I tired using var, but the values arent loading jsfiddle.net/a8dTR/3 In this case I'm trying to get it to link to a document named p05w01d01.html div id jxs0001 using options:select variables to select it.
So I applied your changes and stripped it down to the bare essentials $('<div id="metrics" />').load(pD + '.html#' + empId, function() and var pD = ('#period').val(); and <select class="dates" id="period"> <option value="p05w01d01">1</option>
I have to be missing something simple
I meant '#metrics' i was referring to the div id(my fault) but yes I do. jsfiddle.net/a8dTR/6
also, I've tested the html documents and they pull just fine.
|
0

FIXED IT!!!!!! I'm pretty sure its terrible practice, but it gets the job done(tried it with multiple docs and ids). If anyone has suggestions for a better way I'm all ears

I know it's pretty bare and basic, but here's the code in case anyone else wanted to do something similar

I put back in $<'div id= metrics'/> in order to open it in a new div tag appended to #main

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {

$('a').click(function() {
var pD = $('#period').val();
var wD = $('#week').val();
var dD = $('#day').val();
var eD = $('#empId').val();
    $('<div id"metrics" />').load(
              pD
            + wD
            + dD    
            + eD, function(){
        $(this).hide()
                .appendTo('#main')
                .slideDown(1000);
    });

});

});
</script>

I then removed then .html # from the function and just added it in as a value to #empId options

<form>
<select class="dates" id="period">
    <option value="p00"class="emp">Period</option>
    <option value="p01">1</option>
    <option value="p02">2</option>
    <option value="p03">3</option>
    <option value="p04">4</option>
    <option value="p05">5</option>
    <option value="p06">6</option>
    <option value="p07">7</option>
    <option value="p08">8</option>
    <option value="p09">9</option>
    <option value="p10">10</option>
    <option value="p11">11</option>
    <option value="p12">12</option>
    <option value="p13">13</option>
    <option value="p14">14</option>
</select>
 <select class="dates" id="week">
    <option Value="w00"class="emp">Week</option>
    <option value="w01">1</option>
    <option value="w02">2</option>
    <option value="w03">3</option>
    <option value="w04">4</option>
    <option value="w05">5</option>
    <option value="w06">6</option>
</select>
 <select class="dates" id="day">
    <option value="d00"class="emp">Select Day or Leave Blank for Week</option>
    <option value="d01">1</option>
    <option value="d02">2</option>
    <option value="d03">3</option>
    <option value="d04">4</option>
    <option value="d05">5</option>
    <option value="d06">6</option>
    <option value="d07">7</option>
</select>
<select id="empId">
 <option class="emp">Employee ID</option>
 <option value=".html #JXS0001">John Smith</option>
</select>

<a href="#">Load Metrics</a>
</form>

</div>

<div id="main">
<h1>Metrics</h1>

</div>

I still have a lot of bedazelling to do(such as making the emp id dynamic and editable from a separate html) but that's the fun part(and I know how haha). Anywho thanks a million for helping this newb out @bloodyKnuckles

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.