Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging image src via MVC 3 Action
    primarykey
    data
    text
    <p>I have a page with an image tag. The image displayed by the image tag changes depending on an image selection made on a popup window. The following are the steps to reproduce my issues:</p> <pre><code> 1. Click button on Main Page and display popup with selectable images 2. Click any one image in popup to create selection 3. Click "Associate" button in popup to begin association process a. JQuery.post is called to "Associate" selected image to image in Main page i. Code in the Controller is run and save the association in the database. b. Upon success, the "success" function of the JQuery.post makes a call to an existing javascript function. i. This function creates a string in the following format: "{Controller}/{Action}/{PrimaryId}/{SecondaryId}" ii. In the function, the "src" of the image in the main page is set to the string created above. iii. The change in "src" makes the code in the controller run which in turn returns the specified image. iv. The popup is closed </code></pre> <p>For all practical purposes, the code is working except for the annoying issue that regardless of browser, the image does not refresh upon returning from the Controller via the process described above(during the JQuery.post "Success" function).</p> <p>One thing to note, is that if steps "b.i" - "b.iv" are run without "JQuery.post" (ie. just retrieving image data without doing an association first) the image gets refreshed every time. The code used is below (redacted - items in curly bracket are place holders)</p> <p>IMAGE MODIFIED</p> <pre><code>&lt;div id="divMenuItemMedia"&gt; &lt;img id="imgMenuItemMedia" alt='someAlt' src='/{Controller}/{Action}/{InitialImageId}' /&gt; &lt;/div&gt; </code></pre> <p>BUTTON TO BRING UP POPUP</p> <pre><code>&lt;input type="button" id="btnModifyImage" name="btnModifyImage" class="t-button" value="Change Image" onclick="showImageChooser();" /&gt; </code></pre> <p>JAVASCRIPT FUNCTIONS</p> <p>MAIN PAGE</p> <pre><code>function GetCurrentMediaItemsByIds(pId, iId) { //$('#imgMenuItemMedia').load(function () { //alert("Image updated"); // }); var imgMedia = document.getElementById("imgMenuItemMedia"); var sourceUrl = '/{Controller}/{Action}/{pId}/{iId}'; //$('#imgMenuItemMedia').attr("src", sourceUrl); imgMedia.src = sourceUrl; InImageSelectionMode = false; } function showImageChooser() { var url = '{Controller}/{DataGetterActionForPopup}'; ShowPopup(url, "#MediaChooserDialog", null); } </code></pre> <p>POPUP</p> <pre><code>function associateMediaSelection(e) { // The entity name is saved in hidden field in the "Edit" page var entityName = document.getElementById("hidEntityName").value; var contentPath = entityName + "/Associate" + entityName + "ToMediaItem"; var url = '{Controller}/{Action}'; var primaryId = {pId}; var secondaryId = {sId}; var entityId = {eId}; var data = { "entityId" : eId, "primaryId": pId, "secondaryId": sId }; var jqxhr = $.post(url, data, function (e) { GetCurrentMediaItemsByIds(presentationId, document.getElementById("hid" + entityName + "Id").value); closeMediaSelection(); }); } function closeMediaSelection() { var windowPopup = $("#MediaChooserDialog").data('tWindow'); windowPopup.close(); } </code></pre> <p>Anyone have an idea as to what may be preventing the image refresh?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload