is it possible send some parameter from one partialview to another .
i have 2 partial views . i wanna when i click on btn1(in partialone) , some parameters will be send to partial2 . of course without post back.
is it just possible with java script? is there any way?
for example i wanna send my td's values to second partial :
<tr>
<td class="tdPhone">2265176</td>
<td>Email :</td>
<td class="tdMobile" >fdg#gmail.com</td>
</tr>
<button class="btn btn-medium " data-type="submit">Next</button>
Partial views are finally rendered as divs in html page. So you will need to use client side javascript so that one div can talk to another. One of the cleanest technique will be to use triggers if you are using jquery. To send the data from one div on button click
$('body').trigger('div1-trigger-someBetterNameConventionWillHelp', [$('.tdPhone').innerHtml(),$('.tdMobile').innerHtml()]). and then another div where you wish to update it u can trap this trigger using
$('body').on('div1-trigger-someBetterNameConventionWillHelp', function(evt, data)
{
});
There is whole lot of caveat with this solution like you should try to identify the data with ids and not by classes and all, but just presenting the solution based on the question you asked.
Related
I wrote a Web Application. In which the users can make inputs which will be saved
in a database. (with a [HttpPost] function). From these functions I open other Views. My problm is that althought the Views show up without any problem the path in the link stays the same. This is problematic when I want to go back or I want to copy the link... My idea was to somehow display the link per javascript everytime I load a View but that seems to be a very unprofessional way of doing it.
Simple,
<div class="table-outer">
<table width="50%" align="center" border="1">
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<td>Column4</td>
</tr>
</table>
</div>
.table-outer{width:100%; background:#ddd;padding:20px}
automatically align center
https://jsfiddle.net/kamatchikumar/3u5qwqms/
I've been working with Knockout.js for some time now but only recently I've started to integrate jqueryUI animations for the sake of a better user experience. I'm seeing some issues trying to use the animation bindings on the tr elements inside a table tag. When I use the "visible" binding to hide and show each element it works just fine but when I attempt to animate the showing hiding of each element it only seems to apply to the first row in the table. I've attempted this using various methods. I've attempted using the knockout foreach template 'afterAdd' option as described here:
http://knockoutjs.com/documentation/foreach-binding.html#note_5_postprocessing_or_animating_the_generated_dom_elements
I've also created a custom binding and attempted to use that on each of the table row items with the same results.
Lastly I attempted to use the plugin found here:
http://www.codecoding.com/knockout-plugin-visibility-bindings-with-jqueryui-effects/
And again, it only appears to work on the first element of the table. Now before attempting to rewrite my HTML to use divs and spans rather than the tables I wanted to see if anybody else has seen these sorts of issues with knockout in the past. The relevant chunk of HTML is this:
<table class="tab_table table_a">
<tbody data-bind="foreach:featuredMenuItems,visible:showFeatured">
<tr data-bind="fadeVisible:readyToShow, click:function(){$root.showProductOptions($data);}">
<td class="td_large" data-bind="css:{td_select:itemInCart};"><span class="inCart_delete" data-bind="css:{display_IB:itemInCart},click:removeFromCart,clickBubble:false"><i class="fa fa-times-circle"></i></span><span data-bind="text:name"></span></td>
<td class="td_last" data-bind="css:{td_select:itemInCart},text:lineItemCost"></td>
</tr>
</tbody>
</table>
I would paste the ViewModel code in here as well but it is a rather large view model and the relevant part to this is just a simple "readyToShow" observable set to either true or false. Whenever this table is being shown the "readyToShow" values of each of the objects in the observableArray containing the table items is being set to true over time using a timeout so as to show a cascading effect when the table is shown.
I would really appreciate any help you guys could provide. Thanks!
In a Chrome Packaged app, using angular.dart, in a component html I have the below table which is dispaying paginated contents of an object list; exp. jobs :
<tbody>
<tr id="{{job.jobID}}" ng-repeat="job in jComp.jobs | pagination:jComp.paginator.instance" ng-model="job" ng-click="jComp.selectJob(job.jobID)">
<td>{{job.jobID}}</td>
<td>
{{job.productID}}<br>
{{job.productDescription}}<br>
</td>
<td>{{job.productType}}</td>
<td><img alt="No thumb" ng-src="{{job.thumbFURL}}"/></td>
<td>{{job.status}}</td>
</tr>
</tbody>
then in my component I am showing a popup modal div to ask user to choose an action. When the user clicks to change the job.status, there is a second layer of confirmation modal, and once confirmed in the component I am finding the job from the jComp.jobs List and updating the status. In side the popup modal the status gets updated but on the table it still shows the old status. And then when I paginate to next page and come back it gets updated. Before page switch it stays the same ? I tried calling scope.apply() after updating the jobs list, but it doesn't help. I like to know what is paginator.goNext() or paginator.goPrev() doing that causes the table list to refresh. Not clear about how the two way data binding working in this scenario. ( pagination is done using angular_pagination package )
I tried using :
<td ng-bind="job.status"/>
instead of:
<td>{{job.status}}</td>
and it fixed this issue. I am not sure why double brackets were not registering the object in the list to the change listeners / watchers. As far as I understand two way binding should be working with {{}} but in this case something was breaking it. It might be a bug in double brackets.
How do I recreate the add comment feature in Stackoverflow using mvc 3 razor (EF4)?
Here's mockup code:
<div>add comment</div>
<ul id="comments">
#foreach (var comment in Model) {
<li>#comment</li>
}
</ul>
<form method="post" id="commentForm"
action="#Url.Action("AddComment")">
#Html.TextArea("Comment", new { rows = 5, cols = 50 })
<br />
<input type="submit" value="Add Comment" />
</form>
How do I go about with the Add/Edit comments via ajax/jquery? Should it be a partial view?
I'm not sure how StackOverflow does it, but there are a few ways to achieve the same thing.
Usually, you'd write some jQuery in your page to intercept the form post and post the data using ajax instead.
You could post to a Web API or just an action that returns JSON. On the server, add the comment to whatever data store you're using and reply with either a success result or details of the saved comment (up to you). When complete, render the new entry on the client side using jQuery - in your case, just add a new li with the comment. OR
You could post to an action that returns a partial view. Save the comment, update the collection, then render the partial view. In your jQuery, you could replace the whole comments section with the new content.
It's a very broad question and there are many other ways to do it. You could use something like SignalR to push new comments from the server (to make it realtime), and you could use a JS templating framework like Knockout JS so you're only dealing with a template and an array of objects.
I am using jquery 1.6.4 and I have a table. Initially in the table, a user is presented by only one row and a few columns. I, then, let users add as many rows as they would like using by doing this
$('.add').live('click', function(e){
e.preventDefault();
var $parentRow = $(this).parents('tr');
$parentRow.clone().insertAfter($parentRow);
$parentRow.next().find('input').val('');
$(this).replaceWith('-');
});
I also let them delete the rows on fly doing this
$('.delete').live('click', function(e){
alert("removing");
e.preventDefault();
$(this).parents('tr').remove();
});
However now I want the values that they are entering in these columns to be collected. I am not sure how to collect those values when they hit submit button as in my view source all I see is this
<tr>
<td class="actions">+</td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><textarea rows="1"></textarea></td>
</tr>
In the page source it shows only one row where as in my view I definitely see three rows added. Not sure what am I missing and how to get the values
You don't have ids so it will be difficult to tell what you are actually collecting, but to get the values of the inputs, both static and dynamic, you can use this:
//submit code
$('input[type=submit]').click(function(){
$('table input').each(function(index,item){
//for testing you could just output to a div
//$('#output').append($(this).val());
});
});
From what I can tell, your input fields don't have names, so you're not going to get much when submit is pressed.
Also, you won't see DOM updates in your view source. View source will only show you what the page looked like when it first loaded.
To get a live view of the page, you can either use FireBug, for FireFox, or if you're using Google Chrome, there are developer tools under the "View" menu that you can use to see how the html looks live.