I can't seem to get the output that my previous answer is getting for TinyMCE.
I am using MVC and my HTML razor-view looks like below.
The TextAreaFor is my TinyMCE. When looking at the HTML in the browser I don't see an area for #tinymce-textarea? So I am not sure how to bind my script to it.
All I am trying to do is output the tinymce text area to a div below it.
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
tinymce.init({
selector: "#tinymce-textarea",
setup: function (editor) {
editor.on('change', function (e) {
var newVal = tinymce.get('tinymce-textarea').getContent();
$('.text-mirror').html(newVal);
});
}
});
</script>
#using (Html.BeginForm("Create", "Post", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<br />
<div class="editor-label">
#Html.TextAreaFor(model => model.Description)
</div>
<div class="editor-field">
#Html.ValidationMessageFor(model => model.Description)
</div>
<br />
<div class="text-mirror">
</div>
According to documentation selector option 'enables you to specify a CSS selector expression that will be used to find textareas you want to convert.'
In your html you don't have any textarea with id tinymce-textarea. All you need is add this id to your textartea html attributes
...
#Html.TextAreaFor(model => model.Description, new {Id = "tinymce-textarea"})
Or you can use id that is standard generated by MVC textarea helper which in your case is Description:
...
tinymce.init({
selector: "#Description",
setup: function (editor) {
editor.on('change', function (e) {
var newVal = tinymce.get('Description').getContent();
$('.text-mirror').html(newVal);
});
}
});
Related
As you can see I am using data attributes to load the div DataSet_Data with a partial view returned from that url.action.
It loads on page load correctly hitting the data-url and loads the correct partial view.
What I am trying to do is when the dropdownlist is changed to reload the div with the updated data-url action
url = url + '/DataSetID=' + $(this).val();
the first console.log for the original data-url attribute is /CP/Data/DataSetID=3
the console.log for url shows /CP/Data/DataSetID=4 when the drop down is changed.
the data-ajax is switched to false correctly
the updated data-url shows as/CP/Data?DataSetID=4 correctly set
and the DataSet_Data click function shows the click when changed.
<div class="row form-group">
<div class="col-lg-2">
</div>
<div class="col-lg-3">
#Html.DropDownListFor(m => Model.DataSetID, new SelectList(Model.DataSets, "Value", "Text"), htmlAttributes: new { #class = "form-control m-l-5", #id = "selectedDataSet" })
</div>
</div>
<div id="DataSet_Data" data-ajax="true" data-url="#Url.Action("DataSet_Data", "CP", new { DataSetID = DataSetID })">
</div>
}
<script>
$(document).ready(function () {
console.log($('#DataSet_Data').attr('data-url'));
$("#selectedDataSet").change(function () {
var url = '#Url.Action("DataSet_Data", "CP")';
url = url + '/DataSetID=' + $(this).val();
console.log(url);
$('#DataSet_Data').attr('data-ajax', false);
$('#DataSet_Data').attr('data-url', url);
console.log($('#DataSet_Data').attr('data-ajax'));
console.log($('#DataSet_Data').attr('data-url'));
$('#DataSet_Data').click();
});
$('#DataSet_Data').on("click", function () {
console.log("click");
});
});
</script>
I need the code to reload the div using the updated data-url.
Im sure im missing something easy or there may be an easier way to achieve this.
<script>
$(document).ready(function () {
$("#selectedDataSet").change(function () {
var url = '#Url.Action("DataSet_Data", "CP")';
url = url + '?DataSetID=' + $(this).val();
$("#DataSet_Data").load(url);
});
});
</script>
This solved the issue.
I have a dropdown button which populates the values using the HTML tag helper #Html.DropDownListFor
The code for the button is:
<div class="col-sm-3" id="valueSetParent">
#Html.DropDownListFor(model => model.Id, new SelectList(Model.Sets, "Id", "Name"), new { #class = "btn btn-sm btn-outline-secondary dropdown-toggle", #style = "font-color: white" })
</div>
I have a javascript function which requires the Id value of the option that is selected in the dropdown button.
function xyx=z(e, testId, Id) {
e.stopPropagation();
$('#Modal').data('test_id', testId).data('id', Id).modal('show');
}
But when I run the code, the value of Id does not get sent to the function and shows NULL in this case. How do I make sure the Id of the selected value in the dropdown button is sent to the javascript function?
Do you mean you want to get the Id of selected item,new SelectList(Model.Sets, "Id", "Name") made the Id be Value,Name be Id of Selected Item.You can use $("select").val() or $("#Id").val() to get the Id in js rather than pass data to the function.
Here is a demo:
Controller:
public IActionResult DropDown() {
DropDownModel dropDownModel = new DropDownModel();
dropDownModel.Sets = new List<Set1> { new Set1 { Id="s1",Name="set1"},new Set1 { Id="s2",Name="set2"} };
return View(dropDownModel);
}
View:
<h1>DropDown</h1>
<div>
#Html.DropDownListFor(model => model.Id, new SelectList(Model.Sets,"Id","Name"), new { #class = "btn btn-sm btn-outline-secondary dropdown-toggle", #style = "font-color: white" })
</div>
<div>
<button onclick="selectId()">select</button>
</div>
#section scripts{
<script type="text/javascript">
function selectId() {
alert($("select").val());
}
</script>
}
Result:
I'm pretty new to html, razor, and MVC so I apologize if this is a easy fix, but I've worked on this issue for a while with no resolution. I would like a controller action to be triggered that re-populates a partial view every time a drop down list changes. I've tried implementing this with the 'onchange' html attribute as well as by setting an id for the drop down and having a jquery function trigger it. But I can't get any of the three functions below to fire. Here's my code..
#model AislesOnlineDataControl.Models.PickupPointsListModel
#{
ViewBag.Title = "PickupPointsList";
}
<script>
function Select() {
#Html.Action("PickupPartial", "PickUpPoint", new { mod = Model.points[Model.selectedID] });
};
$("#PupDropDown").on('change', function () {
#Html.Action("PickupPartial", "PickUpPoint", new { mod = Model.points[Model.selectedID] });
});
$(function() {
$('#PupDropDown').change(function () {
Model.selectedID = Convert.ToInt32(selectPoint.SelectedValue);
//window.location.reload();
#Html.Action("PickupPartial", "PickUpPoint", new { mod = Model.points[Model.selectedID] });
});
});
</script>
<h2>Manage Pick-Up Points</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#{SelectList selectPoint = new SelectList(Model.selectedPoint, "Value", "Text");}
<div class="form-inline">
<div class="row">
#Html.DropDownListFor(model => model.selectedID, selectPoint, null, new { #id="PupDropDown", #onchange = "Select()" })
#Html.ActionLink("New", "CreatePickup", "PickUpPoint", null, new { #class = "btn btn-default pull-right" })
</div>
</div>
<div>
#Html.Partial("~/Views/PickUpPoint/PickupPartial.cshtml", Model.points[Model.selectedID])
</div>
</div>
}
#Html.Action(..) returns the ActionResultfrom your partial view, which eventually turns out to be a block of html code. So you cant put your html code in your JavaScript block.
What you need is the JavaScript code to have a ajax call to the action and render action Result.
Here is example of making simple ajax call in asp.Net MVC
https://stackoverflow.com/a/16186212/2802809
I'm trying to change value of div when data attr of another div will change. I'm trying to do that
$('.language-rate').attr("data-rate-value").on('change', function () {
$('.language-d').text($('.language-rate').attr("data-rate-value"));
});
but it logs in console:
Uncaught TypeError: Cannot read property 'on' of undefined
How can I do that?
my view is:
#using (Ajax.BeginForm("LanguagesTable", new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "languages"
}))
{
<div class="language-content">
#Html.TextBoxFor(m => m.newLanguages.LanguageName, new { #class = "pcontent-left main-color" })
<div class="rate language-rate"></div>
#Html.HiddenFor(m => m.newLanguages.Star, new { #class = "language-d" })
</div>
<div class="add-education">
<button type="submit" name="pcprograms" value="add" class="add-education-button-sm">add</button>
</div>
}
I'm using rater js and when star rate changes i want to detect and pass in my model (which is hidden form controll)
EDITED
I'm doing that:
$('.language-rate').on('change', function () {
$('.language-d').text($('.language-rate').attr("data-rate-value"));
});
but it works after second click on div. because i want to detect attribute change event
Unfortunately you cannot hook an event onto a data attribute.There are a lot of posts about this on SO and other sources.What you can do is create a function which runs often (e.g. every 200 milliseconds) and checks if the the value of the data attribute of your div has changed.Here's an example, i hope it helps you:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var _old = $("#test").attr('data-value');
setInterval(function () {
var _new = $("#test").attr('data-value');
if(_old != _new)
{
alert('The data attribute of the div has been changed to - ' + _new);
_old = _new;
}
}, 200);
$("#changeData").click(function () {
$("#test").attr('data-value',new Date().toLocaleTimeString());
});
});
</script>
<div id="test" data-value="Test">
</div>
<input type="button" id="changeData" value="Change Data Attribute" />
I need some help in order to replace some html inside a div with some other html which I get from the server when making the Ajax call.
To make this clear for you guys, I have the following code:
Code:
<div class="travel-container" id="travel-container">
<div class="travel-content">
#using (Html.BeginForm(new { id = "sbw_travel_form" }))
{
<div class="row">
<div class="routes small-12 large-6 column">
#Html.Label("Departure Route:", new { #class = "label-travel" })
#Html.DropDownListFor(m => m.DepartureRoute, routesSelectList, new { #class = "dropdown", #id = "Outbound-route" })
#Html.Label("Return Route:", new { #class = "label-travel" })
#Html.DropDownListFor(m => m.ReturnRoute, routesConverslySelectList, new { #class = "dropdown", #id = "Return-route" })
</div>
<div class="dates small-12 large-3 column">
#Html.Label("Departure Date:", new { #class = "label-travel" })
#Html.TextBoxFor(m => m.DepartureDate, new { Value = Model.DepartureDate.ToShortDateString(), #class = "textbox datepicker ll-skin-melon", #id = "departureDate" })
#Html.Label("Return Date:", new { #class = "label-travel" })
#Html.TextBoxFor(m => m.ReturnDate, new { Value = Model.ReturnDate.ToShortDateString(), #class = "textbox datepicker ll-skin-melon", #id = "returnDate" })
</div>
<div class="small-12 medium-6 large-3 columns"></div>
</div>
}
</div>
</div>
Here you see that I have put everything inside a class container called travel-container.
What I'm trying to do is to replace the div with the "routes" class with some same div tag when I get new html from the server. The problem is that I need to keep the rest of the html inside the container.
The ajax call code:
$.ajax({
type: 'POST',
url: "#Url.Action("FindReturnRoutes", "Travel")",
dataType: "html",
data: postData,
beforeSend: function () {
$(".travel-content").append(res.loader);
setTimeout(delay);
},
success: function (data) {
setTimeout(function () {
$(".travel-content").find(res.loader).remove();
$('.travel-container').html($(data).find(".travel-content"));
datepickerLoad();
Initializer();
}, delay);
}
});
Right now I'm using the find method to find the travel-content div and replace all the content within that div. Have tried putting .routes after and alone but none seem to work. Is find the right solution to use here?
All I want is to replace the routes div with the new one I get from the ajax call, but still keep the rest of the html without replaceing it all.
Following code snippet may be helpful for you.
$('.travel-container .routes').prepend($(data).find('.routes').html());
Can you try this please:
$('.travel-container .travelcontent').html(data);