So I have a Url.ActionLink, that when clicked, I want to load a partial view into a modal. This works the first time, but the second time it redirects the browser to the partial view instead of loading it into a modal, and the modal() call has an error saying that it is undefined.
The html for the div is:
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="modalBody"></div>
</div>
</div>
</div>
The code for the binding/loading so far is:
$(".actionLink").on("click", function (e) {
e.preventDefault();
$("#modalBody").load(e.target.href);
$("#modal").modal('show');
return false;
});
The error that I'm getting before the redirect is on the $("#modalBody").load(e.target.href); and the error is "Uncaught TypeError: undefined is not a function." It works the first time a link is clicked, so I don't know why it would be undefined the second time.
The .on() type of binding works only with the elements which was created before the script has been initialised.
So if you load some content dynamically in the on click function, the on() binding won't work for that content.
One solution could be if you bind the click event to the container element, where you load the new content, something like this:
$("#container").on("click", ".actionLink", function(e) { ... });
"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()"
jQuery .on() doc
Related
I have this code and I am trying to open a Model Popup
#Html.ActionLink("Edit ", "My_Action", "My_Controller", new { Tag_List = Item._tags }, new { #class = "btn-link glyphicon glyphicon-tags", #data_target = "#tagsmodal" })
<div id="tagsmodal" class="modal fade">
</div>
But when I click on it, it opens the PartialView in new page, instead of Model Popup
What am I doing wrong here
Cheers
that is because your code turns into following HTML (this html is send to the user):
Edit
<div id="tagsmodal" class="modal fade">
</div>
This means that the a opens a new page if there is no javascript doing something else.
Razor C# code has no influence on what happens in the page. in the browser/page it is only html&javascript(&css) Razor&C# means nothing and wont be send to the client/browser and thus do not do anything. (it only generates this html and javascript which then is send to to browser).
In the browser you can view source:
to see what HTML was generated by razor. you will need to write javascript (an AJAX call) to make this url/data page open in a modal instead of a new page.
how are you guys?
i have asp.net webform its for adding news in the news content i would like to use summernote http://summernote.org/ Super Simple WYSIWYG editor. as a WYSIWYG editor so could some one please help me to save the data from this editor
this is my code
<div class="form-body">
<div class="form-group last">
<label class="control-label col-md-2">News Content</label>
<div class="col-md-10">
<div name="summernote" id="summernote_1"> </div>
<asp:label runat="server" text="Label" ID="news_con" ></asp:label>
</div>
</div>
</div>
i can't get the text value from the summernote
by this code
news_con.Text = Request.Form["summernote_1"];
Have you considered using a <textarea> to handle this as opposed to a <div>? Usually they are a bit easier to use with respect to storing values (as they are designed to do so) :
<textarea id="txtTest" runat="server"></textarea>
One of the ways that you might handle this would be to register an event using Summernote's available API to set the HTML content for your <textarea> element whenever focus was lost (e.g. the onblur) :
<script>
$(function () {
// Set up your summernote instance
$("#txtTest").summernote();
// When the summernote instance loses focus, update the content of your <textarea>
$("#txtTest").on('summernote.blur', function () {
$('#txtTest').html($('#txtTest').summernote('code'));
});
});
</script>
Since you are likely going to be storing HTML content within the element, you'll likely want to ensure that .NET doesn't think you are trying to exploit it. You can do this by either explicitly setting this page to ignore that process by updating the ValidateRequest property of your page :
<%# Page ... ValidateRequest = "false" %>
Or you could try simply escaping the content that is being set :
$('#txtTest').html(escape($('#txtTest').summernote('code')));
I want to render the page when i click on particular div.
For that i written div as:
<div id="idFlip" onclick="javascript:renderPages();">
-----------content---------------------
</div>
written javascript function as:
function renderPages()
{
alert("Inside");
#RenderPage("~/Views/PP/Teacher_Observation.cshtml");
}
But its showing me that page while the page itself is load.(i.e. showing me both views current one and Teacher_Observation.cshtml
Its not showing me on div click.
What can i do???
Please help me.
I want to render page on click of div through javascript function
You could render the view on page load inside of a hidden div e.g:
<div id="idFlip">
<div id="i-am-the-view" style="display:none">
I am some hidden content
</div>
</div>
And then in Javascript/jQuery:
$(document).ready(function(){
$('#idFlip').click(function(){
$('#i-am-the-view').toggle();
});
});
I am facing a problem with jquery modal Dialog box. I want the modal box to show only when my data is successful saved to database. I am using c# and asp.net, and on backend i am using Sql server 2008 R2. Currently my data is successfully entering and i am showing "the data is successfully saved on a label" after clicking on a button , but i want to show a modal box only when i click the button and my data is saved .
I have created this script
$("#Btndiag").click(function () { $("#myModal").modal(); });
and on content page body i have written this
<asp:Button ID="Btndiag" runat="server" Text="show dialog" onclick="Btndiag_Click1" />
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
<p>Here settings can be configured...</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
To achieve what you want, you have to process the data in the back end, and then have the ASP.NET Framework execute a script for you.
To accomplish this, you use ClientScriptManager.RegisterClientScriptBlock during full page postbacks, or ScriptManager.RegisterClientScriptBlock if the controls are inside of an UpdatePanel.
C# code:
protected void Btndiag_Click1(object sender, EventArgs e)
{
// process database
// verify results
if (success)
{
ClientScriptManager.RegisterClientScriptBlock(this, "Btndiag_Click1", "$('#myModal').modal();", true);
}
}
Remember that if the button and the modal div are inside of an UpdatePanel, replace ClientScriptManager.RegisterClientScriptBlock with ScriptManager.RegisterClientScriptBlock.
Finally, just as a last informational note...your script ($("#Btndiag").click(...)) will not work because ASP.NET changes element Ids when rendered as HTML.
You'd have to work it in the following manner:
$("#<%= Btndiag.ClientID %>").click(function () { $("#myModal").modal(); });
Please note that you do not need to do anything with the button's click event. You want the framework to automatically run your scrip after the postback.
My webbrowser connects to a page, then I want it to click a div.
<div class="acceptButton state1">
<a class="buttonGreen">
<span>${$item.getAddressButtonText( $data.messageType )}</span>
</a>
</div>
The page uses jquery or something to do it all. :( and most help I found required an id, which these only have a class
<script id='messageListItem' type='text/x-jquery-template'>
<li data-messagetype="${messageType}" class="${messageType}" data-messageid="${messageId}">
<div class="messageItem">
<div class="closeButton">
<a><span>X</span></a>
</div>
<img class="friendImage" src="${senderImgUrl}" alt="${senderName}" />
<div class="messageBubble">
<div class="messageBubbleTop"></div>
<div class="messageBubbleBody">
<div class="messageBubbleContent">
{{if $data.messageImgUrl != null}}
<img class="giftImage messageImage" alt="${messageImgAltText}" src="${messageImgUrl}">
{{/if}}
<h5 class="friendName">${senderName}:</h5>
<p class="requestMessage">${message}</p>
<span class="requestDate">${timestampStr}</span>
<div class="clearFloat"></div>
</div>
</div>
<div class="messageBubbleBottom"></div>
</div>
<div class="acceptButton state1">
<a class="buttonGreen"><span>${$item.getAddressButtonText( $data.messageType )}</span></a>
</div>
<div class="clearFloat"></div>
</div>
</li>
To click the div you can run JavaScript code in the WebBrowser's DocumentCompleted event handler using Navigate():
webBrowser1.Navigate("javascript: /* your javascript code */ void(0);");
So if you have a div:
<div class="myDivClass">
...
</div>
You can trigger a click on it using:
webBrowser1.Navigate("javascript: document.getElementsByClassName('myDivClass')[0].click();void(0);"); //assuming it's first and/or only div with that class
As far as I remember, it is not possible to click a DIV. In that, if you try, the event in the DIV will not trigger. Say, if the DIVhas an onclick event, it will not trigger.
So, what you have to do, in order to get the onclick event in the DIV to trigger, is to click anything (any of the other elements) in the DIV. Let's say the DIV has an IMG element/tag: Perform a .click on that and the DIV's onclick event will be triggered. Does this make sense? So any DIV's onclick triggering is only possible through onclick event bubbling - by using the method I described above.
I am just telling you this in case you we're expecting an onclick event to run that is attached directly to the DIV. Just in case you add it in the future or you run into it later, it is important for you to understand this (even though I didn't see an onclick in your DIVtag at the moment, it's an important information to have).
Hope this helps and if you have any further questions, let me know.
I only found this through testing and it isn't really written anywhere, the same thing applies to the span tag if I remember correctly.