У меня есть jquery код, подобный следующему:
let $options = JSON.parse(data.options);
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
$('#' + item ).val($options[item] );
});
Я хочу заполнить все входные значения в идентификаторе из ключей $ данными в параметрах $. но это не работает но если я делаю это вручную, вот так, то это работает:
$("#title").val($options.title);
$("#type").val($options.type);
$("#location").val($options.location);
Я уверен, что проблема в следующем коде: $('#' + item ) Я пробую так много вещей, но кажется, что это не работает. Так можно ли это исправить?
Вот мой HTML:
<div class="modal fade" id="widget_modal" tabindex="-1" role="dialog" aria-labelledby="AddUserModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="widget_form" class="form-horizontal" method="post" enctype="multipart/form-data" action="/admin/widgets/store">
<input type="hidden" id="csrf" name="csrf_token">
<input type="hidden" name="id" id="id">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Add Widget
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="title">
Widget Title *
</label>
<div class="col-lg-8">
<input id="title" name="title" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="type">
Type *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="type" name="type">
<option value="">Select Widget Type</option>
<option value="popular-post">Popular Post</option>
<option value="recent-post">Recent Post</option>
<option value="featured-post">Featured Post</option>
<option value="post-tabs">Post Tabs</option>
<option value="post-carousel">Post Carousel</option>
<option value="tags">Tags</option>
<option value="archive">Archive</option>
<option value="calender">Calendar</option>
<option value="blockquote">Blockquote</option>
<option value="mini-gallery">Mini Gallery</option>
<option value="list">List</option>
<option value="search">Search</option>
<option value="testimonials">Testimonial Carousel</option>
<option value="social-media">Social Media</option>
<option value="contact-us">Contact Us</option>
<option value="flickr">Flickr Feed</option>
<option value="instagram-feed">Instagram Feed</option>
<option value="recent-tweets">Recent Tweets</option>
<option value="video">Video</option>
</select>
</div>
</div>
<div id="post_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="post_number">
Number of Post
</label>
<div class="col-lg-8">
<input id="post_number" name="post_number" class="form-control" autofocus>
</div>
</div>
<div id="testimonial_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="testimonial_number">
Number of Testimonial
</label>
<div class="col-lg-8">
<input id="testimonial_number" name="testimonial_number" class="form-control" autofocus>
</div>
</div>
<div id="galleries_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="image_number">
Number of Image
</label>
<div class="col-lg-8">
<input id="image_number" name="image_number" class="form-control" autofocus>
</div>
</div>
<div id="video_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="video_url">
Video URL
</label>
<div class="col-lg-8">
<input id="video_url" name="video_url" class="form-control" autofocus>
</div>
</div>
<div id="blockquote_div">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_author">
Author
</label>
<div class="col-lg-8">
<input id="blockquote_author" name="blockquote_author" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_content">
Quote
</label>
<div class="col-lg-8">
<input id="blockquote_content" name="blockquote_content" class="form-control" autofocus>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="location">
Location *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="location" name="location">
<option value="">Select Position</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="submit_button" type="submit" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</form>
</div>
</div>
и вот мой полный сценарий редактирования:
$(document).on('click', 'a.edit', function (event) {
event.preventDefault();
let $id = $(this).closest('tr').data('id');
let url = "/admin/widgets/" + $id + "/edit";
$.post(url,{ id: $id, csrf_token: $csrf }).done(function (data) {
console.log(data.options);
let $options = JSON.parse(data.options);
var post = ["popular-post", "recent-post", "featured-post", "post-tabs","post-carousel"];
if (post.includes($options.type)){
post_div.show();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'testimonials'){
post_div.hide();
testimonial_div.show();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'mini-gallery'){
post_div.hide();
testimonial_div.hide();
galleries_div.show();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'video'){
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.show();
blockquote_div.hide();
}else if($options.type === 'blockquote'){
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.show();
}else{
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}
page_modal.modal("show");
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
console.log($('#' + item));
$('form [name="' + item +'"]').val($options[item] );
});
validator.resetForm();
$(".modal-title").text("Edit Widget");
page_modal.find("form")[0].reset();
$("#id").val(data.id);
$("#csrf").val($csrf);
submit_button.html("Update Widget");
});
});
Вот скриншот это предоставлено console.log ('item:' + item); и console.log ('$ options [item] =' + $ options [item]);
