jQuery/Ajax - images in the list of a folder in the select tag / option

Trying to grab an image list to a file and loop through them to create a list of < select > < option > using ajax. Found this piece of code while Googling for a solution that gets the job done (I added to the click event as I want the list update/upgrade to update if a new image is uploaded to the folder without a page re - load) BUT of course the result is that the code adds the same image on each click names, so I find myself with several images with the same name in the list!

{$(document) .ready (function ()}

{$('.product-images').click (function ()}

$.ajax({)

URL: "pictures."

success: {function (data)}

$(data) .find ("was: {contains (.jpg)" "}") .each (function ()})

make a loop through

var images = $(this) .attr ("href");

$('<option_value="'_+_images_+_'"></option>').html (images).appendTo('.product-images');

});

}

});

});

});

< /script >

Gets above the list of images in a folder named "images" and added to the below:

< select name = "product image" class = "product image" >

< option > select picture < / option >

< / select >

What I need, is to stop the same image names added every time you click the < select > tag.

Someone at - he tried to do this before and has a solution?

I can add the list once but if new images added to the folder and then they don't show up until the page is re-rested.

Operating system

What I need is to stop the same image names added each time that the

Your current code is that, with each action click the product images selection list. If I understand you correctly, you only want to add at the start of the images to the list of selection of product images. You can do this when the page initially loads by omitting the click event handler in your code in place. Or you want to initially load current images of the file and automatically load the new images to the list of false real time via ajax call? One way to do it via ajax is not to add to what is already there, but to 'rebuild' the selection at each click event list. Users might lose if they click, click, then click on back to a list of selection, as well as items from the selected list previously. Or you could store image names in a database and execute queries to the Database via ajax call to ensure that records duplicate is not appended to the list if they were already annexed during subsequent calls to ajax. The logic of programming for this scenario is quite simple.

I can add the list once but if new images added to the folder and then they don't show up until the page is re-rested.

To get new images (or data in real time by the way) to instantly load in the page is a named term responsive development in applications of node. Watch for more information. Loading new data into a fake outlet via ajax call will be processor intensive and taxation for the customer. There are lots of calls from application/waitforresponse on the server when you use php/ajax, which would be very tax when this method is scaling. Using Sockets open through an application node would be the best approach for something like that.

best,

Shocker

Tags: Dreamweaver

