I have very little experience with jQuery and asp.net (VB).
What I am trying to achieve is this:
1. My page has few textboxes, and a panel containing three labels, a GridView and a HiddenField.
2. When page loads hide panel
3. On the page, user clicks inside textbox and then presses F2 key
4. jQuery senses the F2 key and extracts textbox class and value
5. Also HiddenField/HiddenBoxID value is set to textbox class
6. Trigger a button's click event
7. Now in code behind extract hiddenID value and do further procesing
8. Make panel visible
My jQuery looks something like this:
// Extract TextBox ID and Text Value
var currentClass = $(this).attr('Class');
var currentVal = $('.' + currentClass + '').val();
$('#HiddenBoxID').val(currentClass);
$("#helpButton").trigger('click');
My helpbutton code looks like this:
Dim HuntBoxID As String
HuntBoxID = HiddenBoxID.Value
Here is the problem, when the panel is set to visible=true then I am able to get HiddenBoxID value from jquery to code behind, but when I make the panel visible=false then I am not able to send value from jQuery to code behind. I don't know why? I am using chrome browser and in debug console (F12) I can see the value being set in currentClass and currentVal.
Can someone pls tell me how to achieve the above mentioned.
Also can someone tell me what I am doing wrong, Some code examples will be very helpful.
When you set a control's Visible property to false, none of that control's HTML markup will be sent to the client. As far as the client is concerned, that control does not exist. You can verify by viewing the HTML source on the client.
Instead of manipulating the Visible property, use CSS styles. Here it is in C#, but the VB.NET syntax should be similar:
HiddenBoxID.Style.Add("display", "none");
When you manipulate it with CSS styles, the markup will still be sent to the client, and therefore you can later show the element using client side code. For example, with jQuery:
$('#HiddenBoxID').show();
It's been awhile since I've done something like you are mentioning, specifically using client side javascript/jQuery... but my guess is that you are unable to get the client side ID because asp.net isn't even sending the control to the client since it is visible=false.
I could totally be wrong about this... but when you say you are immediately hiding the panel on page load...I assume you are doing that sever side in code behind, right? Maybe try setting it to hidden in jQuery. In other words, ensure the control is getting sent to the client and then use jQuery to hide it immediately.
Another thing to look at is hit F12 and see if your hidden html is visible in the source on the client. If it isn't then asp.net isn't even sending the control to your client, hence why you can't get the client ID.
Related
I've some RegisterStartupScript in my C# code behind that assign some values to some fields to some controls of a panel when it is openend.
Controls in the panel show as if their values had been assigned properly but in reality they work as if the had never been assigned, I've checked this on the dinamic view of my aspx page.
For example: This is an instruction of one of the startup scripts: document.getElementById("MainContent_Textbox1215").value ='CALL CENTER';, and in fact when I see that textbox on the screen it displays call center.
But at the same time, this is what is really in code and what the application interprets for future operations, taken from the dinamic view of that particular page.
<input name="ctl00$MainContent$Textbox1215" type="text" id="MainContent_Textbox1215" class="listBox" style="width:50%;" />
Similar things happen with radiobuttons, so even if on screen one seems to be selected the one that's selected for real is the one defined as default, and likely with all types of controls.
It's like for real a value had never been assigned to the textBox or the radiobutton... This is the weirdest thing I've ever seen in programming, hope you can guide me about what to do.
Even i have faced such a problem once while working with javascript and dotnet.
What i can say is that you might not have specified the Value attribute of
the textbox in you html that is the reason it is not showing it in your dynamic
aspx page but the value has been assigned and you can use it anywhere you want.
This you can verify even with ha plain html page there also i faced the same
thing. But if you have specified some value for the Value attribute you will see
old value in the html source but if you try to access it using javascript it will
show you the new value. I cant figure out the reason behind this behaviour but
this is what i have experienced.
I've seen good posts here of bits and pieces of what I am attempting to do, but nothing with all areas addressed. Does anybody have any code examples or advice to help me do what I am trying to do?
First, I will build my MVC view with an array of data such as (org name, id, status) where status is a boolean value, either selected or unselected. However, rather than showing a mere checkbox, I'd like to display a particular showing either a green (selected) or red (not selected) button based on the state of the database value. CSS is not an issue.
Then, if and when a user clicks the button, I would like to change the div value from red to green (or vice versa), but also update the boolean value in the database field via an AJAX call. It would be preferable to leverage JQuery where possible.
Finally, I need to know how to do this all using CodeIgniter. I am well versed in CI but a Javascript/JQuery newbie - deer in the headlights at this point. Can anyone point me in the right direction or suggest a web site with some sample code close to what I am trying to do or a good resource other than the obvious? Thank you kindly.
OK, so CodeIgniter is a PHP framework - which means it works server-side. (I know, there's an ajax library in there, but I don't use that.) We have to understand the difference between server-side and client-side. Your javascript is client-side. I usually develop everything without javascript to begin with in codeigniter, then go back and add the javascript bits. This helps me to ensure that the system works for those that don't have javascript turned on, or can't execute javascript for whatever reason. (BTW, this is called progressive enhancement).
So, first, let's take care of the non-javascript version:
You just need to give your red/green button a url when clicked that points to the controller method that will update the database record and redirect you back to the page that you were previously on (which has the red/green buttons).
/controller/method.html is our controller method that will save to the database and redirect back to this page. -->
Check
Now, let's take care of the js version:
in your view, you just need to hijack the click, send the ajax request, and change the red/green button based on the result from the controller method. So, what we do is keep the link from redirecting the page to the href attribute (e.prevendDefault()). Then, we get the value of the href and make an ajax call to that controller method. The method will determine if this is an ajax request and save to the database, then echo back a "success" message. On success, we can update the visual component on the client side.
$('.my-button').live('click', function(e) {
e.preventDefault();
$.ajax({
// $(this).attr('href') gets the value of the links href attribute
// which is "/controller/method.html" in this case
url: $(this).attr('href'),
success: function(data) {
// update your button with whatever html to write the new button
$('.my-button').replaceWith('Check');
}
});
});
Your controller method just checks if it is an ajax request or not. If so, just returns success, if not redirects the page.
function my_controller_method()
{
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") {
// update your database
echo "success";
}else{
// redirect back to page
redirect($_SERVER[‘HTTP_REFERER’]);
}
}
What you want is sort of a thumbs up / like thingy...there's a demo included in the link http://www.geertdedeckere.be/lab/themeforest/thumbsup/demo/
i am using struts framework along with jquery and there is button. On click of that button action to save data is called if data is valid else error in top div is shown. But the problem is that its not scrolling to show user error and i want it to scroll to show user the error message.
I know that it can be solved using href='#' but it is already being used to call the action.
Your question doesn't really make it clear whether this validation happens client-side or if you're talking 'bout a response from the server, and you haven't shown any code, so I'm not sure where exactly you need to put the following to fit your existing implementation, but anyway you can bring an element into view like this:
document.getElementById("idofyourdivhere").scrollIntoView(true);
The parameter true should align the element to the top of the scrolling area; if you pass false instead it should align with the bottom.
I don't know if there's a jQuery method to do the same thing, but of course you can select the div with jQuery (you might already be doing so to set the error message) and then call the non-jQuery function - the following uses jQuery to set the error message and unhide the div (obviously this assumes it was hidden initially) before bringing it into view the non-jQuery way:
var yourDiv = $("#idofyourdivhere");
yourDiv.html("Your error message here").show();
yourDiv[0].scrollIntoView(true);
I have stumbled upon the issue when I need to retract html controls I've added client-side using JavaScript after the postback (due to server-side validation - this is not optional).
Please tell me if the way I'm trying to achieve this is cr*p and there's a better way of doing this.
basically, what I'm doing is cloning a textbox control for up to 10 times on the page when the user hits "Add" and storing entered values from each of those texboxes in a hidden field to read from in the code behind. This works fine, however, when the server side validation doesn't pass after postback, all those dynamically added (cloned) texboxes disappear, since ViewState knows nothing about them.
I am considering 2 possible solution, both of which seem hacky:
Rebuild all cloned textboxes on document onload() using stored values in the hidden field
wrap the form in ajax update panel and place the cloned texboxes outside of it, thus, not refreshing this part of the screen on postback
now, is it possible to somehow "update" ViewState to make it aware of all the html controls I've added using client-side script? Any better ideas? I'd like to achieve this with client-side script, therefore not considering cloning textboxes on server-side, sorry.
You cannot modify the ViewState on the client side. If you do, you will invalidate the viewstate and receive an error on the postback.
In your case you might want to consider using javascript and jQuery to render the text boxes on the document ready event with the values stored in your hidden field. I'd recommend taking a look at jQuery templating, particularly if you can store your data as JSON in the hidden field (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as-official-jquery-plugins.aspx).
how to use Pager(GridView or ListView) with html link.
is that right that this code is not SEO friendly?
thanks.
You have two questions.
First:
You can implement a pager by using post-backs. Basically you will invoke a server call at each click of a link. And the server would reply with a new page of the dataset. But the asp.net controls submit the form using javascript. It looks like:
link text
So to not use the javascript at all, you could use a HTTP GET only method. This is just one way to do it.
So what you want generated is something that, it will pass to your server a page value using a query string parameter named 'page'.
You can handle that in your aspx page any way you see fit. But it needs to generate some thing like that.
page 2
In the page load of somepage.aspx you handle it.
protected void page_load(EventArgs e){
// check if the page parameter is set in the query string
if(Request.QueryString["page"] != null){
// page is the value of the requested page
var page = Request.QueryString["page"];
}
// bind you data to the control.
}
Then when binding the data to your GridView or ListView you filter the data based on the page requested.
#pre has a good answer for your first question.
Regarding your second about SEO and JavaScript:
JavaScript has to be used correctly. In other words, the html has to have the links and all of the pieces necessary to be read by a spider. If nav elements are injected via JavaScript then you can be assured that a spider will not see them.
You can certainly use JavaScript to change the styling, reposition the pager area or add other attributes but the base anchor tags with the appropriate href attributes have to be present.