Question

I have a table generated by php and implementing a modal to allow user to change the text generated by variable $l_id; I have a link class “eloc” that show’s the modal div section. I intercept the form submit id “renameLocation” and process the input and disable the default submit action. I want to modify show the new text renamed by the user.

I have this php code which repeated by iterating an array, the iteration id is $l

$id_l="\"location_".$l."\"";
echo "<table class=\"add\" border=\"1px\" width=\"100%\">";
echo "<tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td id=\"".$id_l."\" class=\"location\" colspan=\"6\">Location: ".$row['location']."</td></tr>";

Then I have a div:

<div id="modal_location" class="modal_prompt">      
    <div class="modal_prompt-ct">           
        <div class="modal_prompt-header">
            <h2>Rename Location</h2>
            <a class="modal_close" href="#"></a>            
        </div>

        <form id="renameLocation">
            <div class="txt-dpy">
                <span id="mlocation_name"></span>
            </div>
            <div class="txt-fld">
                <label for="">Change to</label> 
                <input id="newLocation" name="" type="text" />
            </div>
            <div class="btn-fld">
                <button type="submit">Save &raquo;</button>
            </div>          
        </form>         
    </div>  
</div>

How to modify the text for the generated $l_id?

$("#renameLocation").submit(function(e) 
{
    $("#lean_overlay").fadeOut(200);
    $("#modal_location").css({"display" : "none" })
    // How to modify the text of "$l_id"?
    return false; //do not submit form the normal way        
});

Many thanks.

Answer 1

Question is ambiguous. It sounds like you have more than one text to edit.

You need a way to tell JS which location to update so add a global variable. It’s not usual way you’d do this but it should be okay.

Add data to the element

$id_l="\"location_".$l."\"";
echo "<table class=\"add\" border=\"1px\" width=\"100%\">";
echo "<tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\" 
    data-location=\"".$l."\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td id=\"".$id_l."\" class=\"location\" colspan=\"6\">Location: ".$row['location']."</td></tr>";

set this at the top of your js

var selectedlocation=0;

bind clicking the edit link to set selectedlocation

$('.eloc').on('click', function(){
    selectedlocation=$(this).data('location');
});

use the var in your code

$("#renameLocation").submit(function(e) 
{
    var location=$(this).data('location');
    $("#lean_overlay").fadeOut(200);
    $("#modal_location").css({"display" : "none" })
    $('#location_'+selectedlocation).text();
    e.preventDefault(); //return false; //do not submit form the normal way        
});

Here’s another way

Forget the global variable.

Add a hidden form field

<form id="renameLocation">
    <input type="hidden" name="location" value="" id="renameLocation_location"/>

Put the value in that

$('.eloc').on('click', function(){
    $('#renameLocation_location').val($(this).data('location'));
});

And use that.

$('#location_'+ $('#renameLocation_location').val() ).text();

The way you have provided it, the modal is totally independant to the links you need something to set somewhere to achieve what you want.