Similar Questions

  • I get an error in my cart ERROR: the selected membership option is no longer available.

    ERROR: The selected membership option is no longer available.




    Hi Sonia,.

    This is a system error that is displayed when a web form uses secure area connects assigned in the properties of the web form, which is not more existing in the admin.

    In order to solve this problem, I suggest you please check the properties of the payment form site manager > web forms > change the properties , and you can change the secure area, or can leave the field empty.

    Let me know if this helps.

  • Image in the div tag

    Hello Dreamweavers.

    IM placing an image in my div tag and trying to style it with css, just to see what CSS has really cos Im new.

    IM adding the background image on the Center, but his only is not all the div, the leash of shadows

    on the left and right, so how can I place an image to occupy any of the div tag?

    Thank you.

    u2a.jpg

    I disagree with what Kenneth has recommended. He uses Flash to resize a background to the size of the viewport.

    Here are some tips:

    If you use a background image: url("..) (' / images/background.jpg "); in your CSS, the div will not develop to the background fill the div. So, if you have an image you want to show in a div (and don't want other images and text to sit on it, the best way to do so is not to set the image as a background.

    If you do not want the image in the background, and you want the div to be the same size as the image file, you must determine the dimensions of the image and make the height and the width to your equal to the div.

    The other way is to have your CSS resize your background to fill a div with a predefined size. If you follow these steps:

    {#mydiv}

    Width: 860px;

    height: 700px;

    background-image: url("..) (' / images/background.jpg ");

    background-size: 100% 100%;

    }

    This before you set the size of your div and make your background image to fill this div. If your background is close to the sheer size of the div, it will look like very well, but if you're stretching a background a lot smaller than your div, you can see a few grain. In this case, the use of Photoshop to aperture this context can be a good idea.

  • Change of image in the selection of the menu drop-down

    I am very new to LiveCycle ES 8, trying to get what I think can be called a dynamic image. When you select a value in the menu drop down, the image changes on the other page, to adapt to the value selected in the previous page. I'm not a programmer, I'm ready to do what I can to make this work. Any help would be greatly appreciated. Thank you.

    Hello

    It is possible to achieve what you want. You will need a few items:

    • drop-down list object script;
    • objects 'image', one for each image you want. It would be set to hidden.
    • object 'imageField. You should only one of them. The initial value is null. The script in the menu dropdown will fill the imageField with the object of the appropriate image.

    When you configure the drop-down list, it may be convenient to specify values in the binding tab (for example, 1, 2, 3,...). Then, in the script, you can view the numbers rather than the strings that the user sees in the drop-down list.

    The imageField1 must be set to access read only in the initialize event:

    This.Access = "readOnly";

    This will prevent the user of the substitution of the image.

    When you configure the image1, image2, image3 objects make sure you check the "embed image data', users can not have images available to them.

    You can put similar Javascript in the event of release from the drop-down list:

    If (this.rawValue == 1) {}

    imageField1.rawValue = image1.value.image.value;

    } ElseIf (this.rawValue == 2) {}

    imageField1.rawValue = image2.value.image.value;

    } ElseIf (this.rawValue == 3) {}

    imageField1.rawValue = image3.value.image.value;

    }

    Good luck

    Niall

    PS because the drop-down list object and image objects are on different pages, you will need full references. If the drop-down list is located on page 1 and the pictures on page 2, the reference should look like:

    Page2.imageField1.RawValue = page2.image1.value.image.value;

  • How to use the Image in the document Tag (title).

    Hello

    I use Jdeveloper 11.1.1.3.0.

    I want to show a title image itself. tag that allows you to do this one.

    Kind regards
    Rami

    http://www.davesite.com/WebStation/HTML/favicon.shtml

    You mean a favicon

  • Stop or play on the image with the video tag does not work?

    I have a video in a setting that corresponds with the label 'eight ';  I have a button on the timeline with the following code.  I have tried to Stop both gotoAndPlay and it does not work.  Thanks in advance for your suggestions.

    on {(press)

    gotoAndStop (eight);

    }

    use:

    on {(press)

    gotoAndStop ("eight");

    }

  • Upload images using the file API

    I am trying to download pictures using the SDK file, but my images are corrupted during the download. Anyone know the correct way to do this? Here are some of my code:

    var imgVars = getUrlVars(itemDetails['Picture']);
    
      //use image id from query string to build new filename
      var localImgFilename = '/images/equipment/used/' + imgVars['id'] + '.jpg';
      var imgProxy = 'https://[domainwithheld].com/jpg_proxy.php';
    
      //download equipment image from proxy server
      $.ajax(imgProxy, {
      'type': 'GET',
      'data': { fetch: itemDetails['Picture'] }
      }).done(function(result) {
    
    
      if(result) {
      //upload the image to BC filesystem
      var f = BCAPI.Models.FileSystem.Root.file(localImgFilename);
      var imgData = result;
    
      f.upload(imgData).done(function () {
    
      console.log("Image upload complete.");
    
      }).fail(function (jqXHR) {
      console.log("Upload failed.");
      });
      }
    
      }).fail(function() {
      console.log("Download from proxy failed.");
      });
    
    
    
    

    You were right! I finally realized that by using the method of jQuery $.ajax to retrieve the image was my problem: it doesn't have the capacity for a binary response. I got it working by simply using a native XMLHttpRequest object with the value 'blob' responseType property for the image and then passing the answer directly in the SDK download method.

    Here is an excerpt now simplified my code:

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
    
        if ( this.readyState === 4 && this.status === 200 ) {
              var localImgFilename = '/images/equipment/used/' + imgURL.split('/').pop();
              var f = BCAPI.Models.FileSystem.Root.file(localImgFilename);
    
              f.upload(this.response).done(function () {
                   //image uploaded
              }
        }
    }
    xhr.open('GET', imgProxy + '?fetch=' + encodeURIComponent(imgURL));
    xhr.responseType = 'blob';
    xhr.send();
    
  • Get the selected value of a select list item in a tabular presentation.

    Hi, I have a tabular form and I'm trying to get the selected value of a select list item and store the selected value in a page element hidden elsewhere on the form of tables, so I can use this value.

    I already have something similar to the input on the tabular presentation elements.

    Get the initial values
    var line = $x_UpTill (this.triggeringElement, 'TR');
    numberOfItems var = $(' input [nom = "f12"]', ligne) [0];

    numberOfItems = 123456.123

    What I want to do is soemthing similar as above but capture the value of a select element in tabular form. I thought I could do something like:

    Get the selected value
    var line = $x_UpTill (this.triggeringElement, 'TR');
    numberOfItems var = $('selected [name = "f08"] .val ()', line) [0];

    But this method leaves the as undefined var numberOfItems.

    Please help me to find a way to identify the item 'select' in the tabular form called "f08" and get this value.

    I am a newbie to jQuery selectors etc...

    Thank you.

    Strange that you do not get an error when you run your 2nd selector.
    In any case for this kind of thing, see the HTML code of your tabular form and tell us what triggers, the element can be useful. Or better create an example at apex.oracle.com.
    In any case, I see two errors:
    (1) is there any html element "not selected" instead, the LOV in the APEX element has the select tag
    (2) you can not write a. val() inside a selector that you must place it after your selection.

    So I'd like to rewrite your code to:
    var line = $x_UpTill (this.triggeringElement, 'TR');
    numberOfItems = $("select_[nom_="f08"]",_row).val () var [0];

  • Problem with large image as the background

    Hello

    I would like to add a picture as a background on my site. I would like this picture takes the entire width of my page but I need a space on top to my menu and another down.

    I tried using the slide show "basic", but once in the right size, I can't move my image in the selection.

    This is a site about photography, the position of my images is very important.

    Do you understand what I mean? Thanks for the help.

    It is indeed a challenge. When you use a background image as a complete browseror put a slide show in full screen, you are not in control of the exact framing more. Simply because you do not know the size of the browser window! That is why the Web page must be able to scale and crop your picture automatically. The only preparation you can take, is to edit your original to anticipate for a view centered when you use the slide show. And with a background image as browser fill, you have even more options, to fill or Mount the whole image and place the point of origin:

    Web design, you are not in control of everything...

    Get used to this principle and sing: Let it go for it!

  • Text moves to the next image when the space is still ongoing

    Hello

    I came across a situation of confusion while helping my colleague help out a folder that she worked on today. We have found a non-ideal workaround (essentially, reconstruction of the file), but I wanted to know if there was something we have neglected which would have allowed a faster, better the difficulty. In short, the problem was that the text would jump to the next section while he was still in the current space - when the image has been resized slightly, or when an image with jump object wrapping applied was added. (See attached image).


    problemfile.jpg

    The text is composed of numbers, bullets, and then dashes, each with their own style. It seemed that the culprits were the styles of numbers and dashes (and the body text style on which they were based). I assumed the problem was Options of sequence, that has been enabled for these styles when it usually isn't. However, disable the keep Options in styles does not solve the problem. Even select all text directly and disabling of keep Options as it did not work. I have also excluded from these things, that everything looked normal:

    -Hidden characters

    -Before and after paragraph spacing

    -Align to the baseline

    -Jump training

    -Text block options

    I opened another, running the InDesign file that uses the same styles to use as a basis for comparison; When I copy / pasted a part of the text of the problem file into the right file, erratic jumps framework had disappeared. Similarly, when I copied the reference text in the file problem, she presented the same problem behavior. So there must be something in the style or preference within the document.

    After comparing the styles between the files, however, the only difference between them I could see was keep Options. And (as above) disabling of keep in styles or with all the selected text Options does not solve the problem. (It helped a little with dashes - still jump text, but less lines progressed than before.) Recording, close and then reopen the case did nothing. Later, as I was messing around after the fact just to see if I could find the problem, I completely deleted the relevant styles of the problem file and replaced by their counterparts in the file reference. Problem disappeared. So I finally find a solution preferable to a total rebuild, but the question remains: what else could be different between the two documents so that this error occurs? Is there any other thing in addition to what I have already mentioned? Or is it just something buggy file, styles or apply these styles to the text? Any idea would be appreciated, I would like to know for the future, in case we run into similar problems again.

    Thank you!

    'Keep the options' to Dash sign for 0 to "keep with next". Who takes care of the issue.

  • How to integrate the flash (.swf) image in the custom application webcenter

    Hi all


    I need to include flash image in my custom webcenter application. This image I have to sign up to facet: top panel: stretchlayout. But how inculde that image in the verbatim tag?

    Please suggest!

    Ah... I really don't know why this error is shown.
    A work around would be to simply create a simple .html page that uses the flash object and add this as a frame that is inserted in the page...

  • Apply the Image to the datagrid row

    Hello

    I have a problem I need to apply the image to the selected line in the datagrid control dynamically, we have
    "selectedcolor" but I need to apply the image to the selected line is it sort it please help me
    customer needs to this effect

    Karthik.k

    your postal code, please, let me look if I can help

  • SELECT options (multiple), ignoring the selected attribute

    Hello, all,.

    I have the CF code that is used with a tag SELECT (multiple attribute), and it seems that the SELECT tag ignores the attribute selected for the options of the child.

    For example, I have the code that will generate the following HTML code:

    <select name="selectA" id="selectA" multiple>
        <option value="">ALL</option>
        <option value="Option 1" selected="selected">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3" selected="selected">Option 3</option>
    </select>
    

    But when the page loads, none of these options are selected.  Any suggestions?  What do miss me here?

    V/r,

    ^_^

    There is no code javascript / jquery anywhere that interacts with this menu drop-down lists?

  • Remove the Finder tags in more than 10 items at a time

    Is it my setup or a remove the tags in the files of more than 10 changed in OS X 10.11?

    I used to add or remove tags at will. But now it seems that I can only take off the mark max 10 files at once via ctrl + click or Finder > file > Tags... With more than 10 points, the delete tag option is not available.

    If I want to remove the brand more than 10 files, I have to ctrl-click > read the summary information (more than 40 items will automatically in this mode), THEN batch-deletion of tags.

    I noticed that today, as well. It works fine for 1 to 10 items, but when you select that item 11 (or), it highlights all the tags, as if you have all the applied, rather than just a you have on them.

    Seems like a bug to me, but I'm not sure.

    I've found a workaround, if:

    Click on the word "Tags"... "above the points colored. Then, in the white field where the current tags assigned to this item, click the tag you want to delete, and then press the delete key.

  • Unable to save the selection as...

    Hi guys,.

    Could someone help me?

    The program does not offer the 'save the selection as' option just save, save as and save all...

    Please help, thanks

    Thank you.  This helps.

    Save the selection as... is currently a Waveform Editor command only, and is not enabled in multitrack.  In the past, hearing allowed you the final mix a range of selection in a new file, although this behavior was not implemented in time for CS 5.5 release.

    However, you can make a choice of time using the time selection tool: and then use the multitrack > bounce to new track > time selection option menu (or in the context menu of the multitrack Panel.)  A new clip will be generated (you can remove the track if you wish) and stored on the drive as "Bounce_ # .wav.

Maybe you are looking for