I am having some trouble with a URL value that's set, I have below URL:
http://localhost/myapp/Admin/ScheduleTaskDetail.aspx?id=1&mode=v
The modes are:
v - View
e - Edit
a - New
I want to allow changes to the view page so when I click a button they can edit. I have managed to get this working by using the function that reads from the URL and changing its behavior there. However I don't know how to update the URL without a response.redirect().
Is there a way to add code to a onclick event that will change the &mode=??
Unfortunately, I can't share code as its not my code to share.
This is part of a MVC c# / aspx project.
If there is a question answering this please let me know I couldn't find a match that was applicable.
Change Browser URL without reloading using JavaScript
The HTML Markup consists of 3 buttons which make a call to a function ChangeUrl. This function accepts the page Title and URL as parameters.
It first checks whether browser supports HTML5 and if yes then a State object containing the page Title and URL is created and is passed to the HTML5 History pushState method along with the page Title and URL as the other two parameters.
<script type="text/javascript">
function ChangeUrl(title, url) {
if (typeof (history.pushState) != "undefined") {
var obj = { Title: title, Url: url };
history.pushState(obj, obj.Title, obj.Url);
} else {
alert("Browser does not support HTML5.");
}
}
</script>
<input type="button" value="Page1" onclick="ChangeUrl('Page1', 'Page1.htm');" />
<input type="button" value="Page2" onclick="ChangeUrl('Page2', 'Page2.htm');" />
<input type="button" value="Page3" onclick="ChangeUrl('Page3', 'Page3.htm');" />
Change Browser URL without reloading using jQuery
The HTML Markup consists of 3 buttons to which the jQuery click event handler has been assigned. Inside the jQuery click event handler, a function ChangeUrl is being called which accepts the page Title and URL as parameters.
This function first checks whether browser supports HTML5 and if yes then a State object containing the page Title and URL is created and is passed to the HTML5 History pushState method along with the page Title and URL as the other two parameters.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ChangeUrl(page, url) {
if (typeof (history.pushState) != "undefined") {
var obj = { Page: page, Url: url };
history.pushState(obj, obj.Page, obj.Url);
} else {
alert("Browser does not support HTML5.");
}
}
$(function () {
$("#button1").click(function () {
ChangeUrl('Page1', 'Page1.htm');
});
$("#button2").click(function () {
ChangeUrl('Page2', 'Page2.htm');
});
$("#button3").click(function () {
ChangeUrl('Page3', 'Page3.htm');
});
});
</script>
<input type="button" value="Page1" id="button1" />
<input type="button" value="Page2" id="button2" />
<input type="button" value="Page3" id="button3" />
Perhaps a better approach instead of trying to shoe horn in the use of URL query strings is to just use a control on the page which triggers the V, E, A values and fires the appropriate event depending on what the user clicks/selects. So for example a dropdownlist with V, E, and A. User selects the value they want then the binding is done at the selectedindexchange event. You can use updatePanels if you only want to refresh a applicable section of the page.
Related
My code in aspx page is:
<script type="text/javascript">
function MenuItem_Click(itemId) {
<%
MyAspLogger("Clicked on item: {0}", itemId);
%>
}
</script>
I don't know how to access "itemId". I know that from other side - accessing c# variable in aspx code it is possible. But I don't know if is possible access javascript variable in c# code include in same javascript function.
Thank you for your help.
I guess you are tryingto get the clicked menu ids, and then log all clicked menu item?
1- To get the menu id,
Pass the menu object using keyword "this" to the function handling the click (MenuItem_Click).
<a id='menu_1 onclick='return MenuItem_Click(this);'>Click Me!</a>
<script type="text/javascript">
function MenuItem_Click(me) {
alert(me.id); // The Id of menu clicked.
// Do Whatever you want with the id now.
.
.
.
}
</script>
2- Logging clicked menu id
You have 2 options actually ... use a web-service call each time a menu clicked (which I don't recommend)
OR
Use a variable to store the clicked menu ids Or a hidden variable.
<script type="text/javascript">
function MenuItem_Click(me) {
var hdnMenuLog = document.getElementById('hdnMenuLog');
hdnMenuLog.value = hdnMenuLog.value + '|' + me.id;
}
</script>
Hope this helps!
You can not access javascript variable value in server side code until you do postback and send asnc call using ajax. Asp.net generates html and javascript code from server side and sends response to client i.e. browser.
To access javascript variable value after postback you can assign it to some hidden field that is made server accessible and access it on server side code. This is how asp.net maintains ViewState.
I tried
<asp:Label CssClass="helperLabel" runat="server" Visible="False">Test</asp:Label>
<script type="text/javascript">
function MenuItem_Click(item) {
// Setup
$(".helperLabel").html("asdf");
<%
MyAspLogger("Clicked on item");
%>
</script>
in code behind I have
protected void MyAspLogger(string logMessage)
{
MyLogger.Debug(logMessage + "/" + helperLabelId.Text);
}
It's working fine but 2 other issue.
Text is not change on server side but only on client side(saw that after removed Visible attribute from asp control).
And also I found that MyAspLogger method is called on page load not after click event.
What I need is grabb itemId and log that via my Logger method from code behind.
Thank you.
Here is what I need to do (in ASP.NET):
Solution A, Project A, Page A will have a textbox and a link that opens up another page. This other page is part of Solution B, Project B, Page B. Page B will have a textbox and a submit button. When you click submit it will close the window returning to Page A placing the text that was in the textbox on Page B into another textbox on Page A.
I could probably store the value of the textbox into SQL Server and then retrieve it, but I was hoping there was another, better way.
Any help will be extremely helpful, thanks.
Using the following: ASP.NET, C#, JavaScript, jQuery, SQL Server, HTML, CSS, etc.
What if you use a jQuery modal window to display Page B and have a trigger within page B to send the data back to the element on page A
Page A:
<div id="page_a">
<form>
<input name="page_a_box" id="page_a_box">
</form>
</div>
<div id="container_for_page_b">
</div>
<script>
$.ajax({
url: 'page_b.asp'
,cache: false
,dataType: 'html'
,success: function(data){
// fill the container with html data
$('#container_for_page_b').html(data);
// invoke jQuery UI's dialogue window
$('#container_for_page_b').dialog();
}
});
</script>
Page B:
<div id="page_b">
<form onSubmit="$('#page_a_box').val($('#page_b_box').val()); $('#container_for_page_b').dialog('destroy');">
<input name="page_b_box" id="page_b_box">
<input type="submit" value="submit">
</form>
</div>
Check this out for more ideas:
http://jqueryui.com/dialog/#modal-form
I think you can easily achieve this by using query parameter's.
On Page B, during the Click event of the button, set a Session variable:
Session["TextBoxB"] = textBoxB.Text;
and then on Load in Page A, add the code to look for it:
if (Session["TextBoxB"] != null)
{
// it has a value so use it
textBoxA.Text = Session["TextBoxB"];
}
I am using jQuery mobile in my project and when I log on to system, then go to change password page, the change action is not firing (no action). But, when I refresh the page, it is firing. Briefly, the button on the page is not working when it is redirected from another page except itself. I have imported .css and .js files correctly in master page. (Generic Handler returns correct values and it is working)
head content:
<script type="text/javascript">
$(document).ready(function () {
$("#changePasswordBtn").click(function () {
$.ajax({
type: "POST",
url: "ChangePasswordHandler.ashx",
data: "oldPassword=" + $("#oldPassword").val() + "&newPassword=" + $("#newPassword").val() + "&reNewPassword=" + $("#reNewPassword").val(),
success: function (msg) {
if (msg == 0) $("#popupText").text("success");
else if (msg == 1) $("#popupText").text("wrong pass");
else if (msg == 2) $("#popupText").text("match error");
else if (msg == 3) $("#popupText").text("fill boxes");
else $("#popupText").text("error");
}
});
})
});
</script>
body content:
<input type="button" id="changePasswordBtn" value="Change Password" data-inline="true" />
I have seen a similar problem in my project. Make sure that you are using different ids for buttons.
If the ids are same then the click event is not attached to the right button.
I got a workaround for this issue by changing the way I load my pages.
I put target="_self" into the href element so it don't load using the # system - this way the javascript loads with the initial page load while navigating from one page to a nother.
I will put the below link on my index.html page that will navigate to my signup.html page.
Signup
NOTE: You will lose the 'fancy' jQuery Mobile page transition feature
Need to pass a value from web page to codehind from a hyperlink with a parameter like e.g. page.aspx?id=1. I want to use jQuery if appropriate
How can I pass this value to the code behind without exposing as a querystring in the browser?
One way to do it is to use an ASP.NET hidden field.
<asp:HiddenField id="hdnWhatever" runat="server" value="blah" />
This field can then be manipulated with javascript or jquery and can also be easily used in your codebehind.
Try submitting form as jSON .. Sample -> replace [#form-request] with your form and [/index.php?option=com_seomozapi&task=request.save] with the file action/destination .. return false will keep the focus on current page (no server side refresh)
getScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
js = jQuery.noConflict();
js(document).ready(function() {
js('#form-request').submit(function(event) {
console.log('test 1');
$.post('/index.php?option=com_seomozapi&task=request.save'); ?>', $('#form-request').serialize(), function (data, textStatus) {
//Do something here
});
console.log('test 3');
return false;
console.log('test 4');
});
});
});
I'm using AJAX on an ASP.NET web project to update a page. Some of my functions return XML that I want to embed on the page after it reloads. This part works, here's a sample of how it looks at the top of the page:
var productXML = "<?xml version=\"1.0\"?><ArrayOfProduct xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\"><Product><ActualProdID>123</ActualProdID><Name>Test</Name><Description>Test</Description><Edition>Test</Edition><Platform>Test</Platform><Family>Test</Family><Type>Test</Type><DeploymentTypes>Test</DeploymentTypes><BaseActualProdID>Test</BaseActualProdID><Price>0</Price></Product></ArrayOfProduct>";
Later in the page I'm trying to use the XML but it's not working. I tried to do something simple and just throw an alert box in that looks like this:
<script type="text/javascript">
function closeLoading()
{
jQuery('.pleaseWaitPanel').css({ 'display': 'none', 'visibility': 'hidden' });
alert("here");
alert(productXML);
alert("here2");
}
</script>
closeLoading() is called inside:
window.onload = function () { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading); };
It loads the jQuery and the first alert "here" works perfect. When I go to alert the productXML, nothing happens. It doesn't throw a JavaScript error, I'm using Firebug. I can confirm the XML is on the page.
Any help on this would be GREATLY appreciated!!
From your code snippets, it looks like your closeLoading function is only being called in your window.onload function. This means that it won't be called after any Ajax request completes as the window won't be reloaded.
I would try moving your call to Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading) to just before your closing server-side form tag:
<form runat="server">
...
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading);
</script>
</form>
Hope this helps.
var productXML
Is a ServerSide variable, so you don't have access to this in Client script.
If you want to use in a javascript function you can do this :
1) Put the result in a textbox hidden, like
<input type='hidden' value='<%=productXML%>'>
then simply get the value of the textbox.