Can Any one explain how to refresh a parent page from child page in C#
We have a requirement like, we have a textbox followed by image popup button , If we click on Image popup button it will open one popup which has a textbox in it.
If we add some text in that and click on the save button , The parent page textbox has to be updated.
It's updating only when we manually refresh the page.We want a requirement like we have to updated it without any manual refresh.
Does any one know this?
Is it a "real popup"--literally a new window? Or is it a simulated popup with an HTML Element? If the latter--you need some Javascript. You can do this without reloading the page with jQuery by:
PARENT PAGE:
<textarea id="parent-textbox"></textarea>
CHILD POPUP:
<textarea id="child-textbox">This is some content I'd type in the popup</textarea>
<button onclick="$('#parent-textbox').val($('#child-textbox').val())">Click Me To Copy</button>
After it copies, you can close your popup and see the results--no page refresh required. Add jQuery to your site with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
For info on how to integrate jQuery into your site (it's very easy), see
http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
try this (javascript):
window.top.reload()
Related
I am creating a MVC application in which on the Left Side Menu will load first time when the user Login into the application and on click of any of the Menu Option only Right side Content will display(Will Call the Action Method).
I have achieved it using Partial Views. Is it good to create whole application on Partial Views or is there any other way to achieve this?
Looks like you want to load the page for which the link is clicked, in an asynchronous way. You can do that using jQuery ajax methods.
So first, mark your links with a css class name so we can use that as the jQuery selector to wire up the ajaxfied load behavior. You should also has a content page to which we will load the result of the ajax call.
<div>
<div id="leftPane">
About
Contact
Index
<div>
<div id="rightPane">
</div>
</div>
Now you can listen to the click event on those link, use jQuery load method to get the content of those action method and update the rightPane's innerHtml
$(function(){
$("a.alink").click(function(e){
e.preventDefault();
$("#rightPane").load($(this).attr("href"));
});
});
With proper css, you can keep the leftPane to the left side of the container and rightPane to the right side of that.
I have a JQM page with some events on html elements that will change DOM of the page. e.g. clicking a button will add a paragraph on the page. The page also have a link that will load another page via ajax. The new page have back button, but the problem is that when the back button is triggered, it will go to the previous page with the original content. What I want is to retain the modified DOM of the page. How can I do this with JQM?
Thanks.
I am trying to load a page with transition effect on click of a link. I have used jQuery Mobile.
Below is my code.
Transition
On click of Transition link index.html page should be loaded showing transition effect.
Below is the output of index.html that I am trying to load.
But problem is that when I click Transition link the index page is not loaded as expected. The loaded page looks like below.
When I looked through firebug what is happening, I found that instead of loading complete page what transition is doing that it is putting output of linked page( i.e index.html) into first page and applying css of first page to it.
I want transition to load index page properly with its all css not to embed it into the page link is called from.
Can you please tell me how to achieve this.
In JQM by default when you link to another page JQM looks for the first JQM page (without any of the scripts or styles on that page)on that page (data-role="page") and then via ajax pulls it and enhances it and attaches it to the DOM of the current page. If you want to fully load the second page instead then you need to either set ajax-enabled to false (this is a global setting) or on the link to the second page add the attribute data-rel="extrenal".
Add in your html link tag the following attribute: rel="external"
Transition
I am new to jQuery Mobile. I am trying to move from page #one1 to #page2. #page2 contains an address book form. If I fill something in the form and click on the back button to move to #page1 and then I again move to #page2, the form will show all the previously filled data.
I want that when I go back to #page2 all the fields be blank.
I have also tried it with putting an alert. The alert will popup the first time but it is not showing when I revisit this page again.
$('#page2').live('pageinit',function(event){
alert("Edit");
});
Thanks
Vivek
In the button that shows up #page2, don't move right away to #page2, first call a function that clears the fields. And then you can move to #page2...
I have made a blog application where I have this form for writing the blog. It has a title field, an instance of of tinymce editor for the blog body, a text field for adding tags and the submit button.
What I want to do is to by default show the whole form to the user when the page loads. The user can fill in the title. Now when the user comes on the text-editor, there will be a button on clicking which only the text editor will open in the modal window and the user can type in that.
Once the user clicks on the cross, then the text is copied to the underlying text editor. I am not that good at javascript and I have looked a few blogs, but that didn't help. Any directions will be really appreciated. I am adding a snapshot of how the blog page looks like.
You need to start off by initializing your TinyMCE editor with something like this (add in any options you want):
$(function() {
tinyMCE.init({
mode: "none",
theme: "simple",
});
//whatever code
});
You can set up any mode you like but I'm going to go with dynamic creation (mode: none) because it gives you more control. Initialize your modal in "whatever code" then create your editor inside the modal with the code below:
tinyMCE.execCommand('mceAddControl', false, 'id_of_textarea');
To get/set the content of your editor you would do this:
tinyMCE.activeEditor.getContent();
tinyMCE.activeEditor.setContent('data in here');
You'll need to close your tinyMCE editor before you close your modal or it will fail to load next time the modal opens. To close it you need to execute the following code:
tinyMCE.execCommand('mceRemoveControl', false, 'id_of_textarea');